Javascript:用箭头键移动对象

Question

我在做一个简单的俄罗斯方块游戏。到目前为止，我有一个俄罗斯方块，旋转时，空格键被点击。

下一步是使用箭头键向左和向右移动对象。通过查看其他堆叠问题，我发现，通过改变利润率，这是可能的。

        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中重新创建了我的代码。

Answer 1

问题不在于你的Javascript，而在于你的风格。您需要绝对定位您的图像(在本例中为香蕉)，并设置一个初始的“左”值。position: absolute;可以在HTML或CSS中设置，但是left: 0;必须在HTML属性中设置。下面是一个更新的小提琴，其中包含了这些更改。