title: Adding an end screen to a Canvas and jQuery based game
body: <p>I've took a tutorial for a snake game, and I'm trying to make it better for a little side project at the moment. I have a start screen where the user can press start to start the game.</p>
  
  <p>I am trying to add an end screen in when the user dies that it will show up what their score was, and to add in a play button so that the user can hit play without refreshing the browser.</p>
  
  <p>Being new to both jQuery and Canvas, I've struggled with this and tried many different ways to do it. I was wondering what is the best way to going about adding this end screen in.</p>
  
  <p>I have also included a JS Fiddle to show what I'm trying to do.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt; 
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;title&gt;Game&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="css/reset.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/game.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  
      &lt;div class="SplashScreen"&gt;
      &lt;h1&gt;Snake&lt;/h1&gt;
      &lt;input class="StartButton" type="button" value="Start" /&gt;
      &lt;/div&gt;
  
      &lt;canvas id="canvasArea" width="600" height="450" style="display:none;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
  
  $(".StartButton").click(function () {
  $(".SplashScreen").hide();
  $("#canvasArea").show();
  });
  
  
  //Canvas stuff
  var canvas = $("#canvasArea")[0];
  var ctx = canvas.getContext("2d");
  var w = $("#canvasArea").width();
  var h = $("#canvasArea").height();
  
  //Lets save the cell width in a variable for easy control
  var sw = 15;
  var direction;
  var nd;
  var food;
  var score;
  
  //Lets create the snake now
  var snake_array; //an array of cells to make up the snake
  
  function init() {
      direction = "right"; //default direction
      nd = [];
      create_snake();
      create_food(); //Now we can see the food particle
      //finally lets display the score
      score = 0;
  
      //Lets move the snake now using a timer which will trigger the paint function
      //every 60ms
      if(typeof game_loop != "undefined") clearInterval(game_loop);
      game_loop = setInterval(paint, 60);
  }
  
  init();
  
  function create_snake() {
      var length = 5; //Length of the snake
      snake_array = []; //Empty array to start with
      for(var i = length-1; i&gt;=0; i--)
          {
              //This will create a horizontal snake starting from the top left
              snake_array.push({x: i, y:0});
          }
      }
  
  //Lets create the food now
  function create_food() {
      food = {
                  x: Math.round(Math.random()*(w-sw)/sw),
                  y: Math.round(Math.random()*(h-sw)/sw),
              };
              //This will create a cell with x/y between 0-44
              //Because there are 45(450/10) positions accross the rows and columns
      }
  
  //Lets paint the snake now
  function paint() {
      if (nd.length) {
      direction = nd.shift();
      }
  
  //To avoid the snake trail we need to paint the BG on every frame
  //Lets paint the canvas now
  ctx.fillStyle = "#8db370";
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = "black";
  ctx.strokeRect(0, 0, w, h);
  
  //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.
  //We will increment it to get the new head position
  //Lets add proper direction based movement now
  if(direction == "right") nx++;
  else if(direction == "left") nx--;
  else if(direction == "up") ny--;
  else if(direction == "down") ny++;
  
  //Lets add the game over clauses now
  //This will restart the game if the snake hits the wall
  //Lets add the code for body collision
  //Now if the head of the snake bumps into its body, the game will restart
  if(nx == -1 || nx == w/sw || ny == -1 || ny == h/sw || check_collision(nx, ny, snake_array))
      {
  
      //restart game
      init();
  
      //Lets organize the code a bit now.
      return;
      }
  
  //Lets write the code to make the snake eat the food
  //The logic is simple
  //If the new head position matches with that of the food,
  //Create a new head instead of moving the tail
  if(nx == food.x &amp;&amp; ny == food.y)
      {
          var tail = {x: nx, y: ny};
          score++;
  
          //Create new food
          create_food();
      }
  
          else
  
      {
          var 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 &lt; snake_array.length; i++)
      {
          var c = snake_array[i];
  
          //Lets paint 10px wide cells
          paint_cell(c.x, c.y);
      }
  
      //Lets paint the food
      paint_cell(food.x, food.y);
  
      //Lets paint the score
      var score_text = "Score: " + score;
      ctx.fillStyle = "black";
      ctx.fillText(score_text, 5, h-5);
  
      //Set the font and font size
      ctx.font = '12pt Arial';
  
      //position of the fill text counter
      ctx.fillText(itemCounter, 10, 10);
  
      }
  
  //Lets first create a generic function to paint cells
  function paint_cell(x, y)
      {
          ctx.fillStyle = "#5c7f3d";
          ctx.fillRect(x*sw, y*sw, sw, sw);
      }
  
  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 &lt; array.length; i++)
              {
                  if(array[i].x == x &amp;&amp; array[i].y == y)
                  return true;
              }
  
          return false;
      }
  
      //Lets add the keyboard controls now
  $(document).keydown(function(e){
  var key = e.which;
  var td;
  if (nd.length) {
      var td = nd[nd.length - 1];
  
  } else {
      td = direction;
  }
  
  //We will add another clause to prevent reverse gear
  if(key == "37" &amp;&amp; td != "right") nd.push("left");
  else if(key == "38" &amp;&amp; td != "down") nd.push("up");
  else if(key == "39" &amp;&amp; td != "left") nd.push("right");
  else if(key == "40" &amp;&amp; td != "up") nd.push("down");
  
  //The snake is now keyboard controllable
  
  })
  
  })
  </code></pre>
  
  <p><a href="http://jsfiddle.net/LsGW4/" rel="nofollow">http://jsfiddle.net/LsGW4/</a></p>