Question

我是JS的新手，所以如果有一些简单的答案，我会提前道歉！我已经经历了线程和谷歌一个小时所以，我没有找到任何东西:(

我正在尝试做一种超级马里奥风格的游戏，我左右移动一个角色。我已尝试逐步进行此操作（创建一个基于箭头键移动的方块）。方格很容易，因为你可以得到它的x和y位置。但是，我已经切换到使用图像了，我不知道如何让它向左或向右移动。

这是我的html文件：

<body>
    <div id = "char">
         <canvas id="myCanvas" width="400" height="400"></canvas>
         <script src="testing.js"></script>
    </div>
</body>

这就是我在JS中想做的事情：

var img = new Image(),
    pic = document.getElementById("char"),
    switchVar=true;
pic.appendChild(img);
img.src = "2.png";
function move(e) {
    "use strict";
    var x = e.which || e.keycode; //gets the keycode that the user types

    switch(x) {
        case 39:
            //What do I do here??
            //the following doesn't work:
            //pic.style.left = parseInt(pic.style.left) + 100 + 'px';
            break;
    }
}
document.onkeydown = move;

我没有在switch中包含所有的情况，但我的代码会有左，下和上的情况。另外，我在JS中附加图像的原因是因为我试图在从左到右运行时切换图像（从一个人的img切换到他们的左腿延伸到一个人的img））

Answer 1

您的图片必须

position: absolute;

因为左，上，右和下只适用于绝对位置。

pic.appendChild(img);
img.src = "2.png";
img.style.position = 'absolute';

如果你想要与div #char相关的图像移动，div必须具有相对位置。

#char{position:relative;}

使用带有jS的div内的箭头键移动图像

1 个答案: