移动精灵

Question

我只是希望能够使用键W，A，S，D移动精灵“ kitty”。 因此，当我加载页面并按下键时，小猫图片不会移动，而且我无法弄清楚自己在做什么错。 谁能帮助我指出正确的方向？

我的代码：

<!DOCTYPE html>

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

        </style>
    </head>

    <body onLoad ="position" onKeyDown = "move(event)">
         <script>

             var dx = 5;
             var dy = 5;

             var xPos = 0;
             var yPos = 0;

            function position()
             {
                kitty = document.getElementById("sprite");
                kitty.style.left = xPos+"px";
                kitty.style.top = yPos+"px";
                setTimeout("position()",10);
             }

             function move(event)
             {

                 var keyPressed = String.fromCharCode(event.keyCode);

                   if (keyPressed == "W")
                    {   
                        xPos -= dx;
                    }
                   else if (keyPressed == "D")
                    {   
                       xPos += dx;
                    }
                   else if (keyPressed == "S")
                    {   
                        yPos -= dy;
                    }
                   else if (keyPressed == "A")
                    {   
                         yPos += dy;
                    }

              }
         </script>  

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

Answer 1

代替执行onkeydown="move(event)"执行document.addEventListener("keydown", move) 。 比较干净

您的position循环永远不会被调用。 我建议像window.setInterval(position, 10)一样调用它window.setInterval(position, 10)并将setTimeout放到函数中。

这是一个工作示例：

 var dx = 5; var dy = 5; var xPos = 0; var yPos = 0; function position() { kitty = document.getElementById("sprite"); kitty.style.left = xPos + "px"; kitty.style.top = yPos + "px"; setTimeout(position, 10); } function move(event) { var keyPressed = String.fromCharCode(event.keyCode); if (keyPressed == "W") { yPos -= dy; } else if (keyPressed == "D") { xPos += dx; } else if (keyPressed == "S") { yPos += dy; } else if (keyPressed == "A") { xPos -= dx; } } document.addEventListener("keydown", move) position();

 #sprite { position: absolute; }

 <div class="box"> <img src="https://placekitten.com/g/50/50" alt="kitty" id="sprite" width="70px" style="position: absolute; left: 0px; top: 0px;" /> </div>

小提琴

您也可以考虑将window.requestAnimationFrame（）用于animationloop。

Answer 2

从未调用position函数。 您缺少代码中的括号：

onLoad="position()"

Answer 3

您的事件正常触发，但是我目前看到两个问题：

您正在将keyPressed与大写字母进行比较，而keyPressed为小写字母。 因此，要么将字符串转换为大写，要么修正您的比较
我看不到实际的位置，您可以在其中更新精灵坐标。 设置yPos和xPos您实际上从未将其分配给xPos因此它永远不会移动。 您只能在onload分配它，而应该在move()函数末尾调用position() move()函数

移动精灵

问题描述

3 个解决方案

解决方案1
2 2015-03-17 22:05:21

解决方案2
2 已采纳 2015-03-17 22:06:46

解决方案3
0 2015-03-17 22:08:36

移动精灵

问题描述

3 个解决方案

解决方案1 2 2015-03-17 22:05:21

解决方案2 2 已采纳 2015-03-17 22:06:46

解决方案3 0 2015-03-17 22:08:36

解决方案1
2 2015-03-17 22:05:21

解决方案2
2 已采纳 2015-03-17 22:06:46

解决方案3
0 2015-03-17 22:08:36