javascript - JavaScript:事件侦听器函数无法识别屏幕上某个点过去的事件
问题描述
我有一个用 JavaScript 构建的游戏,您可以在其中将硬币从龙下方拖入金库以得分。
游戏参考:https ://codeeverydamnday.com/projects/dragondrop/dragondrop.html
只有在金库范围内投下硬币时,您才能获得积分。保险库边界在这些绝对位置内:
保险库左边缘:距屏幕左侧 645 像素
保险库右边缘:距屏幕左侧 915 像素 保险库顶部边缘:距屏幕
顶部边缘 290 像素
保险库底部边缘:距屏幕顶部边缘 540 像素
在你投掷硬币时运行的函数上,我有一个“if”语句,只有当你投掷的硬币有新的 xy 坐标落在保险库范围内时才会累加你的分数(仅显示相关代码,如果需要可以提供更多):
function moveDrop(e) {
e.preventDefault ();
coin.style.left = e.pageX - myX + 'px';
coin.style.top = e.pageY - myY + 'px';
// myX and myY are the coin's original x-y coordinates. This line resets their new x-y coordinates after the drop
if (
coin.style.left > "645" &&
coin.style.left < "915" &&
coin.style.top > "290" &&
coin.style.top < "540") {
// Function that adds your score each time you drop a coin in the vault
}
}
上面的功能按原样完美运行。老实说,我不确定如何,因为coin.style.left
会有一个类似的值700px
,我要求它检查它是否大于645
(没有 px),但它有效。
但是,我试图简单地将 Vault 向右移动 200 像素,以便其新的 x 坐标范围是从屏幕左侧的 845 到 1115 像素(而不是 645 和 915)。
当我将 Vault 图像的绝对位置更新为 845px 时,它移动得很好。当我在上面的 if 语句中更新coin.style.left > "645"
to时,它工作正常。coin.style.left > "845"
但是,当我将 更新为coin.style.left < "915"
时coin.style.left < "1115"
,我可以将一枚硬币拖到金库中,但 drop listener 没有识别出硬币已落在金库范围内,因此不会累加你的分数。
我做了一些测试,结果证明它可以工作,直到我将左边缘属性更改为coin.style.left < "999"
. 一旦我将其更改为1000
或更多,它就会中断。我不确定它是否与数字 1000 本身有关,或者它现在是 4 个字符而不是 3 个。
movedrop
事件处理程序正在侦听元素上的操作,body
所以我认为文档正文可能只有 1000 像素。但是,我在 css 中将其设置为 1200px。
body {
width: 1200px;
height: 650px;
}
我尝试使用 Chrome 开发工具检查元素,看看在 1000 像素之后是否有一些隐藏的边距。我什么都看不见。有一个右边距,但仅超过 1200 像素。
我在 index.html、style.css 和 script.js 文件中到处搜索“1000”,看看是否有其他设置为 1000,但什么也没有。有什么我遗漏的东西可能会阻止该功能正常运行超过 1000 像素吗?
如果需要,我可以提供完整的代码。
解决方案
我想出了我的问题的答案。我试图比较两个字符串值而不是两个数值。
在下面的代码中(从上面的描述中缩短为相关代码),该coin.style.left
值可能最终类似于"760px"
,例如。
function moveDrop(e) {
coin.style.left = e.pageX - myX + 'px';
if (
coin.style.left > "645" {
// Do some stuff
}
}
然后,在 if 语句中,我问“760px”是否大于“645”。因为我在值周围使用引号,所以我比较的是字符串而不是数字。我还不如问“狗”是否大于“椅子”。该函数并不确切知道如何处理它。
我通过使用以下子字符串方法首先将coin.style.left
值转换为后面没有“px”的数字来解决此问题:
function moveDrop(e) {
coin.style.left = e.pageX - myX + 'px';
var finalLeft = coin.style.left.substr(0, coin.style.left.length-2);
if (
finalLeft > 645 {
// Do some stuff
}
}
该变量finalLeft
从 中获取值coin.style.left
,例如“760px”,找到字符串的长度(在本例中为 5),然后从末尾减去 2 个字符,只剩下“760”。然后,if语句可以比较760是否大于645。
进行此更新后,我能够成功地将宽度增加到 1200 像素,而不会出现问题。
推荐阅读
- jsf - jsf获取bean内部的请求参数
- php - Laravel:在自定义登录控制器中使用节流阀
- java - Java - 无法移动 JTextField 的位置
- c++ - 没有默认构造函数的类对象的值初始化
- javascript - MutationObserver - 如何检测 iframe 中的 dom 变化
- python - 使用 pandas 从开始时间和持续时间(分钟)计算结束时间。标准方法错误
- google-apps-script - 生日电子邮件、空白行和错误日期
- php - 从 PHP MySQL 中的推荐系统中跳过不活动的赞助商 ID
- .htaccess - http 到 https htacces - 重定向你太多次
- ios - 如果遇到错误 405,如何删除 collectionview 记录?