patternjavascriptMinor
Frogger HTML5 JavaScript Canvas Game using Object Oriented Design
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
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
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:
Use a linter like JSHint to spot those on your own.
I would also recommend to write a
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
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.