The Etch-A-Sketch Game

by Nathan Piper

HTML

<canvas id='background' width=500 height=400 style='border: 1px solid black'></canvas>

<canvas id='game' width=500 height=400 style='border: 1px solid black'></canvas>
<canvas id='gui' width=500 height=400 style='border: 1px solid black'></canvas>
<canvas id='maze' width=500 height=400 style='border: 1px solid black'></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

var width = 500 ;
var height = 400;

var FPS = 60;

var color = prompt("Type Color If You Want A Color");

function canvas(id)
{
    return document.getElementById(id).getContext('2d');
}
var mG = canvas('maze');
var pG = canvas('game');
var gui = canvas('gui');

var x = 50;
var y = 50;

var guider = { 
    x: 50,
    y: 50,
    width: 8,
    height: 8,
    speed: 5,
    tick: function() {
        if(Key.up && this.y > 0) this.y -= this.speed;
        if(Key.down && this.y < height-8) this.y += this.speed;
        if(Key.left && this.x > 0) this.x -= this.speed;
        if(Key.right && this.x < width-8) this.x += this.speed;
  },
    render: function () {
        pG.fillStyle = color;
        pG.fillRect(this.x, this.y, this.width, this.height);
}
}

var Key = {
    up: false,
    down: false,
    left: false,
    right: false,
    space: false
};

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


function render () { // render object to canvas
    pG.clearRect(0,0,width,height);
    guider.render();

}

function...