Как добиться плавного движения в javascript-игре?

Я хочу создать игру RPG на основе плитки с javascript, и первая проблема - движение. Я хотел бы иметь плавное движение, но прямо сейчас у него есть некоторая задержка, когда вы нажимаете один ключ, а затем другой сразу после этого. Heres мой код движения:Как добиться плавного движения в 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>

источник

2015-05-28 Robert Hoovel

Если вы хотите написать хорошую игру в JavaScript, сначала остановите использование обработчиков inline-событий. Затем продолжайте читать о дросселировании и debouncing, чтобы сделать движения мыши более плавными. – marekful

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

источник

2015-05-28 18:02:14 user2908232

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

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

источник

2015-05-28 18:12:15 Katana314

Как добиться плавного движения в javascript-игре?

ответ

Смежные вопросы