Как получить плавное движение в игре на JavaScript?

Я хочу создать ролевую игру на основе тайлов с использованием javascript, и первая проблема - это движение. Я хотел бы иметь плавное движение, но сейчас у него есть некоторая задержка при нажатии одной клавиши, а затем другой сразу после этого. Вот мой код движения:

            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>

Источник

2 ответа

Самым прямым вопросом здесь являются функции скорости изменения. Когда вы нажимаете правую сторону на D-pad в Super Mario, обработчик для нажатия этой кнопки не перемещает Mario вправо; он даже не устанавливает скорость Марио на "1x, 0y". Он просто устанавливает величину ускорения, с которой Марио начинает увеличивать свою скорость на каждом кадре игрового цикла.

В RPG вам не нужно беспокоиться об ускорении, как в случае с Mario (поскольку персонажи RPG имеют тенденцию двигаться с постоянной скоростью, а не ускоряться), но важно, по крайней мере, только непосредственное влияние на скорость (а не на положение). Вы можете найти множество таких руководств для базовых платформерных игр, и без каких-либо сложностей с гравитацией или постоянным вводом его будет относительно легко адаптировать к RPG. По крайней мере, вам может понадобиться requestAnimationFrame Функция JavaScript для выполнения определенных действий в каждую миллисекунду игры. (Используйте это ответственно! Обновление чего-либо со слишком большим количеством непосредственности приведет к тому, что спрайты будут летать повсюду, и вы не будете знать, куда это делось)

Источник

Проще говоря, вам нужно прекратить использовать HTML для своих объектов и переключиться на использование <canvas> тег. Хотя ваш текущий код можно исправить так, чтобы он работал относительно плавно с использованием CSS tranformЭто не решит ваши проблемы в долгосрочной перспективе, поэтому, чтобы ответить на вопрос в заголовке: Используйте хотя бы <canvas> (или же <svg> в некоторых редких случаях) и взгляните на библиотеки, созданные для игр ( game.js, crafty.js, panda.js и многие другие).

Источник
Другие вопросы по тегам