title: Javascript, HTML5 Canvas, Score function
body: <p>So I have a simple snake game set up in which the score increments +1 every time the player collides with the right piece(you all the know the game). Anyway.</p>
  
  <p>I want the background to change image every multiple of 5 on the score to represent a new level. Is this possible? I'm assuming it would be something along the lines of;</p>
  
  <pre><code>if score &gt; = 5 then
    var img = document.getElementById("anid");
      ctx.drawImage(img, 0, 0, w, h);
  </code></pre>
  
  <p>I know the syntax there is very wrong but is the thinking behind it right?</p>
  
  <p>// JavaScript Document</p>
  
  <pre><code>$(document).ready(function(){
      //Canvas stuff
      var canvas = $("#canvas")[0];
      var ctx = canvas.getContext("2d");
      var w = $("#canvas").width();
      var h = $("#canvas").height();
  
  
  
  
  
  
      //Lets save the cell width in a var for easy control
      var cw =10;
      var d;
      var food;
      var score;
      if (score % 5 == 0) {
      //Score is a divisor of 5, new level!
      var img = document.getElementById("scream1");
      ctx.drawImage(img, 0, 0, w, h);
      //do what you want
  }
      var obstacle;
      var snd = new Audio("sfx1.wav"); // buffers automatically when created
      var snd2 = new Audio("sfx2.wav");
      var snd3 = new Audio("sfx.wav");
      var snd4 = new Audio("poke.mp3");
      snd4.play();
  
  
      //Timer
      var max_timer = 15;
      var current_timer;
      var show_timer = (function () {
          current_timer--;
  
  
          $("#timer").text(current_timer);
           if (current_timer &lt; 0) {
               $("#bonus").empty();
              init();
              return;
          }
  
      });
      var timer_interval = setInterval(show_timer, 1000);
  
  
  
  
      //Lets create the snake now 
  var snake_array; // an array of cells to make up the snake
  
  function init()
  {
      d = "right";//default direction
      create_snake();
      create_food();
      create_obstacle();
      create_obstacle2();
      create_obstacle3();
      create_obstacle4();
      score = 0;
      current_timer = max_timer;
  
  
  
  
  
      //Lets move the snake now using a timer
  //Which will trigger the paint function
  //Eevery 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-cw)/cw),
          y: Math.round(Math.random()*(h-cw)/cw),
      };
      //This will  create a well with  x/y between  0-44
      //Because there are 45(450/10) positions
      //Accross the rows and columns
  }
  
  //Create next level function
  function next_level()
  {
  var img = document.getElementById("scream1");
      ctx.drawImage(img, 0, 0, w, h);
      }
  
  //Lets create the obstacle now
  
  function create_obstacle()
  {
  
  
  
      obstacle = {
          x: Math.round(Math.random()*(w-cw)/cw),
          y: Math.round(Math.random()*(h-cw)/cw),
      };
  }
  
  //Lets create a second obstacle
  function create_obstacle2()
  {
  
  
  
      obstacle2 = {
          x: Math.round(Math.random()*(w-cw)/cw),
          y: Math.round(Math.random()*(h-cw)/cw),
      };
  }
  
  
  
  //Lets create a third obstacle 
  
  function create_obstacle3()
  {
  
  
  
      obstacle3 = {
          x: Math.round(Math.random()*(w-cw)/cw),
          y: Math.round(Math.random()*(h-cw)/cw),
      };
  }
  
  //Lets create a fourth obstacle 
  
  function create_obstacle4()
  {
  
  
  
      obstacle4 = {
          x: Math.round(Math.random()*(w-cw)/cw),
          y: Math.round(Math.random()*(h-cw)/cw),
      };
  }
  
  
  
  
  
  
  //Lets paint the snake now
  function paint()
  {
  //To avoid the snake trail we need to paint
  //the BGon every frame
  //Lets paint the canvas now
  
      var img = document.getElementById("scream");
      ctx.drawImage(img, 0, 0, w, h);
  
  
  
  
  
  
  
      //The movement code for the snake to come here
      //The logic is simple
      //Pop out the tail cell
      //Place it in front of the head cell
      var nx = snake_array[0].x;
      var ny = snake_array[0].y;
      //These were the posiiton of the head cell.
      //We will increment it to get the new position
      //Lets add proper direction based movement now
      if(d == "right")nx++;
      else if(d == "left")nx--;
      else if(d == "up") ny--;
      else if(d == "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 the body collision
      if(nx == -1 || nx == w/cw || ny == -1|| ny == h/cw||
      check_collision(nx,ny, snake_array))
      {
  
          //restart game
          $("#bonus").empty();
          snd3.play();
          init();
          //Lets organise the code a bit now
          return;
      }
      //If snake collides with obstacle, restart game
      if (nx == obstacle.x &amp;&amp; ny == obstacle.y)
      {
          $("#bonus").empty();
          snd3.play();
          init();
          return;
      }
  
      //If snake collides with obstacle, restart game
      if (nx == obstacle3.x &amp;&amp; ny == obstacle3.y)
      {
          $("#bonus").empty();
          snd3.play();
          init();
          return;
      }
      //If snake collides with obstacle, restart game
      if (nx == obstacle4.x &amp;&amp; ny == obstacle4.y)
      {
          $("#bonus").empty();
          snd3.play();
          init();
          return;
      }
  
  
  
  
  
      //If snake collides with obstacle, get more time
      if (nx == obstacle2.x &amp;&amp; ny == obstacle2.y)
      {
          current_timer = max_timer
          create_obstacle2();
          snd2.play();
  
  
  
  
          $("#bonus").append("&lt;h2&gt;Time Bonus!&lt;/h2&gt;");
  
  
  
  
  
  
              $( '#bonus' ).show(function(){
                $(this).fadeOut(2000);
          });
  
  
  
  
  
      }
  
  
  
  
      //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++;
          if (score % 2 == 0) {
          next_level();
  }
          create_food();
          create_obstacle();
          create_obstacle3();
          create_obstacle4();
          snd.play();
          $("#bonus").empty();
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      }
      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 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 obstacle
      paint_cell2(obstacle.x, obstacle.y);
      //Lets paint the second obstacle
      paint_cell3(obstacle2.x, obstacle2.y);
      //Lets paint the third obstacle
      paint_cell2(obstacle3.x, obstacle3.y);
      //Lets paint the fourth obstacle
      paint_cell2(obstacle4.x, obstacle4.y);
  
      //Lets paint the score
      var score_text = "Score:" + score;
      ctx.fillText(score_text, 5, h-5);
  
  
  }
  
  
  //Lets first create a generic function to paint cells
  function paint_cell(x,y)
  {
      ctx.fillStyle="white";
      ctx.fillRect(x*cw,y*cw, cw, cw);
      ctx.strokeStyle = "black";
      ctx.strokeRect(x*cw,y*cw, cw, cw);
  
  }
  function paint_cell2(x,y)
  {
      ctx.fillStyle="orange";
      ctx.fillRect(x*cw,y*cw, cw, cw);
      ctx.strokeStyle = "black";
      ctx.strokeRect(x*cw,y*cw, cw, cw);
  
  }
  function paint_cell3(x,y)
  {
      ctx.fillStyle="red";
      ctx.fillRect(x*cw,y*cw, cw, cw);
      ctx.strokeStyle = "black";
      ctx.strokeRect(x*cw,y*cw, cw, cw);
  
  }
  
  
  
  function check_collision(x, y, array)
  {
      //This function will check 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 addd the keyboard controls now
  $(document).keydown(function(e){
      var key = e.which;
      //We will add another clause to prevent reverse gear
      if(key == "37" &amp;&amp; d!= "right") d = "left";
      else if(key == "38" &amp;&amp; d!= "down") d="up";
      else if(key == "39" &amp;&amp; d!= "left") d="right";
      else if(key == "40" &amp;&amp; d!= "up") d="down";
      //The snake is now keyboard controllable
  })
  
  
  
  })
  </code></pre>