精灵在按键时不移动答案

【问题标题】：Sprite not moving on key press精灵在按键时不移动
【发布时间】：2021-06-15 21:53:00
【问题描述】：

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

【问题讨论】：

删除pl.onload = function() {
另外，你需要一个 y 位置的变量并更改变量
好的，我试试看好不好用！

标签： javascript html canvas html5-canvas game-physics

【解决方案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);

【讨论】：