我有一个应该具有重力的 JavaScript 代码，但是当我尝试输入按键时，它完全停止工作。
我尝试将其从 if 语句更改为 switch 函数，但是，它仍然不起作用，并且它们没有任何错误。
这是我的代码：
const stage = document.getElementById("stage"); //Gets the canvas
const ctx = stage.getContext("2d"); //Context
const PX = 16;
const S = 25;
stage.width = (PX * S);
stage.height = (PX * S);
const playerimg = new Image(); //Player Image
const floorimg = new Image(); //Floor Image
var playerx = 0; //Player X
var playery = 0; //PLayer Y
var floorx = 0; //Floor X
var floory = (stage.height-16); //Floor Y
const imageLoader = new Set([playerimg, floorimg]);
imageLoader.forEach(img => {
img.addEventListener("load", () => {
imageLoader.delete(img);
if (imageLoader.size === 0) main();
});
});
function main() {
const LEFT = 37, UP = 38, RIGHT = 39;
window.addEventListener("keydown", e => {
if (e.isComposing) return;
e.preventDefault();
let dx = 0, dy = 0;
if (e.keycode == LEFT) {
dx = -PX;
} else if (e.keycode == UP) {
if (playery != (floory-16)) {
dy = PX;
} else {
dy = -PX;
}
} else if (e.keycode == RIGHT) {
dx = PX;
}
playerx += dx;
playery += dy;
draw();
});
draw();
setTimeout(main, 50);
}
function draw() {
// Clear everything
ctx.clearRect(0, 0, stage.width, stage.height);
// Draw a quick grid for debugging
for (let c = 0; c < S; c += 1) {
for (let r = 0; r < S; r += 1) {
ctx.fillStyle = (c + (r % 2)) % 2 ? "#efefef" : "white"
ctx.fillRect(c * PX, r * PX, PX, PX);
}
}
// Draw player
ctx.drawImage(playerimg, playerx, playery);
floorx = 0;
for (let c = 0; c < S; c += 1) {
ctx.drawImage(floorimg, floorx, floory);
floorx += 16;
}
}
floorimg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAB5JREFUOE9j/M/A8J+BAsA4agDDaBgwjIYBw7AIAwCl1B/xy1zUvwAAAABJRU5ErkJggg=="
playerimg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAB5JREFUOE9jZPjP8J+BAsA4agDDaBgwjIYBw7AIAwCV5B/xAsMbygAAAABJRU5ErkJggg==";
HTML：
<html>
<head>
<title>BlockWork - Page 1</title>
</head>
<body>
<h1>BlockWork Page</h1>
<div class="stage">
<canvas id="stage" width="400" height="400" style="border:1px solid #000000;"></canvas>
</div>
<a href="index.html">Previous</a>
</body>
<script type="text/javascript" src="../SCRIPT/scriptp1.js"></script>
</html>
有人有什么想法吗？非常需要，谢谢，我对 javascript 不太有经验。
e.keyCodee.keycodeconst stage = document.getElementById("stage"); //Gets the canvas
const ctx = stage.getContext("2d"); //Context
const PX = 16;
const S = 25;
stage.width = (PX * S);
stage.height = (PX * S);
const playerimg = new Image(); //Player Image
const floorimg = new Image(); //Floor Image
var playerx = 0; //Player X
var playery = 0; //PLayer Y
var floorx = 0; //Floor X
var floory = (stage.height-16); //Floor Y
const imageLoader = new Set([playerimg, floorimg]);
imageLoader.forEach(img => {
img.addEventListener("load", () => {
imageLoader.delete(img);
if (imageLoader.size === 0) main();
});
});
function main() {
const LEFT = 37, UP = 38, RIGHT = 39;
window.addEventListener("keydown", e => {
if (e.isComposing) return;
e.preventDefault();
let dx = 0, dy = 0;
// Changed e.keycode to e.keyCode
if (e.keyCode == LEFT) {
dx = -PX;
} else if (e.keyCode == UP) {
if (playery != (floory-16)) {
dy = PX;
} else {
dy = -PX;
}
} else if (e.keyCode == RIGHT) {
dx = PX;
}
playerx += dx;
playery += dy;
draw();
});
draw();
setTimeout(main, 50);
}
function draw() {
// Clear everything
ctx.clearRect(0, 0, stage.width, stage.height);
// Draw a quick grid for debugging
for (let c = 0; c < S; c += 1) {
for (let r = 0; r < S; r += 1) {
ctx.fillStyle = (c + (r % 2)) % 2 ? "#efefef" : "white"
ctx.fillRect(c * PX, r * PX, PX, PX);
}
}
// Draw player
ctx.drawImage(playerimg, playerx, playery);
floorx = 0;
for (let c = 0; c < S; c += 1) {
ctx.drawImage(floorimg, floorx, floory);
floorx += 16;
}
}
floorimg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAB5JREFUOE9j/M/A8J+BAsA4agDDaBgwjIYBw7AIAwCl1B/xy1zUvwAAAABJRU5ErkJggg=="
playerimg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAB5JREFUOE9jZPjP8J+BAsA4agDDaBgwjIYBw7AIAwCV5B/xAsMbygAAAABJRU5ErkJggg==";