HTML5 Canvas Simple Game

This experiment is the beginning of a bigger experiment of making a HTML5 game using the HTML5’s canvas tag and Javascript. These days, people want HTML5 stuff, why not make a HTML5 game? That being said, I thought I give it a try and I thought it would be fun to recreate one of the Flash experiments that I did.

I want to give credit to: Matthew Casperson (http://www.brighthub.com/internet/web-development/articles/38744.aspx ). I used this tutorial to get things working and then I went on my own to recreate the experiment I mentioned above.

So far, I have a image that I made show up on the canvas and if you click the blue triangle, the ship moves to the right.

Code Snippets

Javascript Mouse Down Listener
canvas.addEventListener('mousedown', movePlayer, false);

Add Image to Canvas
var player = new Image();
player.src = "images/player.png";

window.onload = init;

function init(){
canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');
setInterval(draw, 1000 / FPS);

}

function draw(){
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(_player, x, y);
}

Click the image below to test it.