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>

  • このスニペットを実行してキーボードの矢印の 1 つをクリックすると、四角形が反対方向に移動することがわかります。これは、画面がゲームのカメラのようにしたかったからです。それはわざとやっている

  • しかし、矢印の反対側 (上 = 下、左 = 右など) をクリックした後、逆方向に移動するには 2 回クリックする必要があることがわかります。これを他の矢でも試してみてください。

  • 同じ矢印を何度も押すと、移動するギャップがどんどん大きくなりますが、論理的には同じでなければなりません。

2回のクリックではなく、直接応答し、ギャップが常に同じであることを望みます。なぜこれが起こっているのか、あなたの答えで説明してください。事前にありがとう！

4

0 に答える 0