Javascript:使用箭头键移动对象

Question

我正在制作一个简单的俄罗斯方 block 游戏。到目前为止，我有一个俄罗斯方 block block ，它会在单击空格键时旋转。

我的下一步是使用箭头键左右移动对象。从看其他Stack Questions我发现这可以通过更改页边距来实现。

        var angle = 0;
        var obj = document.getElementById('image')

        document.onkeydown = checkKey;

        function checkKey(e) {

            e = e || window.event;

            if (e.keyCode == '32') {
                rotate();
            }
            else if (e.keyCode == '37') {
                moveLeft();
            }
            else if (e.keyCode == '39') {
                moveRight();
            }

        }
        function rotate() {
            angle = angle + 90;
            console.log(angle)
            obj.className = "image" + angle;
            console.log(obj.className)
            if (angle == 360) {
                angle = 0;
            }
        }

        function moveLeft() {
            obj.style.left = parseInt(obj.style.left) - 5 + 'px';
        }

        function moveRight() {
            obj.style.left = parseInt(obj.style.left) + 5 + 'px';
        }

出于某种原因，这对我不起作用。

我还在 JSFiddle 中重新创建了我的代码用香蕉代替俄罗斯方 block 。

Answer 1

问题不在于您的 Javascript，而在于您的样式。您需要绝对定位您的图像(在本例中为香蕉)，并设置一个初始的“左”值。 position: absolute; 可以在 HTML 或 CSS 中设置，但 left: 0; 必须在 HTML style 属性中设置。这是更新的 jsfiddle随着变化。