JS Game not rendering in webpage

I’ve been following along with a tutorial to make a simple Javascript game but for some reason when I run the index.html file in chrome the game itself doesn’t render and I can’t figure out why.

So far, I’ve tried separating the script into a separate file and tried with the script element rending in the html file.

Please see code below:

<!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>

Leave a Reply

Your email address will not be published. Required fields are marked *