How to make a game like Clash Royale with HTML5 and phaser

Tutorial 1 part 1

Clash Royale is Supercell's new tower defense / card game. If you don't know it yet, have a look here : https://www.youtube.com/watch?v=x6aQ67jk58I .
It's made with some basic mechanisms : a grid map which represents the stage, a path finding algorythm, some drag'n drop and many kind of units.

We will use phaser as framework ; you can download the library at http://phaser.io/download and easystar.js for the path finding.
Once you have downloaded these files you can write the index.html file like this :

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
body{
padding:0px;
margin:0px; }
</style>
<script src="/joomla/phaser.min.js"></script>
<script src="/joomla/easystar-0.2.1.min.js"></script>
<script src="/joomla/game.js"></script>
</head>
<body>
</body>

</html>

Now we have to prepare the game.js file which will actually contain the game program :

var game;
var stage = [];

window.onload = function()
{
game = new Phaser.Game(stageWidth*tileSize, stageHeight*tileSize+stageOriginY*2, Phaser.CANVAS, "Tuto Royale"); // prepare the game object
game.state.add("PlayGame",playGame);
game.state.start("PlayGame");
}

var playGame = function(game){};

playGame.prototype =
{
preload: function()
{
// we will load graphics here
},

create: function()
{
// here we will initialize the game
}
}

Once we have prepared the main files, we can create the map for the stage, in the create function :

var moves = [];
for(var i = 0; i < stageHeight; i ++)
{
stage[i] = []; // init the 2d array
for(var j = 0; j < stageWidth; j ++)
{
stage[i][j] = 1; // create all elements of the stage array and set it to "un-walkable"
}

}

var posX = 1;
var posY = 1;
stage[posX][posY] = 0;
moves.push(posY + posY * stageWidth);
for(var i = 1; i < stageHeight-1; i ++)
{
for(var j = 1; j < stageWidth-1; j ++)
{
if (i != middleY) //exept the middle row
{
stage[i][j] = 0; //clear the inner items of the map
}
}
}

stage[middleY][tower1X-1] = 0; // create the two passages like the bridges in the original game
stage[middleY][tower1X] = 0;
stage[middleY][tower1X+1] = 0;
stage[middleY][tower2X-1] = 0;
stage[middleY][tower2X] = 0;
stage[middleY][tower2X+1] = 0;

You can notice that I use some constants to simplify code improvements :

var stageOriginY = 96; // top of the game stage from the top of the page
var stageWidth = 21;
var stageHeight = 27;
var middleY = 13;
var tower1Y = 5;
var tower1X = 4;
var castleX = 10;
var tower2X = 16;
var tower2Y = 22;
var castle1Y = 3;
var castle2Y = 23;

After that we could have a look to the result, for this we need to add the following line in the begining of the create function:

stageGraphics = game.add.graphics(0, stageOriginY);

Then create a "drawStage" function to render all this.

WORK IN PROGRESS !!!

Mise à jour le Lundi, 01 Février 2016 12:05 Écrit par Administrator Dimanche, 31 Janvier 2016 09:57