求助：跟着教程制作的JS网页游戏在Chrome中无法渲染

我仔细检查了你的代码，发现了几个直接导致游戏无法渲染运行的关键问题，一起来看看怎么修正：

1. 变量名拼写错误 #

在你的render函数里，判断哥布林是否加载完成的变量写成了monsterReady，但你之前定义的变量明明是goblinReady——这会导致哥布林永远不会被渲染，甚至可能因为未定义变量引发报错中断流程。

错误代码片段：

if (monsterReady) {
  context.drawImage(goblinImage, goblin.x, goblin.y);
}

修正后：

if (goblinReady) {
  context.drawImage(goblinImage, goblin.x, goblin.y);
}

2. 游戏循环函数调用不匹配 #

你定义的游戏主循环函数是game()，但最后启动游戏时却调用了不存在的main()函数，这直接导致整个游戏循环根本没启动，自然看不到任何渲染效果。

错误代码片段：

// Start the game!
let then = Date.now();
reset();
main();

修正后：

// Start the game!
let then = Date.now();
reset();
game();

3. 未定义的时间变量 #

在game函数里，你写了then = now;，但这里的now从来没被声明过，应该用你之前获取的dateNow变量，否则会抛出ReferenceError中断循环。

错误代码片段：

let game = function() {
  let dateNow = Date.now();
  let delta = dateNow - then;
  update(delta/1000);
  render();
  then = now; // 这里的now未定义
  requestAnimationFrame(game);
};

修正后：

let game = function() {
  let dateNow = Date.now();
  let delta = dateNow - then;
  update(delta/1000);
  render();
  then = dateNow; // 替换为已声明的dateNow
  requestAnimationFrame(game);
};

额外小问题：哥布林坐标计算错误 #

在reset函数里，你计算哥布林Y坐标时用了canvas.width，应该改成canvas.height，不然哥布林可能会超出画布的垂直范围：

// 原错误代码
goblin.y = 32 + (Math.random() * (canvas.width - 64));
// 修正后
goblin.y = 32 + (Math.random() * (canvas.height - 64));

修正后的完整代码 #

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>JS Goblin Catcher</title>
</head>
<body>
<script>
// Create the canvas
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "background.png";
// Hero Image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "hero.png";
// Goblin image
var goblinReady = false;
var goblinImage = new Image();
goblinImage.onload = function () {
goblinReady = true;
};
goblinImage.src = "monster.png";
// Game Objects
var hero = {
speed: 256, // pixels per second
x: 0,
y: 0
};
var goblin = {
x: 0,
y: 0
};
var goblinsCaught = 0;
// Keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
// Resets the game when a Goblin is caught
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Randomly places the Goblin
goblin.x = 32 + (Math.random() * (canvas.width - 64));
goblin.y = 32 + (Math.random() * (canvas.height - 64));
};
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
// Are they touching?
if (
hero.x <= (goblin.x + 32) &&
goblin.x <= (hero.x + 32) &&
hero.y <= (goblin.y + 32) &&
goblin.y <= (hero.y + 32)
) {
++goblinsCaught;
reset();
}
};
// Render objects
// Draw everything
let render = function () {
if (bgReady) {
context.drawImage(bgImage, 0, 0);
}
if (heroReady) {
context.drawImage(heroImage, hero.x, hero.y);
}
if (goblinReady) {
context.drawImage(goblinImage, goblin.x, goblin.y);
}
// Score
context.fillStyle = "rgb(250, 250, 250)";
context.font = "24px Helvetica";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText("Goblins caught: " + goblinsCaught, 32, 32);
};
// Game loop
let game = function() {
let dateNow = Date.now();
let delta = dateNow - then;
update(delta/1000);
render();
then = dateNow;
requestAnimationFrame(game);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Start the game!
let then = Date.now();
reset();
game();
</script>
</body>
</html>

最后给你个调试小技巧：遇到前端问题时，按F12打开Chrome的开发者工具，切换到**控制台（Console）**标签，里面会显示所有报错信息，这些信息是定位问题的关键，下次可以先看看这里有没有红色的错误提示~

内容的提问来源于stack exchange，提问作者Pegasus18