Snake 1.0

by Kyle Bezio

HTML

<canvas width="820" height="500" id="myCanvas"></canvas>
 <body>
  <h1>
  My snake game
  </h1>
   <p1>
   Arrow keys to move
   </p1>
   <p2 id="text">
     Length: 
   </p2>
 </body>

CSS

#myCanvas {
    border: 3px solid blue;
    position: absolute;
    top: 100px;
}
h1 {
   font: 40px Rockwell;
   text-shadow: 3px -2px #a6a6a6;
   background-color: red;
   position: absolute;
   top: 5px;
   left: 20px;
   width: 300px;
   height: 48px;
}
p1 {
    font: 18px impact;
    position: absolute;
    top: 80px;
    left: 20px;
}
p2 {
    font: 18px impact;
    position: absolute;
    top: 80px;
    left: 420px;
}

JavaScript

//canvas values
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//frame rate
var framerate = 1000/10;
//call the interval for animation and drawing
var thread = setInterval(draw, framerate);
var text = 0;
var text2 = 1.2;
//key codes for key controls
	//player 1
var left = 37;//left arrow
var right = 39;//right arrow
var up = 38;//up arrow
var down = 40;//down arrow
	//player 2
var left2 = 65;//a
var right2 = 68;//d
var up2 = 87;//w
var down2 = 83;//s
//variable to keep track of key pressed
var key = 0;
//rounded rectangle function
function roundedRect(x, y, width, height, radius) {
  context.beginPath();
  context.moveTo(x, y+radius);
  context.lineTo(x, y+height-radius);
  context.arcTo(x, y+height, x+radius, y+height, radius);
  context.lineTo(x+width-radius, y+height);
  context.arcTo(x+width, y+height, x+width, y+height-radius, radius);
  context.lineTo(x+width, y+radius);
  context.arcTo(x+width, y, x+width-radius, y, radius);
 	context.lineTo(x+radius, y);
  context.arcTo(x, y, x, y+radius, radius);
  context.fill();
}

//splash screen image
var splashScreen = new Image();
//change this for your own image vvvv
splashScreen.src = "https://s12.postimg.org/z9b8goahp/Snake_game_Splash_Screen_3_No_food_Extra_KB.jpg";
//are we playing the game?
var playing = false;
var player2 = false;
//set up the tail
var tail = [];
var tail2 = [];

/*
Define Game Objects here
*/
function GamePiece(x, y, size, color) {
	//assign the values
  this.x = x;
  this.y = y;
  this.size = size;
  this.color = color;
}
//draw the game piece
GamePiece.prototype.draw = function() {
	//assign a color
  context.fillStyle = this.color; 
  //draw a rounded rect
	roundedRect (this.x, this.y, this.size, this.size, 7);
}

//make game pieces
var head = new GamePiece(520, 240, 20, "green");
var food = new GamePiece(400, 40, 20, "red");
var head2 = new GamePiece(280, 240, 20, "darkblue");
var headfake = new GamePiece(-20, 340, 20, "green");
var move = 1...