How to create a complete HTML5 2048 game with Phaser

Note : This Post is the just an extension for the article from the blog I follow, emanueleferonato. But there is a catch which I have added that is important.

 

In the blog, he says, “It’s very easy to create tweens and animations, so here what you are about to create:” Blah Blah Blah.

Instead of teaching the game development using Phaser, Emanuel has provided the full source code to create the 2048 Game on his blog.

I was actually looking for the game mechanics details since I thought I too can develop html5 games using Phaser. I was a bit dissappointed but was happy to get the complete source code there.

I didnt look in the android/ios market whether there are any 5/10 number games as the 3/2 number games, and ended up modifying the source code to run with 5,10,20,40,80 instead, but still I was not satisfied.

I really wanted to get away from the common theme of number addition in the game mechanics and just thought about how about If I put the game to use alphabets instead.

Say A + A = B,  and the next series B+B=C and son on

 

So I took the code and modifed it a bit with the content here down, to make it work with alphabets.

 

Just above the colours array , add
var abs= {
5:'A',
10:'B',
20:'C',
40:'D',
80:'E',
160:'F',
320:'G',
640:'H',
1280:'I',
2560:'J',
5120:'K',
10240:'L',
20480:'M',
40960:'N',
81920:'O'
};
var colors = {
5:0xFFFFFF,
10:0xFFEEEE,
20:0xFFDDDD,
40:0xFFCCCC,
80:0xFFBBBB,
160:0xFFAAAA,
320:0xFF9999,
640:0xFF8888,
1280:0xFF7777,
2560:0xFF6666,
5120:0xFF5555,
10240:0xFF4444,
20480:0xFF3333,
40960:0xFF2222,
81920:0xFF1111
};

And then we can refer to the Alphabets from the array abs, with the given number values before setting them to the grid.

That part is done in the below lines as in code


.....
var randomValue = Math.floor(Math.random()*10);
......
fieldArray[randomValue]=5;
.......

// showing the value
item.getChildAt(0).text=abs[value];

Now If We run the game it would work with alphabets instead of Numbers.