The HTML5 came with many new possibilities, support new tags, like canvas, video, audio, which enable and facilitate the development of games, but all the logic of the game is developed in Javascript.
Below i will show you a little tutorial about developing a simple game in HTML5, for this, it is advisable that you already have a basic knowledge of HTML and Javascript.
The objective of the game is to collect with a basket, all fruits that are falling, and take care not to catch the bomb because if that happens you lose the game.
You can download the source files on:
First we need to create a folder for the project, then download and save the below images inside this folder.
Well, done this we will create the index.html file which contains, among others, the canvas tag. We assign a name id "stage" for the canvas and the width and height 800×600. Note that we also use a style to the canvas, setting borders and background color. And here we will call the method "initialize()" at the "onLoad" of the body tag.
<!DOCTYPE html>
<html>
<head>
<title>First HTML5 Game</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background-color: #eee;
}
</style>
<script src="game.js"></script>
</head>
<body onLoad="initialize()">
<canvas id="stage" width="800" height="600">
Your browser do not support HTML5
</canvas>
</body>
</html>
Now, the main part, the game.js file, which contains all the logic of the game.
1º We need to create the variables to be used in the game.
2º The initialize method is responsible for loading all the images, assign values to variables and set a time for the gameloop, which will be called every 30 milliseconds.
3º The keyDown method is responsible for testing the keys pressed on the keyboard and move the player (fruit basket) on the X axis.
4. The gameloop method is responsible for clean up and draw on the screen, collision tests, move the fruit, among other things necessary to test every "round" of play.
Below the game.js file.
// Create the variables
var playerHeight, playerWidth, playerPosX, playerSpeed, playerPoints, playerImg;
var orangeImg, appleImg, pearImg, fruitPosX, fruitPosY, fruitSpeed, bombImg;
var collisionFlag, gameOver;
// Function that starts the game, it loads all the resources and sets the initial value of the variables
function initialize(){
// Sets the canvas variable for the HTML Canvas
canvas = document.getElementById("stage");
context = canvas.getContext("2d");
// Create and load all the pictures of the game
orangeImg = new Image();
orangeImg.src = 'orange.png';
appleImg = new Image();
appleImg.src = 'apple.png';
pearImg = new Image();
pearImg.src = 'pear.png';
bombImg = new Image();
bombImg.src = 'bomb.png';
playerImg = new Image();
playerImg.src = 'basket.png';
// Set initial values for the variables Player
playerHeight = 125;
playerWidth = 150;
playerSpeed = 20;
playerPoints = 00;
playerPosX = (canvas.width/2)-(playerWidth/2);
// Start the values for the flags of the game
collisionFlag = false;
gameOver = false;
// Start the necessary variables of fruits
fruitPosY = -50;
fruitSpeed = 15;
fruitPosX = canvas.width/2;
fruitImg = orangeImg;
// Draw the basket of fruit on screen in X and Y position
context.drawImage(playerImg, playerPosX, canvas.height-120);
// Add keyboard events
document.addEventListener("keydown", keyDown);
// Call the gameLoop method every 30 milliseconds
loop = setInterval(gameLoop, 30);
}
// Function to control key Down
function keyDown(key){
if(key.keyCode == 37)
if( playerPosX > 0 )
playerPosX -= playerSpeed;
if(key.keyCode == 39)
if( playerPosX < (canvas.width - playerWidth) )
playerPosX += playerSpeed;
// If the game is not over yet draws the basket of fruit on screen
if( gameOver == false )
context.drawImage(playerImg, playerPosX, canvas.height-120);
}
function gameLoop(){
// Clean the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the fruit and the fruit basket
context.drawImage(fruitImg, fruitPosX, fruitPosY);
context.drawImage(playerImg, playerPosX, canvas.height-120);
// If the fruit has not reached the bottom of the screen, she keeps 'falling'
if( fruitPosY <= canvas.height ){
fruitPosY += fruitSpeed;
// Otherwise it resets the position and generates a fruit or random pump
}else{
fruitPosY = -50;
fruitPosX = Math.random() * (canvas.width-50);
collisionFlag = false;
if( Math.floor((Math.random() * 4)) == 0 )
fruitImg = bombImg;
else if( Math.floor((Math.random() * 4)) == 1 )
fruitImg = appleImg;
else if( Math.floor((Math.random() * 4)) == 2 )
fruitImg = pearImg;
else if( Math.floor((Math.random() * 4)) == 3 )
fruitImg = orangeImg;
}
// Test whether the fruit 'fell' into the basket, if so, increments a point and sets the flag to true collision
if( ( fruitPosX > playerPosX && fruitPosX < (playerPosX+playerWidth) ) &&
( fruitPosY >= canvas.height-100) &&
collisionFlag == false &&
fruitImg != bombImg){
playerPoints++;
collisionFlag = true;
}else if( ( fruitPosX > playerPosX && fruitPosX < (playerPosX+playerWidth) ) &&
( fruitPosY >= canvas.height-playerHeight) &&
collisionFlag == false &&
fruitImg == bombImg){
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = "80pt Arial";
context.fillText("Game Over", (canvas.width/2)-250, 300, 500);
gameOver = true;
clearInterval(loop);
}
// Show player points on the screen
context.font = "32pt Arial";
context.fillText(playerPoints+" fruits", canvas.width-140, 50, 100);
}
And the result of the game should look like the screen below.
I hope you enjoyed and learned a little about how to develop games in HTML5.
In this tutorial i haven't used any framework, but there are already several great frameworks for the development of HTML5 games, like
Phaser or
MelonJS.
