It has been an interesting past month, so I want to share how I build a social game for desktop and mobile devices by using Javascript and HTML/CSS.
Since it took me 7 days to make it, I entitled the blog post: "How to create a social game in one week"! I will post all 7 days of my development diary now, so you can see what progress I made at which time and which issues evolved and got fixed :).
The game is an online realtime multiplayer puzzle game called SwarmFight and freely available to join at http://swarmfight.com.
1st day: Prototype and Field/User Synchro
The first day is all about prototyping and seeing if the game idea is working at all.
In Swarmfight you have a grid with 10x10 fields. Whenever a player joins this field, his facebook/twitter avatar is displayed on the grid. The base idea is similar to swarmnation, which is down now :(.
The basic in HTML/CSS is finished. One can move the player by using the arrow keys and buttons next to the grid. The display for the Target-Figure is working, but has no effect, yet.
Before the player joins the field, he is capable of choosing the color: this is not stored anywhere, yet.
2nd day: Twitter Login and Database
Since I need to store the user somewhere, I set up a basic MySQL-Database-Structure and created a very basic plain PHP script to read/write user data. There is also a profile page, which displays the current user and his experience level + rank (even though with no functionality so far).
A second big thing for today is the integration with twitter. Thanks to the TwitterOAuth php library it was pretty simple to create a working twitter login. Now I am storing the twitter id + twitter screen name for each user. Whenever they come back, they go through the twitter-login process and are authenticated again.
The current field is persisted, too. There is only one field at the moment, but this is sufficient for testing! :)
3rd day: Testing with 9 players + Win/Lose and XP/Level
Today started with a short testing session with 9 of my friends/co-workers. They found out, that Win/Lose-Screen is not functioning, yet :). But Login with Twitter worked like a charm and it was already lot's of fun!
So I took the time to fix the Win/Lose-Screen according to the outcome of the match.
Each level gives some experience points now. The user has a small overlay as soon as the experience points are gained. Also increasing the experience level works like a charm already. Even though the player doesn't has any effect from being #1 at the moment.
As soon as a player achieves a new level, an overlay is triggered and one can share that information on Facebook. This is simply a normal facebook-share popup, but with custom title + image to make it possible that always http://swarmfight.com is shared but with a different text, which states: 'Achieved Level 6' or something like that.
4th day: Highscore, Store Figures and Media queries
Today I added the Highscore for all players. The best 10 players for the entire world are displayed on one page.
Lots of time got wasted today to get the app working in 'browser fullscreen'.
Lessons learned:
- jQuery#animate with css-property left and the css-property zoom have ugly side effects. I had to remove the left-property and use `transform: scale`.
- Default caching in Android lead me to the conclusion, that my HTC desire was not doing any movement at all. But the issue was a missing "no-cache"-Header. I expected "must-revalidate" to be enough, but it wasn't
- I added viewporter.js, but the results are not so nice, yet.
Additionally the possible figures are now stored in the database (together with experience points). So it's possible to make difficult and simple figures now.
Today I also used the time to create 5 default figures.
5th day: CSS-Transformations, Maximum Players and FB Login
Today I made some optimizations concerning the css-transformations. Since I had to switch to transform: scale yesterday, I took today to make the app work in IE7-9/Opera and so on.
As of today there is a maximum limit of 15 players for each field. If the field is already full, a new one will be created and the player will join this one. Also I added a cronjob to kick inactive players after 5 minutes without any movement.
Finally: Facebook. Now one is also able to login by using Facebook. Adding the Facebook Connect button was easy, but I wanted that all the facebook javascript does not slow down the login.html-page. Thus I figured how to make the app work with redirect (keyword: oauth getLoginUrl).
Today the name SwarmFight is born. I created a small Logo, registered a Domain, a Twitter-Account and a Facebook-App-Namespace. The app is now working in Facebook [url]apps.facebook.com/swarmfight/[/url] and on the domain http://swarmfight.com. And even just with Twitter-Login! Awesome!
For the IPad I added the feature that one can swipe to move the character. This was what some testers did in first place, so I thought it is a nice thing to add this feature.
Since the name SwarmFight was clear now, I started to write about.html text for the app. All pages now include a Google Analytics tracking.
6th day: Power Ups, Chat and Shortcuts
Today is the day of Power Ups. Since the plain interaction of players is not enough to have fun in the game, I added power ups today.
The power ups include: * Shuffle: All players get a new color * Earthquake: All players are moved randomly * Duplicate: An item with the same color of the player is placed right behind the player. So the player has it easier to win!
The first two power ups have been pretty easy to implement. The 'Duplicate'-Power up was a bunch of work, since I had to add the entire items-system. Now not just players can be on the grid, but also items.
The entire power ups can be used with short cuts. Shuffle [S], Earthquake [E] and Duplicate [D].
Whenever one uses a power up, a global message for all players (on the grid) appears.
The chat works with the same global message system. Whenever a player presses the [T] key or the Chat-Button a text field for a message opens. If the player submits the message, the message appears for all players for 3 seconds.
7th day: Pickups, Site and Cleanup
Since today it's possible to pickup power ups on the grid. Those pickups are generated as soon as the field is generated. Whenever one wins, the user gains 2 of one of the pickups as reward. The player cannot have more then 99 of each power up.
I replaced viewporter.js with a simple script called AutoScale (now available here https://gist.github.com/1810322. It uses JSB (https://github.com/DracoBlue/js-behaviour) and does a simple transform: scale to the maximum screen size. So the app works nearly fullscreen on every device.
Another big task for today was the website. Even though it is very simple, it contains:
- the twitter-widget
- link to the facebook app
- an about page
- 3 screenshots
- a wide skyscraper ad
I decided to add the advertisement to the page and to the loading.html, to keep the hosting free for myself - if more players play the game :).
Today I took some more time to restructure the code a bit. A small bug in the FieldService has been resolved :)!
Conclusion
Now I have a game, which works in pretty much every browser and on lots of mobile devices (ipad, iphone and android phones). If you are interested in the technical parts of the app, I listed them on the about page: http://swarmfight.com/about.html#technical_details.
Additional tasks will be to package it up for apple's appstore (even though I think the mobile version is enough for most players, and it will be difficult to get it into the appstore). Same goes for the Android Market. But we will see.
No idea if anyone will play that game, but it was hell of fun to create it! So have fun: http://swarmfight.com!
Thanks for reading!
