<canvas id="canvas" width="400" height="200"></canvas>

<canvas id="score" width="300" height="200"></canvas>


<div id="log"><p id="in"></p></div><br>
<a href="http://thecodeplayer.com/walkthrough/html5-game-tutorial-make-a-snake-game-using-html5-canvas-jquery?s=rlt" target="_blank">tut</a>
and
<a href="http://billmill.org/static/canvastutorial/ball.html" target="_blank">pong tut</a>

#score {border: 3px solid black;}
#canvas{border:3px solid black;}
#log{float:left;border:3px solid black; width:120px; height:180px; background-color:blue; color:white; padding: 10px;}
#in{color:white;}

$(document).ready(function(){
  //console.log('enter:');
	//Canvas stuff
  
	var canvas = $("#canvas")[0];
  var score_canvas = $("#score")[0];
	var ctx = canvas.getContext("2d");
  var score_ctx = score_canvas.getContext("2d");
	var w = $("#canvas").width();
  console.log(w);
  //document.getElementById("log").innerHTML="width: " + w;
	var h = $("#canvas").height();
  console.log(h);
  var sW = $("#score_canvas").width();
  var sH = $("#score_canvas").height();
  var cw=10;
  var d; // direction...
  var score=0;
  var snake_array; 
  var tail;
  var food;
  function init()
	{
		d = "right"; //default direction
		create_snake();
    if(typeof game_loop != "undefined")             clearInterval(game_loop);
		//game_loop = setInterval(paint, 60);
    game_loop = setInterval(paint, 30);
	}
	init();
  
  function create_snake()
	{
		var length = 5; //Length of the snake
		snake_array = []; //Empty array to start 
		for(var i = length-1; i>=0; i--)
		{
			//This will create a horizontal snake starting from the top left
			snake_array.push({x: 0, y:15});
      // add code to start from random position
		}
	}
  //Lets create the food now
	function create_food()
	{
		//food = {
		//	x: Math.round(Math.random()*39), 
		//	y: Math.round(Math.random()*(h-cw)/cw) 
		//};
      //This will create a cell with x/y between 0-44
		//Because there are 45(450/10) positions accross the rows and columns
   food = Math.round(Math.random()*39);
    console.log(food);
  }
  	function check_collision(x, y, array)
	{
		//This function will check if the provided x/y coordinates exist in an array of cells or not
		for(var i = 0; i < array.length; i++)
		{
			if(array[i].x == x && array[i].y == y)
			 return true;
		}
		return false;
	}
  
  function paint()
	{
		//To avoid the snake trail we need to paint the BG on every frame
		//Lets paint the canvas now
		ctx.fillStyle = "lime";
		ctx.fillRect(0, 0, w, h);
    //ctx.lineWidth = 5;
		ctx.strokeStyle = "black";
		ctx.strokeRect(0, 0, w, h);
    score_ctx.fillStyle = "white";
    score_ctx.fillRect(0,0,sW,sH);
    score_ctx.strokeStyle = "black";
    score_ctx.strokeRect(0,0,sW,sH); 
    score_ctx.fillStyle = "black";
    score_ctx.font ='28px "ariel"';
    
    //The movement code for the snake to come here.
		//The logic is simple
		//Pop out the tail cell and place it infront of the head cell
		var nx = snake_array[0].x;
		var ny = snake_array[0].y;
		//These were the position of the head cell.
	
		if(d == "right") nx++;
		else if(d == "left") nx--;
		else if(d == "up") ny--;
		else if(d == "down") ny++;
    
        
   	if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
		{
      score++;
      var score_text = "Score: " + score;
      score_ctx.clearRect(0,0,300,200);
   score_ctx.fillText(score_text, 20,40);
      document.getElementById("log").innerHTML = "Score: " + score;
      //document.getElementById("in").innerHTML = "Score: " + score;
			//restart game
      //console.log('collision:' + nx  +',' + ny);
			init();
			//Lets organize the code a bit now.
			return;
		}
    //We will increment it to get the new head position
	//nx++;
		
		 tail = snake_array.pop(); //pops out the last cell
		tail.x = nx;
    tail.y = ny;
		snake_array.unshift(tail); //puts back the tail as the first cell
		//create_food();
    
    
    /* new code ???
    if(nx == food.x && ny == food.y)
		{
			tail = {x: nx, y: ny};
			score++;
			//Create new food
			create_food();
		}
		else
		{
			 tail = snake_array.pop(); //pops out the last cell
			 tail.x = nx; 
      tail.y = ny;
		}
		//The snake can now eat the food.
		
		snake_array.unshift(tail); //puts back the tail as the first cell
    */
    
    
		for(var i = 0; i < snake_array.length; i++)
		{
			var c = snake_array[i];
			//Lets paint 10px wide cells
			paint_cell(c.x, c.y);
      
		}

    //paint_food(food.x, food.y);
    //paint_food(food);
  }
  //Lets first create a generic function to paint cells
	function paint_cell(x, y)
	{
		ctx.fillStyle = "blue";
		ctx.fillRect(x*cw, y*cw, cw, cw);
		ctx.strokeStyle = "white";
		ctx.strokeRect(x*cw, y*cw, cw, cw);
	}
  function paint_food(x, y)
	{
		ctx.fillStyle = "white";
		ctx.fillRect(x*cw, y*cw, cw, cw);
		ctx.strokeStyle = "white";
		ctx.strokeRect(x*cw, y*cw, cw, cw);
	}
  
  //Lets add the keyboard controls now
	$(document).keydown(function(e){
		var key = e.which;
    //console.log(key);
		//We will add another clause to prevent reverse gear
		if(key == "37" && d != "right") d = "left";
		else if(key == "38" && d != "down") d = "up";
		else if(key == "39" && d != "left") d = "right";
		else if(key == "40" && d != "up") d = "down";
		//The snake is now keyboard controllable
	});
  
  
});