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

Snake game with canvas element code

Submitted by: @import:stackexchange-codereview··
0
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

Solution

Some thoughts on your general code style (some points might depend on personal preference):

  • 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.