title: Building snake game javascript - inserting png images instead of drawing a rectangle on canvas
body: <p>I am building a snake game in javascript. </p>
  
  <p>I so far have a rectangle which moves accross the screen and is controlled by the up, down, left and right keys.</p>
  
  <p>This is all working fine..</p>
  
  <p>However, I want to change my moving rectangle to png images instead. I am using this tutorial as a guide, but by no means copying it </p>
  
  <p><a href="https://github.com/davethesoftwaredev/SnakeGame/tree/master/5/js" rel="nofollow">https://github.com/davethesoftwaredev/SnakeGame/tree/master/5/js</a></p>
  
  <p>he has put him images in a separate js file, then he has referenced them in the snake file and assigned them names and numbers. Should I do mine like this or should i keep it all in one file?</p>
  
  <p>I want to have a few levels and collision detection and a score board. So would it be wise to do it like his? </p>
  
  <p>I dont want to put my whole code on here as it is part of a university project, so I dont want it to look like it was copied from here, but here is my code for the rectangle:</p>
  
  <pre><code>snake.context.fillStyle = "#f00";
  snake.context.fillRect(snake.xcoord, snake.ycoord, 50, 50); //Creates the rectangle
  snake.context.stroke;
  </code></pre>
  
  <p>I want this to instead, show my snakehead.png image</p>
  
  <p>I am extremely new to javascript. I started learning around a month ago, so please be easy on me! I dont know much of the lingo.</p>
  
  <p>I am assuming I want to want to draw an image on a canvas‏ and not create a HTML image tag‏. </p>
  
  <p>Please advise me if I should use the method the guy in the tutorial has used and make a whole separate js file, or should is there a different way of doing it? Bear in mind I want to have a few game levels, collision detection with the wall and piece of fruit.. And please let me know if changing the rectangle to an image will ruin the rest of my code. I am sure I will just about be able to see what else needs changing.. maybe</p>
  
  <p>Any help much appreciated!</p>
  
  <p>Thanks</p>