Действие bizzare putImageData

Вот мой код:

var ctx = document.getElementById("map").getContext("2d");
var ZeroX = 0;
var ZeroY = 0;
ctx.beginPath();
ctx.fillRect(100, 200, 100, 50); //Drawed a black rectangle

 function moveMap(evt) {
   var key = evt.keyCode || evt.which;
   if (key == 38) { //UP
     moveDirect(0, 20, false);
   }
   else if (key == 40) { //DOWN
     moveDirect(0, 20, true);
   }   
   else if (key == 39) { //RIGHT
     moveDirect(20, 0, true);
   }
   else if (key == 37) { //LEFT
     moveDirect(20, 0, false);
   }
 }
 
 function moveDirect(X, Y, minus) { 
   if (minus == false) {
     ZeroX -= X;
     ZeroY -= Y;  
   }
   else {
     ZeroX += X;
  ZeroY = Y; 
   }   
   var lol = ctx.getImageData(ZeroX, ZeroY, 3000, 3000);    
   ctx.clearRect(ZeroX, ZeroY, 3000, 3000);
   ctx.putImageData(lol, 0, 0);
 }
  <body onkeypress="moveMap(event)">
<canvas id="map" width="500" height="500">Map </canvas>
  </body>

  • Если вы запустите этот фрагмент и нажмете одну из стрелок на клавиатуре, вы увидите, что прямоугольник движется в противоположном направлении, потому что я хотел сделать экран похожим на камеру в игре. Это сделано специально

  • Но если после того, как вы нажмете на противоположную стрелку (вверх = вниз, влево = вправо и т. Д.), Вы увидите, что вы должны щелкнуть два раза, чтобы заставить ее двигаться в другом направлении. Попробуйте это с другими стрелками, все так же.

  • И если вы нажимаете одну и ту же стрелку много раз, пройденный промежуток становится все больше и больше, но логически это должно быть одинаково.

Я хочу, чтобы он отвечал напрямую, а не на два клика и чтобы разрыв всегда был одинаковым. Пожалуйста, объясните в своем ответе, почему это происходит. Так заранее!

Источник

0 ответов

Другие вопросы по тегам