精灵在按键时不移动

如何解决精灵在按键时不移动

我正在尝试使用 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);
};

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

let pl = new Image; // Player
pl.src = "./Idle.png";
pl.onload = function() {
  ctx.drawImage(pl,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,canvas.width,canvas.height); // Erase prevIoUs positions

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

解决方法

我在 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,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,512,512);

  ctx.drawImage(bg,0);

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

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

setInterval(update,10);