patternjavascriptModerate
Snake game with canvas element code
Viewed 0 times
withsnakegameelementcodecanvas
Problem
I created a classic snake game in the canvas element. I have not considered best practices when doing this, I just wanted to finish it first. Now it's time to improve the coding practice. You can help me out by mentioning bad practices, giving code improvements and suggesting anything else.
```
Feed the Snake v 1.1 beta
body
{
background:#000;
color:#FFF;
}
canvas
{
background:#FFF;
}
#controls
{
position:absolute;
top:0;
right:0;
margin:10px;
}
var snake = window.snake || {};
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
window.onload = function(){
document.addEventListener("fullscreenchange", function(){snake.game.adjust();});
document.addEventListener("webkitfullscreenchange", function(){snake.game.adjust();});
document.addEventListener("mozfullscreenchange", function(){snake.game.adjust();});
document.addEventListener("MSFullscreenChange", function(){snake.game.adjust();});
snake.game = (function()
{
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var status=false;
var score = 0;
var old_direction = 'right';
var direction = 'right';
var block = 10;
var score = 0;
var refresh_rate = 250;
var pos = [[5,1],[4,1],[3,1],[2,1],[1,1]];
var scoreboard = document.getElementById('scoreboard');
var control = document.getElementById('controls');
var keys = {
37 : 'left',
38 : 'up',
39 : 'right',
40 : 'down'
};
function adjust()
{
if (document.fullscreenElement || document.webkitFullscreenEle
```
Feed the Snake v 1.1 beta
body
{
background:#000;
color:#FFF;
}
canvas
{
background:#FFF;
}
#controls
{
position:absolute;
top:0;
right:0;
margin:10px;
}
var snake = window.snake || {};
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
window.onload = function(){
document.addEventListener("fullscreenchange", function(){snake.game.adjust();});
document.addEventListener("webkitfullscreenchange", function(){snake.game.adjust();});
document.addEventListener("mozfullscreenchange", function(){snake.game.adjust();});
document.addEventListener("MSFullscreenChange", function(){snake.game.adjust();});
snake.game = (function()
{
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var status=false;
var score = 0;
var old_direction = 'right';
var direction = 'right';
var block = 10;
var score = 0;
var refresh_rate = 250;
var pos = [[5,1],[4,1],[3,1],[2,1],[1,1]];
var scoreboard = document.getElementById('scoreboard');
var control = document.getElementById('controls');
var keys = {
37 : 'left',
38 : 'up',
39 : 'right',
40 : 'down'
};
function adjust()
{
if (document.fullscreenElement || document.webkitFullscreenEle
Solution
Some thoughts on your general code style (some points might depend on personal preference):
-
Your use of indention and whitespaces is inconsistent
has an indention of two spaces
has an indention of four spaces
has an indention of eight spaces
-
You have two times:
-
Method names are inconsistent
-
Consider writing constants in uppercase to differentiate them from variables you intend to modify:
-
You declare and assign your
-
There are several magic numbers, that you could/should turn into variables
-
Some parameter names are rather cryptic:
-
You could use objects instead of arrays for some variables. E.g.:
-
Currently your update logic seems to be mixed with your draw logic. It is probably better (and easier to maintain), if you seperate these. Also, you check for game over inside your draw call...
- I suggest splitting HTML/CSS/JS into different files
-
Your use of indention and whitespaces is inconsistent
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();has an indention of two spaces
snake.game = (function()
{
var canvas = document.getElementById('canvas');has an indention of four spaces
if(x >= canvas.width || x = canvas.height || y<= 0)
{
document.getElementById('pause').disabled='true';
snake.game.status=false;has an indention of eight spaces
var status=false; // no spaces before/after '='
var block = 10; // space before/after '='-
You have two times:
var score = 0;-
Method names are inconsistent
is_catched, setWay, todraw.-
Consider writing constants in uppercase to differentiate them from variables you intend to modify:
BLOCK instead of block or in this case something like BLOCK_SIZE is more appriopriate-
You declare and assign your
food variable the first time somewhere between all the functions, although you have a creatfood method-
There are several magic numbers, that you could/should turn into variables
-
Some parameter names are rather cryptic:
is_catched(ax,ay,awidth,aheight,bx,by,bwidth,bheight)-
You could use objects instead of arrays for some variables. E.g.:
food is an array with 2 elements (probably x/y pos). You could turn this into an object { x: XXX, y: XXX }. That might improve readability in some places. -
Currently your update logic seems to be mixed with your draw logic. It is probably better (and easier to maintain), if you seperate these. Also, you check for game over inside your draw call...
Code Snippets
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();snake.game = (function()
{
var canvas = document.getElementById('canvas');if(x >= canvas.width || x <= 0 || y >= canvas.height || y<= 0)
{
document.getElementById('pause').disabled='true';
snake.game.status=false;var status=false; // no spaces before/after '='
var block = 10; // space before/after '='var score = 0;Context
StackExchange Code Review Q#55323, answer score: 13
Revisions (0)
No revisions yet.