javascript - 使用全局变量存储数字 (JavaScript)

标签 javascript html

声明 if (xPos === xGold3 && yPos === yGold3) ,代码不知何故无法识别 xGold3 和 yGold3 的值,我的代码不起作用,但如果我分配手动设置一些值,例如 if (xPos === 400 && yPos === 0) ,然后代码就可以工作了。谁能告诉我我做错了什么?谢谢

<!DOCTYPE html>
<html>
    <head>
        <title>P</title>
        <style>
            div.box{ width: 600px; height: 400px; border: 5px solid black;
                margin: auto; position: relative; }

        </style>
          <button type="button" onclick="position();setGoldPos();">New Game</button>
    </head>

    <body onLoad ="getGoldPos()"  onKeyDown = "move(event)">
         <script>
             var dx = 20;
             var dy = 20;

             var xPos = 0;
             var yPos = 0;

             var xGold3 = 0;
             var yGold3 = 0;

             //generates random gold positions at the start of every game
             function getGoldPos() 
             {
                xGold3 = Math.floor((Math.random() * 545) + 1);
                yGold3 = Math.floor((Math.random() * 350) + 1);   
             }

             //assigns randomly generated position to image "gold3"          
             function setGoldPos()
             {
                document.getElementById("gold3").style.top= yGold3 + "px";
                document.getElementById("gold3").style.left= xGold3 + "px";
             }

             function position()
             {
                kitty = document.getElementById("sprite");
                kitty.style.left = xPos+"px";
                kitty.style.top = yPos+"px";
                if (xPos === xGold3 && yPos === yGold3)
                {
                    document.getElementById("gold3").style.top= 420 + "px";
                    document.getElementById("gold3").style.left= 0 + "px";
                }
                setTimeout("position()",10);
             }

             function move(event)
             {   
                 var keyPressed = String.fromCharCode(event.keyCode);
                 if ((keyPressed == "W" || keyPressed == "I" || event.keyCode == '38' ) && yPos >= 2)
                 {  
                     yPos -= dy;
                 }
                 else if ((keyPressed == "D" || keyPressed == "L" || event.keyCode == '39') && xPos <=545)
                 {  
                     xPos += dx;
                 }
                 else if ((keyPressed == "S" || keyPressed == "K" || event.keyCode == '40') && yPos <= 350)
                 {  
                     yPos += dy;
                 }
                 else if ((keyPressed == "A" || keyPressed == "J" || event.keyCode == '37') && xPos >= 3 )
                 {  
                     xPos -= dx;
                 }
              }
         </script>

         <div STYLE="text-align:center"> <h2> Use WASD or IJKL or arrow keys to move kitty </h2> </div>

        <div class="box">
            <img src="sprite.jpg" alt="kitty" id="sprite" width="40px" 
                            style="position: absolute; left: 0px; top: 0px;">

         <img id="gold3" src="gold.jpg"  style="position:absolute; 
                            left: 400; top: 100; width: 30px; height: 35px;"/>                  

        </div>
    </body>
</html>

最佳答案

思考这个问题。您正在选择一个随机数,并且您的步长是 20。因此,如果随机数不是 20 的因数,则它们不可能相等。

xGold3: 86  <-- actual value
xPos: 10, 30, 50, 70, 90, 110 <-- Possible values of X

对于可能的值,xPosxGold3 永远不可能与该特定值相等。当您将它硬编码为 if 语句中的值时,400xPos 的可能值,这就是它起作用的原因。

所以要么你需要将金子定位在一个阶梯因子上,要么你需要一个区间。

因此,您要么需要更改随机数生成器以四舍五入到最接近您步长的因子,要么更改您的 if 语句以查看黄金是否在步长范围内。检查应该是这样的:(未经测试)

if (xGold3 >= xPos && xGold3 < xPos+dx && yGold3 >= yPos && yGold3 < yPos+dy) 

关于javascript - 使用全局变量存储数字 (JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29479016/

相关文章:

html - 如何应用替代颜色但仅适用于具有特定数据属性的元素

javascript - 如何在 typescript 中模拟 XMLHTTPRequest 以进行单元测试

html - 百分比宽度和百分比填充

javascript - 是否可以在 Extjs4 中访问跨站点 POST 方法

javascript - 如何使用 javascript 运行 .bat 文件

javascript - 将文本从文本框传递到 jsp 中的 href 调用的按钮

html - Flexbox Div 不包含 Safari 中的所有元素,但在 Chrome 中工作正常

html - 为什么 firefox "responsive design tool"和现实生活中的手机有区别

javascript - Angular 4 测试用例 .then() 不是一个函数

javascript - 从 javascript 添加 <li> 到 <ul> 的问题