Talking about Concentration game, Game development, HTML5 and Javascript.
Pixi.js is an HTML5 rendering engine whose strength is speed. When it comes to 2D rendering, according to the official website Pixi is the fastest there is.
in this post I won’t test the speed, but I am going to create an HTML5 Concentration game using PIXI as renderer in order to show you how to render basic games.
Don’t forget Concentration is one of the games you MUST be able to make in less than a day with any engine (refer to this post for more information).
Icons are a free set downloaded from Elegant Themes which I packed into a texture atlas with TexturePacker (you can find a review here).
Looking at the fully commented script you will learn how to:
* Import a texture Atlas
* Add Sprites and Display Object containers
* Interact with the mouse
* Add filters
* Render the state
Not that bad for such an easy game.
Play with it:
You should know how to play: just pick tiles with the mouse and clear the stage by matching tiles.
And this is the fully commented source code:
<!DOCTYPE HTML>
<html>
<head>
<title>PIXI Concentration</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<script src="pixi.dev.js"></script>
</head>
<body>
<script>
// first tile picked up by the player
var firstTile=null;
// second tile picked up by the player
var secondTile=null;
// can the player pick up a tile?
var canPick=true;
// create an new instance of a pixi stage with a grey background
var stage = new PIXI.Stage(0x888888);
// create a renderer instance width=640 height=480
var renderer = PIXI.autoDetectRenderer(640,480);
// importing a texture atlas created with texturepacker
var tileAtlas = ["images.json"];
// create a new loader
var loader = new PIXI.AssetLoader(tileAtlas);
// create an empty container
var gameContainer = new PIXI.DisplayObjectContainer();
// add the container to the stage
stage.addChild(gameContainer);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// use callback
loader.onComplete = onTilesLoaded
//begin load
loader.load();
function onTilesLoaded(){
// choose 24 random tile images
var chosenTiles=new Array();
while(chosenTiles.length<48){
var candidate=Math.floor(Math.random()*44);
if(chosenTiles.indexOf(candidate)==-1){
chosenTiles.push(candidate,candidate)
}
}
// shuffle the chosen tiles
for(i=0;i<96;i++){
var from = Math.floor(Math.random()*48);
var to = Math.floor(Math.random()*48);
var tmp = chosenTiles[from];
chosenTiles[from]=chosenTiles[to];
chosenTiles[to]=tmp;
}
// place down tiles
for(i=0;i<8;i++){
for(j=0;j<6;j++){
// new sprite
var tile = PIXI.Sprite.fromFrame(chosenTiles[i*6+j]);
// buttonmode+interactive = acts like a button
tile.buttonMode=true;
tile.interactive = true;
// is the tile selected?
tile.isSelected=false;
// set a tile value
tile.theVal=chosenTiles[i*6+j]
// place the tile
tile.position.x = 7+i*80;
tile.position.y = 7+ j*80;
// paint tile black
tile.tint = 0x000000;
// set it a bit transparent (it will look grey)
tile.alpha=0.5;
// add the tile
gameContainer.addChild(tile);
// mouse-touch listener
tile.mousedown = tile.touchstart = function(data){
// can I pick a tile?
if(canPick) {
// is the tile already selected?
if(!this.isSelected){
// set the tile to selected
this.isSelected = true;
// show the tile
this.tint = 0xffffff;
this.alpha = 1;
// is it the first tile we uncover?
if(firstTile==null){
firstTile=this
}
// this is the second tile
else{
secondTile=this
// can't pick anymore
canPick=false;
// did we pick the same tiles?
if(firstTile.theVal==secondTile.theVal){
// wait a second then remove the tiles and make the player able to pick again
setTimeout(function(){
gameContainer.removeChild(firstTile);
gameContainer.removeChild(secondTile);
firstTile=null;
secondTile=null;
canPick=true;
},1000);
}
// we picked different tiles
else{
// wait a second then cover the tiles and make the player able to pick again
setTimeout(function(){
firstTile.isSelected=false
secondTile.isSelected=false
firstTile.tint = 0x000000;
secondTile.tint = 0x000000;
firstTile.alpha=0.5;
secondTile.alpha=0.5;
firstTile=null;
secondTile=null;
canPick=true
},1000);
}
}
}
}
}
}
}
requestAnimFrame(animate);
}
function animate() {
requestAnimFrame(animate);
renderer.render(stage);
}
</script>
</body>
</html>
You can also download the source code with all required images and files.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.