Snake Game

A simple snake game

by Josh Pullen

HTML

<script src="https://rawgit.com/snaptortoise/konami-js/master/konami.js"></script>
<canvas id="canvas"></canvas>
<span id="score"></span>
<img src="http://i1172.photobucket.com/albums/r574/JoshPullen27/stampy_zps0f1ee11a.png" id="stampy" />
<img src="http://i1172.photobucket.com/albums/r574/JoshPullen27/cake_zps7672297a.png" id="cake" />

CSS

@import url(http://fonts.googleapis.com/css?family=Press+Start+2P);

* {
    margin:0px;
    padding:0px;
}
#canvas {
    position: absolute; 
    top: 0px;
    left: 0px;
}
html, body {
    overflow-x:hidden;
    overflow-y:hidden;
}
#score {
    position:fixed;
    top:10px;
    left:10px;
    z-index:9999;
    font-family:"Press Start 2P", sans-serif;
    font-size:14px;
    text-align:center;
    width:default;
}
#score.gameOver {
    width:100%;
    top:50%;
    margin-top:-7px;
}

#stampy, #cake {
    display:none;
}

JavaScript

function game() {
    //Score reset position (no class)
    document.getElementById("score").className = "";
    
    //canvas setup
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    
    //Constants (settings)
    updateSpeed = 50;
    gridSize = 24;
    snakeColor = "#DB9514";
    foodColor = "#333333";
    scoreColor = "#000000";
    
    //var setup
    headX = 0;
    headY = 0;
    snakeDir = 1;
    gridWidth = Math.floor(canvas.width / gridSize);
    gridHeight = Math.floor(canvas.height / gridSize);
    snakePoints = []; //All the points other than the head
    foodPoints = []; //All the food grid points
    snakeLength = 7; //The length that the snake is supposed to be
    frameTurned = false; //Prevents turning more than one time with each iteration of the game loop (snake moves before you can turn again)
    score = 0;
    alive = true;
    
    // Spawn some food
    spawnFood();
    spawnFood();
    spawnFood();
    
    //start game loop
    screenUpdate();
}
function screenUpdate () {
    //Update width and height of canvas
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    gridHeight = Math.floor(canvas.height / gridSize);
    gridWidth = Math.floor(canvas.width / gridSize);
    
    //Move snake
    move(snakeDir);
    
    //Food sensing
    for (var i=0; i<foodPoints.length; i++) {
        if(foodPoints[i][0] == headX && foodPoints[i][1] == headY) {
            foodPoints.splice(i, 1);
            snakeLength = snakeLength + 3;
            if (updateSpeed > 10) {
                updateSpeed--;
            }
            spawnFood();
            score++;
        }
    }
    
    //Death sensing
    for (var i=0; i<snakePoints.length; i++) {
        if(snakePoints[i][0] == headX && snakePoints[i][1] == headY) {
            die();
        }
    }
    
    //Clear canvas
    ctx.clearRect...