[Phaser] Drop Four

[SimNerd]

This is my first Android game and my first HTML5 game and my first Phaser game.

 

It's not an original concept, but I still hope it's fun for those who like strategy/board/puzzle games.

 

http://simnerd.com/drop-four.html

On Android: https://play.google.com/store/apps/details?id=com.simnerd.dropfour

 

I learned a lot making it. The same code builds for the web or for a mobile app and has touch/mouse/keyboard controls.

 

I also had a lot of fun putting it together, and the sprite/physics engine in Phaser was very helpful.

 

I also discovered first hand what a mess it is trying to implement third party API/SDK for mobile apps built with HTML5. After spending a day and coming up with only a couple possible providers just for an ad network, I decided to make the game ad-free and to go native when building bigger games to avoid problems like this.

 

Thanks for looking.

[Magnifisite]

Looks very nice and the AI is very smart, how did you create such a good AI?

1 tip for your code (it is just preference though), I saw that you used the following structure CLASSIC.functionName = function() CLASSIC.functionName2 = function().
Instead you can use
CLASSIC.prototype = {
functionName: function (){

 

},

functionName2: function (){

 

}
}

[SimNerd]

Thanks for the kind words. And thanks also for the tip regarding Javascript.

 

I wrote the AI in 2005 in C++ and just now converted it to Javascript. I don't remember everything about it. But at its heart it just implements a textbook AI algorithm called the "minimax algorithm with alpha-beta pruning."

 

http://en.wikipedia.org/wiki/Alpha%E2%80%93beta_pruning

 

It's a brute search that is aided by the "static evaluation." A static evaluation is a rough estimate of a position's advantageousness without looking ahead any further. In this case I approached the board as a set of 69 horizontal, vertical, and diagonal ways to win. If ownership of one of these ways to win is conflicted (or empty), it adds nothing to the static evaluation. But if you have 3 out of 4 in one of these ways to win, for example, that's worth 18 points by the calculation. Having 4 of 4 and winning is 1000 points (effectively infinite).

 

The static evaluation is used so that the brute search can terminate after going at a certain depth (e.g., 6 moves ahead) and have an understanding of the relative value of the outcomes. It's also used as a way of narrowing the search tree by only evaluating the top 4 (instead of all 7) moves available at every step of the way.

[turnA]

Wow, quite interesting explanation there. I admit I always defeated by the AI
In my opinion, the design still need to be improved. Looking forward for your next games!

[SimNerd]

If anyone is considering this particular technology stack (HTML5 + Javascript game engine like Phaser + wrapper for mobile development like Intel XDK aka appMobi), then I should clear up a little FUD (fear, uncertainty, doubt) that I expressed above. It is possible to achieve the effect that I was after, with the use of a custom plugin that you write. Basically you'd create a plugin specifically to implement whatever Objective-C (for iOS) or Java (for Android) API/SDK that you wanted to implement. You'd drop in whatever code the third party supplies into the plugin, plus however you call it. Intel has documentation on how to create native code plugins for their IDE. Not for the faint of heart, I guess, but quite possible.

 

That said, I'm still in the process of looking for a different set of tools for my next project. And, that being said, Phaser is really, really nice for anyone who is looking for an open source Javascript/HTML5 game engine. The examples especially are top notch for encouraging a newcomer to dive right in and mess around.

[SimNerd]

PS - In case anyone is interested in AI development (or somewhat over-optimized C++ code, in this day and age), my source code's online and GPL:

 

http://sourceforge.net/projects/dropfour/