Build pong html5 video game – part II

 

The Pong javascript html5 story continues….In this part, we continue the environment game building before to make life to the game with some object animation like players, ball and score.


 

Before reading this post

Read the first post at the first episode of this tutorial.

 

Story before this post

In the first post, a Layer object (like flash layers) to build the playing field : a black background, and a net.

We need two others layer objects :
– the first to the score;
– the second to players et ball animation.

 

The 3 layers

Like the playing fields, we build :
– a layer (canvas html5) for score;
– and a layer (canvas html5) for players and ball.

Why 3 layers instead of one ?
– optimisation : with one layer, we must refresh all of the game elements (players, ball, score, net) all the time;
– conceptual : we group similar items in one dedicated layer.

We can put a layer on the other zIndex property. We can do with the 3 html5 layer : we just choose the order. The highest zIndex number is for the top layer.

The ground html5 layer doesn’t change : any animation. It will be place under the others layers.

The players html5 layer for ball and players change all over the time when the game runs.

The last html5 layer for score change when a player looses ball.

To summarize :
– ground layer : at the bottom;
– players layer : at the top;
– layer score : in the middle.

The 3 html5 layer are at the same dimensions. However and to avoid ground and score refresh all over the time, the 2 up layers (players and score) are transparents to view the ground layer.

The 3 html5 layer are created in the init function from javascript namespace game :

[javascript]
…..
groundColor : "#000000",
netColor : "#FFFFFF",
groundLayer : null,
scoreLayer : null,
playersBallLayer : null,

init : function() {
this.groundLayer = game.display.createLayer("ground", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0);
game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 – this.netWidth/2, 0);
this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);
this.playersBallLayer = game.display.createLayer("playersandball", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);
}
…..
[/javascript]

On run, the 2 new html5 layer are hidden. For viewing existing, we add a display text function in javascript namespace game.display :

[javascript]
…..
drawTextInLayer : function(targetLayer, text, font, color, x, y) {
targetLayer.context2D.font = font;
targetLayer.context2D.fillStyle = color;
targetLayer.context2D.fillText(text, x, y);
}
…..
[/javascript]

And we call it to display red text in the 2 new html5 layer :

[javascript]
…..
init : function() {
this.groundLayer = game.display.createLayer("ground", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0);

game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 – this.netWidth/2, 0);
this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);

game.display.drawTextInLayer(this.scoreLayer, "SCORE", "10px Arial", "#FF0000", 10, 10);
this.playersBallLayer = game.display.createLayer("playersandball", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);

game.display.drawTextInLayer(this.playersBallLayer, "PLAYERSANDBALL", "10px Arial", "#FF0000", 100, 100);
}
…..
[/javascript]

On run :
pong_base_layer

 

The score display

To make score display, we use drawTextInLayer function.

However, for easy reading ans quality, the function is inside another dedicated to html5 video game pong with a name like using.

This function is specific to html5 video game pong. So, you can’t use elsewhere.
That’s why, this function is inside game namespace.

This function takes 2 arguments, the score players.

[javascript]
var game = {
…..
displayScore : function(scorePlayer1, scorePlayer2) {
}
}
[/javascript]

And it displays scores to the ground at top and center in the correct html5 layer.

Score player 1 is at 300 pixels from the left html5 canvas.
Score player 1 is at 365 pixels from the left html5 canvas.

2 new variables dedicated to the game namespace for the display score positions (scorePosPlayer1 and scorePosPlayer2).

[javascript]
var game = {
…..
scorePosPlayer1 : 300,
scorePosPlayer2 : 365,
…..
displayScore : function(scorePlayer1, scorePlayer2) {
game.display.drawTextInLayer(this.scoreLayer, scorePlayer1, "60px Arial", "#FFFFFF", this.scorePosPlayer1, 55);
game.display.drawTextInLayer(this.scoreLayer, scorePlayer2, "60px Arial", "#FFFFFF", this.scorePosPlayer2, 55);
}
}
[/javascript]

On run :
pong_base_layer_2

 

Display players and ball

Like score, we add 2 dedicated functions :
– displayBall to display the ball;
– displayPlayers to display players.

Add this new functions to game namespace.

For the ball, we need to define :
– size in pixels (width and height);
– color;
– and position (X-axis and Y-axis).

We add as many properties to game namespace.

For the best, we add a ball object with properties :

[javascript]
var game = {
…..
ball : {
width : 10,
height : 10,
color : "#FFFFFF",
posX : 200,
posY : 200
},

init : function() {
…..
[/javascript]

Now, we display a square with color and dimensions defined in ball object. We reuse the drawRectangleInLayer function.

[javascript]
displayBall : function() {
game.display.drawRectangleInLayer(this.playersBallLayer, this.ball.width, this.ball.height, this.ball.color, this.ball.posX, this.ball.posY);
}
[/javascript]

Call this function from init function to see :

[javascript]
…..
init : function() {
…..
this.displayScore(0,0);
this.displayBall(200,200);
},
……
[/javascript]

On run :
pong_base_layer_3

For players, we need to define :
– size in pixels (width and height);
– color;
– position (X-axis and Y-axis).

Like ball object, we add a players objects :

[javascript]
var game = {
…..
playerOne : {
width : 10,
height : 10,
color : "#FFFFFF",
posX : 10,
posY : 200
},

playerTwo : {
width : 10,
height : 10,
color : "#FFFFFF",
posX : 600,
posY : 200
},

init : function() {
…..
[/javascript]

It’s similar to ball object. So, why add 2 same objects ? Just for easy reading code.

We add players display function :
[javascript]
displayPlayers : function() {
game.display.drawRectangleInLayer(this.playersBallLayer, this.playerOne.width, this.playerOne.height, this.playerOne.color, this.playerOne.posX, this.playerOne.posY);
game.display.drawRectangleInLayer(this.playersBallLayer, this.playerTwo.width, this.playerTwo.height, this.playerTwo.color, this.playerTwo.posX, this.playerTwo.posY);
}
[/javascript]

And we call from init function :
[javascript]
…..
init : function() {
this.terrainLayer= game.display.createLayer("terrain", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0);
game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 – this.netWidth/2, 0);

this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);
game.display.drawTextInLayer(this.scoreLayer , "SCORE", "10px Arial", "#FF0000", 10, 10);

this.playersBallLayer = game.display.createLayer("joueursetballe", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);
game.display.drawTextInLayer(this.playersBallLayer, "JOUEURSETBALLE", "10px Arial", "#FF0000", 100, 100);

this.displayScore(0,0);
this.displayBall();
this.displayPlayers();
},
…..
[/javascript]

On run :
pong_base_layer_4

To see code in live, click on Pong

In the next step, we animate ball with bounce of the walls on here.

 

If you like, share.

 

If you some errors (like english) or you are happy, comment.

 
Complete javascript source :
game.html
[html]
<html>
<body>
</body>
<script src="game.js"></script>
<script src="game.display.js"></script>
<script>
(function () {
var requestAnimId;

var initialisation = function() {
game.init();
requestAnimId = window.requestAnimationFrame(main);
}

var main = function() {
requestAnimId = window.requestAnimationFrame(main);
}

window.onload = initialisation; // appel de la fonction initialisation au chargement de la page
})();
</script>
</html>
[/html]

game.js
[javascript]
var game = {

groundWidth : 700,
groundHeight : 400,
netWidth : 6,
groundColor : "#000000",
netColor : "#FFFFFF",

groundLayer : null,
scoreLayer : null,
playersBallLayer : null,

scorePosPlayer1 : 300,
scorePosPlayer2 : 365,

ball : {
width : 10,
height : 10,
color : "#FFFFFF",
posX : 200,
posY : 200
},

playerOne : {
width : 10,
height : 50,
color : "#FFFFFF",
posX : 30,
posY : 200
},

playerTwo : {
width : 10,
height : 50,
color : "#FFFFFF",
posX : 650,
posY : 200
},

init : function() {
this.groundLayer = game.display.createLayer("terrain", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0);
game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 – this.netWidth/2, 0);

this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);
game.display.drawTextInLayer(this.scoreLayer , "SCORE", "10px Arial", "#FF0000", 10, 10);

this.playersBallLayer = game.display.createLayer("joueursetballe", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);
game.display.drawTextInLayer(this.playersBallLayer, "JOUEURSETBALLE", "10px Arial", "#FF0000", 100, 100);

this.displayScore(0,0);
this.displayBall(200,200);
this.displayPlayers();
},

displayScore : function(scorePlayer1, scorePlayer2) {
game.display.drawTextInLayer(this.scoreLayer, scorePlayer1, "60px Arial", "#FFFFFF", this.scorePosPlayer1, 55);
game.display.drawTextInLayer(this.scoreLayer, scorePlayer2, "60px Arial", "#FFFFFF", this.scorePosPlayer2, 55);
},

displayBall : function() {
game.display.drawRectangleInLayer(this.playersBallLayer, this.ball.width, this.ball.height, this.ball.color, this.ball.posX, this.ball.posY);
},

displayPlayers : function() {
game.display.drawRectangleInLayer(this.playersBallLayer, this.playerOne.width, this.playerOne.height, this.playerOne.color, this.playerOne.posX, this.playerOne.posY);
game.display.drawRectangleInLayer(this.playersBallLayer, this.playerTwo.width, this.playerTwo.height, this.playerTwo.color, this.playerTwo.posX, this.playerTwo.posY);
}

};
[/javascript]

game.display.js
[javascript]
game.display = {
container : "",

layer : {
name : "",
canvas : "",
context2D : "",
posX : null,
posY : null,
width : "",
height : "",
backgroundColor : "",
zIndex : ""
},

createLayer : function(name, width, height, htmlContainer , zIndex, backgroundColor, x, y) {
var layer = Object.create(this.layer);

layer.canvas = window.document.createElement("canvas");

layer.canvas.id = name;

if ( backgroundColor != undefined )
layer.canvas.style.background = backgroundColor;

layer.zIndex = zIndex
layer.canvas.style.zIndex = zIndex;

layer.width = width
layer.canvas.width = width;

layer.height = height
layer.canvas.height = height;

if ( x != undefined )
layer.posX = x;

if ( y != undefined )
layer.posY = y;

layer.canvas.style.position = "absolute";

if ( x != undefined )
layer.canvas.style.left = x;
if ( y != undefined )
layer.canvas.style.top = y;

if ( htmlContainer != undefined ) {
htmlContainer.appendChild(layer.canvas);
} else {
document.body.appendChild(layer.canvas);
}

layer.context2D = layer.canvas.getContext(‘2d’);
return layer;
},

drawRectangleInLayer : function(targetLayer, width, heigth, color, x, y) {
targetLayer.context2D.fillStyle = color;
targetLayer.context2D.fillRect (x, y, width, heigth);
},

drawTextInLayer : function(targetLayer, text, font, color, x, y) {
targetLayer.context2D.font = font;
targetLayer.context2D.fillStyle = color;
targetLayer.context2D.fillText(text, x, y);
}
}
[/javascript]

 

Posté dans html5Tagged canvas, HTML5 canvas, html5 video game, javascript video game  |  1 commentaire

Une réponse à "Build pong html5 video game – part II"

Répondre