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.
function drawstage(posX, posY)
{
stageGraphics.clear();
stageGraphics.beginFill(0xcccccc);
for(i = 0; i < stageHeight; i ++)
{
for(j = 0; j < stageWidth; j ++)
{
if(stage[i][j] != 0)
{
stageGraphics.drawRect(j * tileSize, i * tileSize, tileSize, tileSize);
}
}
}
stageGraphics.endFill();
}
WORK IN PROGRESS !!!
Mise à jour le Lundi, 01 Février 2016 12:05 Écrit par Administrator Dimanche, 31 Janvier 2016 09:57
Record The Screen
Record The Screen vous permet d'enregistrer l'écran de votre mobile/tablette avec le son.
Vous pouvez, ensuite, éditer la vidéo produite et la partager sur vos réseaux sociaux préférés.
Mise à jour le Samedi, 28 Février 2015 08:34 Écrit par Administrator Samedi, 28 Février 2015 08:28
Poulpes contre oursins
Aidez les poulpes à éviter les oursins!
Les poulpes ont besoin de manger du plancton mais attention les oursins sont proches! Touchez l'écran pour propulser votre poulpe dans la bonne direction pour attraper du plancton.
Jouez seul ou jusqu'à 4 joueurs sur tablettes.
Un gameplay addictif et tournant!
Vidéo :
Disponbile dès le 1er Janvier 2015 sur le Google Play Store :
https://play.google.com/store/apps/details?id=earthwormjeff.free.fr.poulpe
Mise à jour le Mercredi, 31 Décembre 2014 12:10 Écrit par Administrator Mardi, 30 Décembre 2014 13:48
Air2box
L'application Air2box est maintenant disponible sur le Play Store :
Elle permet d'envoyer ou de regarder vos médias depuis :
- Votre réseau local (samba/windows)
- vos disque dur réseaux (NAS ou UPnP)
- Votre appareil Android
- Internet
et de les diffuser vers:
- vos Chromecast ou appareils GoogleCast
- vos appareils compatibles AirMedia
- Les périphériques compatibles DLNA & UPnPAV
- ou tout simplement l'écran de votre l'appareil.
Captures d'écran :
This product/app is Google Cast™ Ready. Google Play is a trademark of Google Inc.
Mise à jour le Mardi, 30 Décembre 2014 14:00 Écrit par EarthwormJeff Samedi, 13 Décembre 2014 17:35
Catch them all
Attrapez les tous !
Jouez à deux sur votre tablette ou smartphone !
Attrapez un maximum d'objets pour obtenir des points et des pouvoirs et battez votre adversaire avant la fin du temps limite !
Disponible maintenant sur Google Play !
Mise à jour le Dimanche, 24 Août 2014 12:13 Écrit par Administrator Dimanche, 24 Août 2014 12:07
Plus d'articles...
Page 1 sur 3
<< Début < Précédent 1 2 3 Suivant > Fin >>