精灵在按键时不动

Question

我正在尝试使用 JavaScript 从头开始创建一个无尽的跑酷游戏，我目前正在制作角色跳跃的过程。但是，当我按下空格键时，我的角色并没有向上移动，而是停留在一个地方。我在下面粘贴了我的代码：

let ctx = document.querySelector("canvas").getContext("2d");

// Screen size

ctx.canvas.height = 512;
ctx.canvas.width = 512;

// Images

let bg = new Image; // Background
bg.src = "./Background.png";
bg.onload = function() {
  ctx.drawImage(bg, 0, 0);
};

let fl = new Image; // Floor
fl.src = "./Floor.png";
fl.onload = function() {
  ctx.drawImage(fl, 0, 384);
  ctx.drawImage(fl, 128, 384);
  ctx.drawImage(fl, 256, 384);
  ctx.drawImage(fl, 384, 384);
};

let pl = new Image; // Player
pl.src = "./Idle.png";
pl.onload = function() {
  ctx.drawImage(pl, 0, 256);
};

// Movement

let UP = false;

document.onkeydown = function(e) {
  if (e.keyCode == 32) UP = true;
};

document.onkeyup = function(e) {
  if (e.keyCode == 32) UP = false;
};

setInterval(update, 10);

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Erase previous positions

  if (UP) {
    pl.onload = function() {
      ctx.drawImage(pl, 0, 256 += 1); // Move player up
    };
  };
};

Answer 1

我在 Rojo 的帮助下修复了它。

let ctx = document.querySelector("canvas").getContext("2d");

// Screen size
ctx.canvas.height = 512;
ctx.canvas.width = 512;

// Images
let bg = new Image;
bg.src = "./Background.png";

let fl = new Image;
fl.src = "./Floor.png";

let pl = new Image;
pl.src = "./Idle.png";
let y = 256;
pl.onload = function() {
  ctx.drawImage(pl, 0, y);
};

let UP = false;

document.onkeydown = function(e) {
  if (e.keyCode == 32) UP = true;
};

document.onkeyup = function(e) {
  if (e.keyCode == 32) UP = false;
};

function update() {
  ctx.clearRect(0, 0, 512, 512);

  ctx.drawImage(bg, 0, 0);

  ctx.drawImage(fl, 0, 384);
  ctx.drawImage(fl, 128, 384);
  ctx.drawImage(fl, 256, 384);
  ctx.drawImage(fl, 384, 384);

  if (UP) {
    ctx.drawImage(pl, 0, y -= 1);
  } else {
    ctx.drawImage(pl, 0, y);
  };
};

setInterval(update, 10);

精灵在按键时不动

Sprite not moving on key press

html

javascript

canvas

game-physics

html5-canvas