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.<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8><title>Feed the Snake v 1.1 beta</title><style>body{    background:#000;    color:#FFF;}canvas{    background:#FFF;}#controls{    position:absolute;    top:0;    right:0;    margin:10px;}</style><script type=text/javascript>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.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement )            {                canvas.width=window.innerWidth;                canvas.height=window.innerHeight;                control.style.display='none';            }            else            {                canvas.width=850;                canvas.height=600;                control.style.display='inline';            }        }        var food = [Math.round(Math.random(4)*(canvas.width - 10)), Math.round(Math.random(4)*(canvas.height - 10)),];        function todraw()        {            for(var i = 0; i < pos.length; i++)            {                draw(pos[i]);            }        }        function giveLife()        {            var nextPosition = pos[0].slice();            switch(old_direction)            {                case 'right':                    nextPosition[0] += 1;                    break;                case 'left':                    nextPosition[0] -= 1;                    break;                case 'up':                    nextPosition[1] -= 1;                    break;                case 'down':                    nextPosition[1] += 1;                    break;                }            pos.unshift(nextPosition);            pos.pop();        }        function grow()        {            var nextPosition = pos[0].slice();            switch(old_direction)            {                case 'right':                    nextPosition[0] += 1;                    break;                case 'left':                    nextPosition[0] -= 1;                    break;                case 'up':                    nextPosition[1] -= 1;                    break;                case 'down':                    nextPosition[1] += 1;                    break;                }            pos.unshift(nextPosition);        }        function loop()        {            ctx.clearRect(0,0,canvas.width,canvas.height);            todraw();            giveLife();            feed();            if(is_catched(pos[0][0]*block,pos[0][1]*block,block,block,food[0],food[1],10,10))            {                score += 10;                createfood();                scoreboard.innerHTML = score;                grow();                if(refresh_rate > 100)                {                    refresh_rate -=5;                }            }            snake.game.status = setTimeout(function() { loop(); },refresh_rate);        }        window.onkeydown = function(event){             direction = keys[event.keyCode];                if(direction)                {                    setWay(direction);                    event.preventDefault();                }            };        function setWay(direction)        {            switch(direction)            {                case 'left':                    if(old_direction!='right')                    {                        old_direction = direction;                    }                    break;                case 'right':                    if(old_direction!='left')                    {                        old_direction = direction;                    }                    break;                case 'up':                    if(old_direction!='down')                    {                        old_direction = direction;                    }                    break;                case 'down':                    if(old_direction!='up')                    {                        old_direction = direction;                    }                    break;            }        }        function feed()        {            ctx.beginPath();            ctx.fillStyle = #ff0000;            ctx.fillRect(food[0],food[1],10,10);            ctx.fill();            ctx.closePath();        }        function createfood()        {            food = [Math.round(Math.random(4)*850), Math.round(Math.random(4)*600)];        }        function is_catched(ax,ay,awidth,aheight,bx,by,bwidth,bheight) {            return !(            ((ay + aheight) < (by)) ||            (ay > (by + bheight)) ||            ((ax + awidth) < bx) ||            (ax > (bx + bwidth))            );        }        function draw(pos)        {            var x = pos[0] * block;            var y = pos[1] * block;            if(x >= canvas.width || x <= 0 || y >= canvas.height || y<= 0)            {                    document.getElementById('pause').disabled='true';                    snake.game.status=false;                    ctx.clearRect(0,0,canvas.width,canvas.height);                    ctx.font='40px san-serif';                    ctx.fillText('Game Over',300,250);                    ctx.font = '20px san-serif';                    ctx.fillStyle='#000000';                    ctx.fillText('To Play again Refresh the page or click the Restarts button',200,300);                    throw ('Game Over');            }            else            {                ctx.beginPath();                ctx.fillStyle='#000000';                ctx.fillRect(x,y,block,block);                ctx.closePath();            }        }        function pause(elem)        {            if(snake.game.status)            {                clearTimeout(snake.game.status);                snake.game.status=false;                elem.value='Play'            }            else            {                loop();                elem.value='Pause';            }        }        function begin()        {            loop();        }        function restart()        {            location.reload();        }        function start()        {            ctx.fillStyle='#000000';            ctx.fillRect(0,0,canvas.width,canvas.height);            ctx.fillStyle='#ffffff';            ctx.font='40px helvatica';            ctx.fillText('Vignesh',370,140);            ctx.font='20px san-serif';            ctx.fillText('presents',395,190);            ctx.font='italic 60px san-serif';            ctx.fillText('Feed The Snake',240,280);            var img = new Image();            img.onload = function()            {                ctx.drawImage(img,300,300,200,200);                ctx.fillRect(410,330,10,10);            }            img.src ='snake.png';        }        function fullscreen()        {            launchFullscreen(canvas);        }        return {            pause: pause,            restart : restart,            start : start,            begin: begin,            fullscreen : fullscreen,            adjust : adjust,        };    })();    snake.game.start();}</script></head><body><canvas width=850 height=600 id=canvas style=border:1px solid #333; onclick=snake.game.begin();></canvas><div id=controls style=float:right; text-align:center;>    <input type=button id=pause value=Play onClick=snake.game.pause(this); accesskey=p>    <input type=button id=restart value=Restart onClick=snake.game.restart();>    <br/><br/>    <input type=button id=fullscreen value=Play Fullscreen onClick=snake.game.fullscreen();>    <br/><br/>    <div style=font-size:24px;>    Score :     <span id=scoreboard>0</span>    </div></div></body></html>You can see a live version of the game here.
Snake game with canvas element code
javascript;html5;canvas;snake game
From a once over:GoodI like how you use an IIFEI really like how you use direction = keys[event.keyCode];Not so goodYou are not consistently applying the 2nd good technique, for example this:function setWay(direction){    switch(direction)    {        case 'left':            if(old_direction!='right')            {                old_direction = direction;            }            break;        case 'right':            if(old_direction!='left')            {                old_direction = direction;            }            break;        case 'up':            if(old_direction!='down')            {                old_direction = direction;            }            break;        case 'down':            if(old_direction!='up')            {                old_direction = direction;            }            break;    }}could simply have beenfunction setWay(direction){  var oppositeDirection = {    left : 'right',    right: 'left',    up: 'down',    down:'up'  }  if( direction != oppositeDirection[old_direction] ){    old_direction = direction;  }}I will leave deep thoughts to on whetherYou want to specify that 'left' is the opposite of 'right', since you already specified 'right' is the opposite of 'left'Whether you would want to merge oppositeDirection and keysYou copy pasted some code in giveLife and grow that could also benefit from the above approach. I would have written this:    switch(old_direction)    {        case 'right':            nextPosition[0] += 1;            break;        case 'left':            nextPosition[0] -= 1;            break;        case 'up':            nextPosition[1] -= 1;            break;        case 'down':            nextPosition[1] += 1;            break;        }as//2 properly named array indexes for x and yvar X = 0; var Y = 1;//vectors for each directionvar vectors = {  right : { x : 1 , y : 0 },  left  : { x : -1 , y : 0 },  up    : { x : 0 , y : -1 },  down  : { x : 0 , y : 1 }}function updatePosition( direction ){  var vector = vectors( direction );  if( vector ){    nextPosition[X] += vector.x;    nextPosition[Y] += vector.y;  }  else{    throw Invalid direction:  + direction  }}The advantages here are:If you wanted to play snake with 8 directions, you couldNo silent failure if an invalid direction is passed alongThe following code gives me the creeps: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();  }}have you considered using something likefunction launchFullscreen(e) {  var request = e.requestFullscreen ||                 e.mozRequestFullScreen ||                 e.webkitRequestFullscreen ||                 e.msRequestFullscreen;  request();}This is also is not a pretty sight: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();});That should at least bedocument.addEventListener(fullscreenchange,       snake.game.adjust );document.addEventListener(webkitfullscreenchange, snake.game.adjust );document.addEventListener(mozfullscreenchange,    snake.game.adjust );document.addEventListener(MSFullscreenChange,     snake.game.adjust );and really there has to be a better way than to subscribe to every browser event ;) I am assuming you are not simply providing snake.game.adjust because it is not yet initialized at that point. I would rather solve that problem then creating functions to deal with that problem.