问题描述
我正在尝试使用 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);