CODEWITHSUNDEEP
javascripthtmlcss
JoshK
JoshK

Reputation: 425

Javascript: Moving an Object with Arrow Keys

Im making a simple Tetris game. So far I have a Tetris piece that rotates when the space bar is clicked.

The next step for me is to move the objects left and right using the arrow keys. From looking at other Stack Questions I found that this was possible by changing the margins.

        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';
        }

For some reason this isn't working for me.

I've also re-created my code in a JSFiddle using a banana instead of a Tetris piece.

Upvotes: 1

Views: 1889

Answers (1)

Pred
Pred

Reputation: 686

The problem is not with your Javascript, but with your styles. You need to absolutely position your image (banana in this case), and set an initial "left" value. The position: absolute; can be set either in the HTML or CSS, but the left: 0; must be set in the HTML style attribute. Here is an updated jsfiddle with the changes.

Upvotes: 2

Related Questions