Snake

by Nathan Piper

HTML

<canvas id="background" width="500" height="500"></canvas>
<canvas id="game" width="500" height="500"></canvas>

CSS

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 500px;
    position: absolute;
    top: 0;
    left: 0;
}
#background{
  background: black;
}

JavaScript

//////////////////////////////////////Canvas Function
function canvas(id){
	return document.getElementById(id).getContext('2d');
}

var bg = canvas('background');
var g = canvas('game');
///////////////////////////////Game Variables
var fps = 3;
var snake = [];
var snake_unit = {
	size: 10,
  head: false,
  x: 0,
  y: 0,
  color: 'white',
  tick: function(){},
  draw: function(){
  	g.fillStyle = this.color;
  	g.fillRect(this.x, this.y, this.size, this.size);
  }
}
function map_unit(x,y) {
	this.x = x;
  this.y = y;
}
var food = {}

////////////////////////////////Game Controls
var Key = {
    up: false,
    down: false,
    right: false,
    left: false,
}
addEventListener("keydown", function (e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.which;

    switch (keyCode) {
        case 38:
            Key.up = true;
            break;
        case 40:
            Key.down = true;
            break;
        case 39:
            Key.right = true;
            break;
        case 37:
            Key.left = true;
            break;
    }
}, false);
addEventListener("keyup", function (e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.which;

    switch (keyCode) {
        case 38:
            Key.up = false;
            break;
        case 40:
            Key.down = false;
            break;
        case 39:
            Key.right = false;
            break;
        case 37:
            Key.left = false;
            break;
    }
}, false);

///////////////////////////////////////Main Game Functions
function tick(){
	snake_unit.tick();
}
function draw(){
	snake_unit.draw();
  for(var i=0; i < 500; i += 10){
  	for(var j=0; j < 500; j += 10){
    	g.fillRect(i,j,5,5)
    }
  } 
}

setInterval(function(){
	tick();
  draw();
}, 1000/fps)