HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Frogger HTML5 JavaScript Canvas Game using Object Oriented Design

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
javascriptdesigngamehtml5usingorientedobjectfroggercanvas

Problem

I created a Frogger game using JavaScript and HTML5. The game runs fine, but that might be because the complexity is so low. I'm looking for ways to improve the code.

Some aspects of this game are still buggy, but I'm not concerned about that right now. I want to improve the current functionality first, then worry about the small ideas.

I decided it would be best to make this using the Object Oriented Design Pattern. To add modularity, I wanted to create separate JavaScript files for each aspect of the game.

Main.js

var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');

var currentY = canvas.height - 25;

function createTimer() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, currentY, canvas.width, 25);
    ctx.fillStyle = 'yellow';
    ctx.fillText('Time: ' + currentGame.time, 20, currentY + 20);
    currentY -= 25;
}

// Determine whether Frogger has arrived safely at the pond.

function atHome(x) {
    return (x >= 50 && x = 130 && x = 210 && x = 290 && x = 370 && x = 0 && x  70 && x  150 && x  230 && x  310 || x  currentHigh) {
        froggerData.highScore = currentGame.score;
        localStorage['frogger-data'] = JSON.stringify(froggerData);
        ctx.fillStyle = 'gold';
        ctx.fillText('New High Score: ' + currentGame.score, 20, 150);
    }
}

gameLoop();

window.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 37: 
            frogger.moveLeft();
            break;
        case 38:
            frogger.moveUp();
            break;
        case 39:
            frogger.moveRight();
            break;
        case 40:
            frogger.moveDown();
            break;
    }
});


Keep in mind that this calls some methods and objects from other JavaScript files. But in my HTML file I listed them first.

I also created a Frogger object that stores our hero.

Frogger.js

```
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');

function Frog

Solution

There are many little errors. For example in main.js:

Five warnings
31  Missing semicolon.
63  Missing semicolon.
69  Use '===' to compare with '0'.
76  Use '===' to compare with '0'.
87  Missing semicolon.


Use a linter like JSHint to spot those on your own.
I would also recommend to write a

const settings = {
    //example entries
    frogger = {
        speed = 10,
        life = 100,
        eyes = 1000
    },
    logs = {
        speed = 4,
        color = "#123321"
    }
}


This way, you have all settings in one place, you are safe you dont change them accidentally and, most important of all: you can read your code more easily.
In scene.js, line 10, there is a "random" number, 25. Can you say where it comes from? What it stands for? If you had a variable here that refers to a setting, you could tell more easily.

Code Snippets

Five warnings
31  Missing semicolon.
63  Missing semicolon.
69  Use '===' to compare with '0'.
76  Use '===' to compare with '0'.
87  Missing semicolon.
const settings = {
    //example entries
    frogger = {
        speed = 10,
        life = 100,
        eyes = 1000
    },
    logs = {
        speed = 4,
        color = "#123321"
    }
}

Context

StackExchange Code Review Q#160801, answer score: 2

Revisions (0)

No revisions yet.