Question

我刚开始尝试做一个有趣的小项目游戏。我还不熟悉画布，只是想知道如何通过箭头键使这个红色方块移动？我了解keyup事件，但不确定如何将其与画布合并。预先感谢

<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

首先：每次更改（至少更改的部分）时，都必须重新渲染画布。
第二步，虽然在按住按钮的同时会重新按下键盘，但是您希望有一个更一致的更新周期。例如requestAnimationFrame或setInterval。然后，您还可以考虑自上一次函数调用/更新以来的时间，以解决这些时间间隔中的微小不一致。

然后，您要引入一个keyState来存储多个按钮的当前状态，以便您可以在实际的keydown / keyup事件之外进行检查。

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

第二步，可以通过摩擦或重力将速度引入对象。因此，按下按钮并不能确定实际的运动，而是“施加力”到对象的当前运动。

Answer 2

我已经将您绘制的形状放在一个函数中，以便在清除按键上的画布后可以再次调用它。另外，由于您正在翻译上下文，因此需要从（-120，-120）中清除。希望对您有所帮助。

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>

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

2 个答案: