移动精灵答案

【问题标题】：Moving a sprite移动精灵
【发布时间】：2015-05-20 13:15:13
【问题描述】：

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

我的代码：

<!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>

【问题讨论】：

标签： javascript html

【解决方案1】：

永远不会调用position 函数。您缺少代码中的括号：

onLoad="position()"

【讨论】：

你知道如何修改我的代码以便箭头键也可以移动精灵吗？谢谢
@Chalupa：为此使用onkeydown 事件。见：stackoverflow.com/questions/5597060/…

【解决方案2】：

不要做onkeydown="move(event)" 做document.addEventListener("keydown", move)。它更干净。

你的 position 循环永远不会被调用。我建议像 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>

Fiddle

您也可以考虑将window.requestAnimationFrame() 用于动画循环。

【讨论】：

我应该在哪里做这个？
将此JS添加到</body>上方的脚本标签中

【解决方案3】：

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

您将keyPressed 与大写字母进行比较，同时keyPressed 是小写字母。所以要么将字符串转换为大写，或修正您的比较
我没有看到更新精灵坐标的实际位置。虽然你确实设置了yPos 和xPos，但实际上你从来没有将它分配给精灵 - 因此它永远不会移动。你只分配它onload 而你应该只调用position() move()函数末尾的函数

【讨论】：