通过JavaScript使用Canvas，如何使对象通过箭头键移动？

Question

I'm just starting out with a game that I'm trying to do for a fun little project. I'm still new to canvas and was just wondering how I would be able to make this red square move via arrow keys? I understand the keyup event but wasn't exactly sure how to incorporate it with canvas. Thanks in advance

<canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"></canvas>

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.translate(120,120);
ctx.lineTo(0,0);
ctx.lineTo(160,0);
ctx.lineTo(160,160);
ctx.lineTo(0,160);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();

document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode == 37) {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.translate(0,0);
}

Answer 1

• First: you have to rerender the canvas every time something changed (at least the part that changed).

• Second although keydown re-fires while you keep the button pressed, you'd want a more consistent update cycle; like requestAnimationFrame or setInterval . And then later you can also account for the little inconsistencies in these intervals by taking the time since the last function call/update into account.

• Then you'd want to introduce a keyState that stores the current state of multiple buttons, so that you can check that outside of the actual keydown/keyup event.

   const isKeyDown = {}; document.onkeydown = document.onkeyup = function(e){ isKeyDown[e.which] = isKeyDown[e.key] = e.type === "keydown"; }; 

• and as a second step, you could introduce velocity to the object with friction or gravity. So your button presses don't determine the actual movement, but "act a force" onto the current movement of your object.

Answer 2

I've putted the shape you draw in a function so that I can call it again after you clear the canvas on key down. Also since you are translating the context you need to clear from (-120, -120). I hope it helps.

 let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); ctx.translate(120,120); myShape() document.addEventListener('keydown', function(event) { console.log(event.keyCode); if (event.keyCode == 37) { ctx.clearRect(-120, -120, canvas.width + 120, canvas.height + 120); ctx.translate(-120,-120); myShape() }}); function myShape(){ ctx.beginPath(); ctx.lineTo(0,0); ctx.lineTo(160,0); ctx.lineTo(160,160); ctx.lineTo(0,160); ctx.lineTo(0,0); ctx.fillStyle = "red"; ctx.fill(); ctx.stroke();} 

 <canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"></canvas>