HTML5 Space Maze

Gethugames’ another product that has been dragged for 6 months of development period is finally released as BETA.

Play the game @ http://www.gethugames.in/html5spacemaze/ Source code @ https://github.com/saiy2k/HTML5-Space-Maze

Dynamic Size

Unlike Tic Tac Toe, which had 2 different sizes for mobile and desktop versions, the goal of this project is to make the gameplay area resize itself to any resolution. A wonderful post @ html5rocks.com made this task much easier.

Leader Board

Another goal is to integrate some sort of leader boards to save user score and make the game little competitive. I integrated Playtomic API for the leader boards and it was very simple and good. But there were some serious server stability issues with Playtomic few months back as more and more people started using it and so I temporarily turned off all Playtomic related code in my game. But now Playtomic seems to be working fine and soon will update the code with leader board functionality.
HTML5 Space Maze Screenshot

No Frameworks

The biggest mistake I been doing since my first project is not using any gaming frameworks / game engines. Hand coding menu systems / buttons / screen flow logics is hectic and meaningless when so much of the work is already being done in many open source game frameworks. This project made me realize my mistake and wont be doing any other project from scratch as this. Been looking into coco2dx for a while and probably will be using it for the next game.

Mobile

The main reason for implementing dynamic game layout is to make the game playable in mobile. But targeting this game for mobile is a bad idea. This gameplay mechanism wont suit for touch devices. The core mechanism is to evade existing lines and asteroids and draw the line through the gaps with high precision. But when you place the thumb in screen in mobile, your view of the drawing tip gets blocked and you lose the precision, thus making the gameplay frustrating.
I tried accelerometer integration and thought drawing as per the device orientation would be cool. It was cool actually, but the problem is browser’s auto-rotation. When you play, the browser auto rotates between portrait and landscape orientations in the mid of the game and there is no API in HTML5 to block browser auto-rotation. Hence mobile gameplay would not all be playable, though it works technically.

Not yet tested in IE. Will do when I get time.

Finally, The Team
Big thanks to Sankar Ganesh, Kevin Skyba for their overall support, ideas and more importantly contributions in programming. Thanks guys :-)

Then big thanks goes to open source / open art community for all the game assets including graphics / sound effects, etc., Here I list out the links to people whose work are used in this game

Tic Tac Toe Extended

I started this project nearly 9 months ago planned to finish in a month, but because of my laziness dragged till now and finally I completed the development now. Very big thanks to my friend Sridhar for his awesome idea of extended Tic Tac Toe game. At first I never thought it would be much fun, but I started doing it because it seemed simple from development point of view. But when I play the game now with any of my friend, I feel the game addictive.

Game is hosted at http://www.gethugames.in/tictactoe/

 

Source code available at https://github.com/saiy2k/Tic-Tac-Toe-Extended-HTML5-Game

 

Game Description:

This is an extended version of Tic Tac Toe game with a board size of 9×9. The player scores a point on placing his sign in 4 consecutive tiles. The game can be played with another human player or with AI. At the end of the game based on player’s score and timing a Badge is awarded which can be shared to Facebook / Twitter. This game also supports HTML5 offline mode, thus requiring no internet connection to play after first run.

Tic Tac Toe Extended – Screenshot

HTML5 Features:

* Uses Canvas Tag to draw the game board and player marks.
* supports Offline mode
* uses CSS media queries to scale to different screen sizes.
* Playable on all devices from Desktop, Tablet to mobile devices (with minimum resolution of 320×480)

Class Design:
* GameManager: Handles high level game flow and handles UI controls and their events(using jQuery).
* InputManager: manages game specific input.
* GameState: holds the state of the game from game tile array, scores, clicked tile, elapsed time, player names, etc.,
* GameLogic: core game logics like score calculation, checking for win/lose condition, AI.
* GameBoard: updates and draws the gameboard using an array of BoardTile objects.
* BoardTile: handles a single tile in the board, updates and draws them.
* FBWrapper: connects to facebook and shares the game status.
* TwitterWrapper: connects to twitter and shares the game status.

Game AI:

The challenging part of this project is the AI. At first, I tried implementing some tricky AI which will track all your moves and it either go full defense mode, in which it tries to block tiles making hard for the player to score or go in full attack mode, in which the AI only concentrated on getting score for itself. But implementing those logics proved hard for me.

So I fell back to brute force algorithm which scans the whole board in 8 directions(top to bottom and reverse, left to right and reverse, top left to bottom right and reverse, top right to bottom left and reverse). While scanning cell by cell, it adds up a temporary variable for same consecutive non blank tile it passes. That is if the first nonblank tile is the AI tile itself, and 4 such tile are placed adjancently, then it increases the score of 5th non blank tile by 4.

This same logic is repeated for all rows, columns and diagonals in both directions and a weight-age score is given for each and every cell in the process. In the end, the cell with high weight-age will be marking during the AI’s next move.

Scoring System:

The scoring system is very simple, there is a rank calculated based on which the player is given a badge. Higher rank is given as the difference between player’s score and opponent’s score is high and the rank value is lowered as the player spends more time than the opponent.

Offline Mode and Media Queries:

This is the first time for me to try with this technologies. They were very simple but very useful powerful technologies.

Overall, I learned a hell lot from this project including Audio API and many others mentioned above. From my next project, I well try to implement all the things that I learned. And I am thinking of supporting IE from my next project onwards. Hope IE wont be so stubborn in supporting modern web standards.