How to get smooth movement in a javascript game?

Question

I want to create a tile based RPG game with javascript and the first problem is movement. I'd like to have smooth movement but right now it has somekind of a delay when pressing one key and then the other one right after that. Heres my code of the movement:

            function positionSettings() {
            document.getElementById("gameWindow").scrollLeft = mapLeft;
            document.getElementById("gameWindow").scrollTop = mapTop;
            document.getElementById("protagonist").style.left ="507px";
            document.getElementById("protagonist").style.top ="347px";
        }
        function moveMap(keystroke){
            switch(keystroke.keyCode){
                case 37:
                    mapLeft = mapLeft - 8;
                    positionSettings();
                    break
                case 38:
                    mapTop = mapTop - 8;
                    positionSettings();
                    break
                case 39:
                    mapLeft = mapLeft + 8;
                    positionSettings();
                    break
                case 40:
                    mapTop = mapTop + 8;
                    positionSettings();
                    break
            }

        }
            function loadMap(){
            for(updown=0;updown<50;updown++){
                for(leftright=0;leftright<50;leftright++){
                    //alert(tileProperties[leftright][updown]);
                    var tile = document.createElement("div");
                    tile.setAttribute("class","mapTile");
                    if(tileProperties[leftright][updown]){
                        tile.setAttribute("style","background-color:#00FF00;left:"+ leftright * 32 +"px; top:"+ updown * 32+"px;");
                    }
                    else{
                        tile.setAttribute("style","background-color:#FFFF00;left:"+ leftright * 32 +"px; top:"+ updown * 32+"px;");
                    }
                    var tileNum = document.createTextNode(leftright +":"+ updown);
                    tile.appendChild(tileNum);
                    document.getElementById("worldMap").appendChild(tile);
                                                    }
            }
        positionSettings();
        }
    </script>
</head>

<body onload="loadMap()" onkeydown="moveMap(event)">

    <div id="gameWindow">

        <div id="worldMap">
        </div>

    </div>
        <div id="protagonist">
        </div>

</body>

If you want to write good JavaScript game, first stop using inline event handlers. Then go on reading about throttling and debouncing to make mouse movements smoother. — marekful, May 28 '15 at 17:34

score 0 · Answer 1 · answered May 28 '15 at 18:02

Simply put, you will need to stop using HTML for your objects, and switch to using a <canvas> tag. Although it is possible to fix your current code so that it will run relatively fluidly using CSS tranformations, it will not fix your problems long term, so to answer the question in your title: Use at least <canvas> (or <svg> in certain rare cases) and take a look at libraries made for games (game.js, crafty.js, panda.js and many more).

score 0 · Answer 2 · answered May 28 '15 at 18:12

The most direct issue here is rate-of-change functions. When you press the right side on the D-pad in Super Mario, the handler for that button press does not move Mario right; it doesn't even set Mario's speed to "1x, 0y". It merely sets an acceleration amount for Mario to start incrementing his speed on each frame of the game loop.

In an RPG, you don't have to concern yourself with acceleration like with Mario (since RPG characters tend to move at a constant rate rather than speeding up), but at least only directly affecting velocity (rather than position) is important. You can find lots of such guides for basic platforming games, and without complications of gravity or constant input, it should be relatively easy to adapt to an RPG. At the very least, you may need use of the requestAnimationFrame JavaScript function to perform certain actions on every millisecond of the game. (Use that responsibly! Updating anything with too much immediacy will cause sprites to fly all around and you'll have no idea where it went)

How to get smooth movement in a javascript game?

2 Answers2