0

这是我的代码：

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>

  • 如果您运行此代码段并单击键盘上的箭头之一，您会看到矩形向相反方向移动，因为我想让屏幕像游戏中的相机一样。这是故意的

  • 但是，如果单击箭头的对面（上 = 下、左 = 右等）后，您会看到必须单击两次才能使其朝另一个方向移动。用其他箭头试试这个，还是一样。

  • 如果你多次按下同一个箭头，它经过的距离会越来越大，但从逻辑上讲它必须相同。

我希望它直接响应，而不是单击两次，并且差距始终相同。请在您的回答中解释为什么会发生这种情况。提前谢谢！

4

0 回答 0