Question

语句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>

Answer 1

想想这个问题。你正在选择一个随机数，你的步数是20.因此，如果随机数不是20的因子，它们就不可能相等。

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

使用可能的值，xPos和xGold3无法与此特定值相等。当您将其硬编码为if语句中的值时，400是xPos的可能值，因此它的工作原理。

因此，您需要将黄金定位在步骤的因子上，或者您需要是一个范围。

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

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

Answer 2

位置永远不会与当前代码相等，请尝试这样的方法来查看cat的x和y是否都在20pxs之内：

if (Math.abs(xPos - xGold3) <= 20 && Math.abs(yPos - yGold3) <= 20)

Answer 3

当我进入它时，变量类型不是问题。

这适用于以下！工作JSFiddle https://jsfiddle.net/t7k0a395/

如果你减去随机数的模数使其可被20整除，那么它将等于20的步长变量。当它到达黄金时，现在黄金移出了盒子。

xGold3 = Math.floor((Math.random()* 545) + 1);
yGold3 = Math.floor((Math.random()* 350) + 1);
xGold3 = xGold3-(xGold3 % 20);
yGold3 = yGold3-(yGold3 % 20);

RGecy

修订：也许更好的方法是采用xGold3和dx的mod并对y值执行相同的操作。这样，如果您更改了dx或dy，则无需更改mod值。

xGold3 = Math.floor((Math.random()* 545) + 1);
yGold3 = Math.floor((Math.random()* 350) + 1);
xGold3 = xGold3-(xGold3 % dx);
yGold3 = yGold3-(yGold3 % dy);

使用全局变量存储数字（JavaScript）

3 个答案: