Interesting HTML5 Games around

I have been playing a few HTML5 games and reviewing a lot of them lately and found some amazing games, which unleashes the true potential of HTML5, showcasing the ultimate possibilities that could be done with HTML5. I just want to share some of them here and will update the post whenever I find something which belongs to this list.

 

1. Entanglement

Entanglement is a strategic puzzle game, where you gain points by forming and connecting   lines across hexagonal tiles maze. The goal is to make longest line without hitting the edges  and the center tile. Play Link

Entanglement ScreenShot

Screenshot of the Entanglement HTML5 Game

 

2. HTML5 Command and Conquer

Pakka clone of the classic Command and Conquer in HTML5 including several single player missions and multiplayer feature, developed single handedly by Aditya Ravi Shankar. Though its meant to be a proof of concept, its very good enough to be a playable game. Play Link

Command and Conquer Screenshot

Screenshot of HTML5 Command and Conquer by Aditya Ravi Shankar

 

3. Score Rush

Score Rush is a high action paced shoot em up game with bosses spraying bullets throughout the screen. Its highly addictive with 62M being my top score. Play Link

Score Rush Screenshot

Screenshot of the highly addictive HTML5 shoot em up game Score Rush

 

4. Subbania

I only played the demo version of this game. But I am highly excited about it considering the gameplay hours, levels it has. And again it is developed by a single developer fiblye. The developer’s blog post on the enormous amount of effort / frustrations with `work in progress` browser implementations and things he went through in developing the game is inspirational. Play Link

Subbania Screenshot

Screenshot of HTML5 game Subbania

HTML5 Rocks !!!

Integrated Facebook Open Graph in Tic Tac Toe Extended

My recent thoughts is to deeply integrate social networking with gethugames.in. As part of the mission, I already added FB Like, +1, tweet button to almost all pages / apps including blog posts. Last week I added custom Open graph obejct (badge) and actions (earn) to the game Tic Tac Toe Extended. Since the game already had a collectible like item namely badges, the task turned out to be very simple.

Open Graph Earn / Badge Architecture:

The goal is to let the player `earn` a `badge` object at the end of each game, where the badges are ranked based on IQ level. Or in other words, to make feed story that says `User has earned Student badge on Tic Tac Toe Extended`. The procedure will look complex for first timer, but its very simple as long as we rightly follow the docs correctly. I will explain things that I done step by step:

  1. Create pages that represent badge objects.
  2. Create an app @ Facebook Developers Apps.
  3. Configure earn action and badge object.
  4. Call OpenGraph API from in-game.

1. Page for Badge objects

I wrote a simple PHP scriptto map to 10 different in-game badges. The badge pages have the following meta tags for the facebook to identify them as Open Graph objects.

<meta property="fb:app_id" content="<app-id>" />
<meta property="og:type" content="ggtestapplication:badge"/>
<meta property="og:url" content="http:/localhost/ttt/badge.php?rank=10"/>
<meta property="og:title" content="Amoeba"/>
<meta property="og:image" content="http://localhost/ttt/images/Amoeba.png"/>
<meta property="og:description" content="Amoeba huh? Wish you atleast had multi celled brains."/>
<meta property="ggtestapplication:rank" content="10"/>

2. Create an app @ Facebook Developers Apps

Goto Facebook Developers and create a new app filling out the all the fields.

Facebook Create application

Sample Application creation dialog in Facebook Developers App

3. Configure earn action and badge object

Goto Open Graph Dashboard and create a new object, name it Badge. Add one custom Integer property and name it rank. This rank is to give different weight-age to different badges.

Open Graph Badge Object

Badge Open Graph object with custom Rank Parameter for Tic Tac Toe Extended

Similarly create `earn` action connected with `badge` object, so as to make the badge earnable. Optionally add a `report` String parameter which can be used to present with the game win / lose and game timings. Your earn action page should look like this after the above setup:

Open Graph Earn Action

earn action configured in open graph

Open Graph Earn Action Story Configuration

Open Graph Earn Action Story Configuration

Tip: While configuring story attachment and in aggregations, the object and action variables can be accessed by placing them in between paranthesis `{}`. Apart from our custom objects / actions, several templates are provided, which are documented very well in developer docs.

4. Call OpenGraph API from in-game

With everything setup properly, now we can get into coding. When the game is over and scores are calculated, the action can be posted with the following code:

FB.api('/me/' + 'tictactoeextended:earn',
    'post',
    {'report' : TicTacToe.GameState.gameDescription,
    badge : 'http://www.gethugames.in/tictactoe/badge.php?rank=' + (10 - TicTacToe.GameState.rank) },
    function(response) {
        console.log(response);
});

Before calling this code to post an action, the user should be logged in with corresponding `posting` permissions. I will write those procedures for those in my next upcoming posts. With all this done right, when I finish a game, an activity gets posted in my profile as shown below:

Tic Tac Toe Extended Activity Feed

Earn Badge action of Tic Tac Toe Extended showing up in Facebook Activity stream

Open Graph Aggregations

If you accomplished all the above steps, setting up an aggregation is just a piece of cake and I setup an aggregation box and it looks as below:

Tic Tac Toe Extended - Facebook Aggregations

Aggregations box in Facebook profile page for Tic Tac Toe Extended

PS: After finishing all this, I couldn’t submit the app to Facebook App Center as it require a secure URL (https) to access the game and I dont have SSL setup in my server :-( But I will be buying it soon and submit it to app center.

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

HTML5 Orientation support (iPhone)

There is a great tutorial on html5rocks.com on how to use device orientation api in javascript. It has neat examples to demonstrate the functionality.

Problems with browser Orientation change:

But one issue that I faced is when the device(iPhone) is tilted, the browser’s orientation gets changed between landscape and portrait, which had a very negative impact on my project. I am currently working on a game named ‘HTML5 Space Maze'(in github), which is supposed to draw a continuous line based on device orientation. But when the device is tilted and the browser’s orientation gets changed, my game’s state gets messed up.Searched with a hope that there should be some API to lock the browser orientation. But there were none, though I got some work arounds(in stackoverflow) to mimic the orientation lock. But I am not satisfied with all this and postponed my R & D.

Phonegap, the savior:

Today morning I was trying out the phonegap framework for first time and my HTML5 Space Maze game integrated well with the phonegap and ran good in iPhone. Then I switched to the long-forgotten ‘orientation’ branch of my project and tried running the code through phonegap, locking the orientation of ‘CDVViewController’ to landscape left.Then tested the code in iPhone and it worked flawlessly. Since the ViewController is restricted to landscape left, no matter how you tilt the phone, the views wont rotate and thus making my game responding well.

I achieved my goal somehow today, but the target platform changed from web to iOS now. Not a big deal for me, I not yet decided or even thought on how and where to deploy the product once its complete.

C Program for 21 Sticks game

Here is a good brain refreshing puzzle that I solved recently. Thanks to my friend Raghul for sharing this good piece of puzzle with me. Its a turn based 2 player game (player and computer in our case). c

Now, I am to write a program for this game in such a way that however the player plays, he always picks the last one and thus the computer wins. Looked very simple at first and I came with the following program in 15 minutes and thought to myself (very proudly) that I solved it.

    
    int lineCount;
    int userPick;
    int aiPick;

    lineCount = 21;
    while (lineCount > 1) {
        printf("\n\n%d lines remaining. Pick 1 or 2 or 3 or 4: ", lineCount);
        scanf("%d", &userPick);
        lineCount -= userPick;

        if (lineCount == 1) {
            printf("\nyou win and AI lose\n");
            return;
        }
        if (lineCount <= 5) {
            aiPick = lineCount - 1;
        } else {
            aiPick = rand() % 4 + 1;
        }

        printf("you took %d lines", userPick);
        printf("\nAI took %d lines", aiPick);
        lineCount -= aiPick;
    }
    if (lineCount == 1) {
        printf("\nyou win and AI lose\n");
        return;
    } else {
        printf("\n1 line remains and u lose\n\n");
    }

The AI seems to be working good, but its not perfect. It fails occasionally, especially when the player gets a turn with the remaining number of sticks in the range 2 to 5. So I tried to fix this by playing in such a way that AI always gets its turn when the remaining number of sticks is in the range 2 to 5. But I couldn’t figure out how to do this inside my little mind. So I took a pen and paper and started writing the remaining number of lines, all possibilities of AI’s move and corresponding result, which resulted in a table such as this:

Possible States with results
Remaining Sticks AI Move Worst Case
2 1 Win
3 2 Win
4 3 Win
5 4 Win
6 1 Lose
2 Lose
3 Lose
4 Lose
7 1 Win
2 Lose
3 Lose
4 Lose
8 1 Lose
2 Win
3 Lose
4 Lose
9 1 Lose
2 Lose
3 Win
4 Lose
20 1 Lose
2 Lose
3 Lose
4 Win
21 1 Lose
2 Lose
3 Lose
4 Lose

Only after completely writing out the above table, I found that when there are some certain magic remaining sticks at your turn, regardless of your move, if ur opponent plays his best move, he can win. The magic numbers are found to be 21, 16, 11, 6 and of course 1.

Since the player begins the game with 21 remaining sticks (one of the magic number), as long as my AI plays its best move, it can win. The AI’s best move nothing but the move which makes the remaining number of lines to the next lowest magic number and as we continue when the player plays his move, he will have the remaining sticks as 16, 11, 6 and finally 1 and he loses. Here is the final working program with perfect AI:

#include <stdio.h>

int lineCount;

void main() {

    int userPick;
    int aiPick;

    lineCount = 21;
    while (lineCount > 1) {
        printf("\n\n%d lines remaining. Pick 1 or 2 or 3 or 4: ", lineCount);
        scanf("%d", &userPick);

        lineCount -= userPick;

        if (lineCount >= 17 && lineCount <= 20) {
            aiPick = lineCount - 16;
        } else if (lineCount >= 12 && lineCount <= 15) {
            aiPick = lineCount - 11;
        } else if (lineCount >= 7 && lineCount <= 10) {
            aiPick = lineCount - 6;
        } else {
            aiPick = lineCount - 1;
        }

        printf("you took %d lines", userPick);
        printf("\nAI took %d lines", aiPick);
        lineCount -= aiPick;
    }

    printf("\n1 line remains and u lose\n\n");
}

I am sure this is not the best way to solve this problem, I should have done some research on maths and find some elegant solution, but I guess this is fine for the first step and to achieve the goal. I will look into other possible elegant solutions and if I find any, I will post about it later.

Happy Programming !!!

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.