Я следовал инструкциям по созданию простой игры на Javascript, но по какой-то причине, когда я запускаю файл index.html в chrome, сама игра не рендерится, и я не могу понять, почему.
До сих пор я пытался разделить скрипт в отдельный файл и пытался с разрисовкой элемента скрипта в html-файле.
Пожалуйста, смотрите код ниже:
<!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.width - 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 (monsterReady) {
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 = now;
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();
main();</script>
</body>
</html>