What a newbie thinks about HTML5 ?
HTML5 rumoured as the flash killer is one of the hot topics among the developers. Saying that it is just a revision(5th) of the HTML standard will not serve the power it provided to the developers. I myself being new to web technologies have always thought of making a game . [Disclaimer: I am newbie.]
So we will be making a car racing game.Demo Sourcecode
Language used:
HTML5, JavaScript.
Step 1:
Create a file named index.html and copy the following code into it.
<html>
<head>
<script src="jquery.js"></script>
<script src="keys1.js"></script>
<script src="keys2.js"></script>
<style>#canvas{border:dashed}</style>
</head>
<body>
</body>
</html>
In this step we have just created out html file and included the external javascript.
Step 2:
Download and unzip all the files from this folder.
This folder will have three files:
- jquery.js: Write less do more JavaScript library.
- keys1.js,keys2.js: These two files are used to handle the key events as handling the key events until now is very dirty.
We are not going into the details of the files keys1.js and keys2.js as it is beyond the scope of this post.If you donot know about jquery you can see the official jquery website or if you want to learn about the jquery you can see the documentation of the jquery or visit w3schools website.
Step 3:
Add the following code into your body tag.
<script>
var CANVAS_WIDTH = 480*2;
var CANVAS_HEIGHT = 280*2;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH +"' height='" + CANVAS_HEIGHT + " '' id='canvas'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
var FPS=30;
var threading=setInterval(function() {
update();
draw();
}, 1000/FPS)
function update(){
}
function draw(){
}
</script>
Variables CANVAS_WIDTH CANVAS_HEIGHT are the width and the height of the container where we will be painting everything.
We are creating a canvas with id name =”canvas” and then we are appending it to the body.
The variables FPS represents frames per second.
The setInterval(code,n) is the javascript function used to call the function code after every n milliseconds . So here we are calling the functions draw() and update aftre every 1000/FPS milliseconds. Right now update and draw function are empty.
You can now see your index.html file in the browser. It should look like this.
Step:4
Now we will be painting our player on canvas. Just add the following code snippet inside script tag of the body.
var player={
color: "#00A",
x: 400,
y: 500,
width: 40,
height: 40,
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
}
Player has the following attributes:
Color: color of the player.
x,y:Coordinates of the current position of the player.
width,height: Height and width of the rectangle.
draw: a function to draw the player on the canvas.
Update the draw function of the step:3.
function draw(){
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
player.draw();
}
Again open the index.html file in the browser. It should appear like this. 
Step:5 As we have to move our player with the arrow keys so now we will add the event listeners. Just update the function update() of step2.
function update() {
if (keydown.left) {
player.x -= 10;
if(player.x<=0){
player.x=0;
}
}
if (keydown.right) {
player.x += 10;
if(player.x>=CANVAS_WIDTH-32){player.x=CANVAS_WIDTH-32;
}
}
}
Whenever the left arrow key is pressed we are decreasing the value of x by 10.And whenever right arrow key is pressed we are increasing the value of x by 10. Now again open your index.html. Your player will now move with your fingers.
Step:6
Now we will be adding the enemy cars in our game. Just add the following code inside the script tag of the body.
var enemy = {
color: "#000",
x:480,
y:10,
width:32,
height:32,
speed:10,
draw:function(){
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
},
update: function(){
this.y +=this.speed;
if(this.y>=320*2){
this.x=(Math.random()*960)%960;
this.y=10;
}
}
};
Enemy has the following attributes:
Color: color of the enemy.
x,y:Coordinates of the current position of the enemy.
width,height: Height and width of the rectangle.
draw: a function to draw the enemy on the canvas.
update:a function to update the position of the enemy.
and now update the draw and update functions.
add enemy.update(); in update function.
add enemy.draw(); in draw function.
Open your index.html in the browser.
Now we have to check the collision of the enemy car and the player car.
Step:7
Just add the following code in the script tag inside the body.
function collision(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
And then update the draw function.
function draw(){
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
if(collision(enemy,player)==true){
clearInterval(threading);
canvas.font='20pt Calibri';
canvas.fillText("Game Over Press F5 ",600,500);
}
player.draw();
enemy.draw();
}
Now play
Like this:
Like Loading...
Deven Bhooshan 