“Tap Trap” is a puzzle game written in Javascript. It was born after a lengthy battle with an addiction to the puzzle game Same GNOME. As a standard client application Same GNOME (distributed with the Gnome desktop environment) is great but I wanted a version that could be played online – complete with public high score tables and taking advantage of the global accessibility that the internet provides.
I’d also been meaning to really get to grips with Javascript for a while and so Tap Trap seemed a good project to go with. Yes, flash would arguably be a more suited medium for such a game but the additional challenge of twisting divs and imgs into a playable game was too tempting.
Game rules
Tap Trap uses exactly the same rules, board size and scoring system as a standard Same GNOME game. As a nod to Same GNOME, an optional tileset is selectable in the options screen that looks strangely familiar.
Technical
The game is written using Javascript (on top of XHTML) on the client side, with a server component written in PHP which handles the high scores etc.
Every player is initially assigned a UUID which is then sent with each subsequent request to the server. The UUID and other game options (such as player name) are stored in a local ‘data store’ (which packs multiple key/value pairs into a single cookie).
At the end of a game, the player’s score is sent to the server and is logged in the high score table. To avoid a player cheating during this phase (by manually constructing an end-of-game request), each game is initiated by retrieving a unique game key from the server which acts as a seed to construct the board layout. During the score logging phase, the game sends the unique game key as well as a list of moves the player performed. As the board can be reconstructed from the game key, it is then possible for the server to validate the game, based on the board and the moves submitted, and to independently calculate the player’s score.
The only way of cheating that I can come up with would be to write a program to solve a given board based on a game key. Of course, anyone with this much time on their hands is welcome to their top spot in the high score table!
The client uses AJAX (I must say I despise this term and the hype surrounding it but if you can’t beat them…) to communicate with the server so only one XHTML page is ever loaded.
UTF-8 is used in all communication between the client and server, as well as for all data storage areas. Effectively, this means the high-score table can be litered with filth in a language I cannot hope to understand.
Nice to haves
The following items would be nice to have included but aren’t at the moment:
Bookmarkable URL with player UUID embedded to allow an ‘account’ to be accessed from any machine
More game stats – more high scores shown (more than top 30), world and player averages etc.
Variable sized boards (with increased number of colours)
Instructions!
Browser compatibility
As of version 1.0, Tap Trap has been tested and found working on the following web browsers:
Internet Explorer 5.5 / 6.0 / 7.0 RC1
Mozilla Firefox 1.0 / 1.5
Opera 8.0 / 9.0
Safari 2.0
This is not a definitive list. If you find any bugs or issues with a particular web browser, please let me know.
Current issues mainly involve non-Mozilla based browsers which seem to impose an artificial limit to GIF animation speeds (minimum 0.1s/frame) rather than respecting the files requested timings. This doesn’t matter to gameplay but it does make the tile ‘spin’ animations a little more choppy on these browsers.
Source code
The Javascript file used in the game is a heavily compressed collation of the actual human readable source files. A combination of the Dojo compressor and Dean Edward’s packer give a net compression of around 500% which should make things more bearable on a dialup connection.
Tap Trap
Play Tap Trap
Tap Trap can be played here.
History
“Tap Trap” is a puzzle game written in Javascript. It was born after a lengthy battle with an addiction to the puzzle game Same GNOME. As a standard client application Same GNOME (distributed with the Gnome desktop environment) is great but I wanted a version that could be played online – complete with public high score tables and taking advantage of the global accessibility that the internet provides.
I’d also been meaning to really get to grips with Javascript for a while and so Tap Trap seemed a good project to go with. Yes, flash would arguably be a more suited medium for such a game but the additional challenge of twisting divs and imgs into a playable game was too tempting.
Game rules
Tap Trap uses exactly the same rules, board size and scoring system as a standard Same GNOME game. As a nod to Same GNOME, an optional tileset is selectable in the options screen that looks strangely familiar.
Technical
The game is written using Javascript (on top of XHTML) on the client side, with a server component written in PHP which handles the high scores etc.
Every player is initially assigned a UUID which is then sent with each subsequent request to the server. The UUID and other game options (such as player name) are stored in a local ‘data store’ (which packs multiple key/value pairs into a single cookie).
At the end of a game, the player’s score is sent to the server and is logged in the high score table. To avoid a player cheating during this phase (by manually constructing an end-of-game request), each game is initiated by retrieving a unique game key from the server which acts as a seed to construct the board layout. During the score logging phase, the game sends the unique game key as well as a list of moves the player performed. As the board can be reconstructed from the game key, it is then possible for the server to validate the game, based on the board and the moves submitted, and to independently calculate the player’s score.
The only way of cheating that I can come up with would be to write a program to solve a given board based on a game key. Of course, anyone with this much time on their hands is welcome to their top spot in the high score table!
The client uses AJAX (I must say I despise this term and the hype surrounding it but if you can’t beat them…) to communicate with the server so only one XHTML page is ever loaded.
UTF-8 is used in all communication between the client and server, as well as for all data storage areas. Effectively, this means the high-score table can be litered with filth in a language I cannot hope to understand.
Nice to haves
The following items would be nice to have included but aren’t at the moment:
Browser compatibility
As of version 1.0, Tap Trap has been tested and found working on the following web browsers:
This is not a definitive list. If you find any bugs or issues with a particular web browser, please let me know.
Current issues mainly involve non-Mozilla based browsers which seem to impose an artificial limit to GIF animation speeds (minimum 0.1s/frame) rather than respecting the files requested timings. This doesn’t matter to gameplay but it does make the tile ‘spin’ animations a little more choppy on these browsers.
Source code
The Javascript file used in the game is a heavily compressed collation of the actual human readable source files. A combination of the Dojo compressor and Dean Edward’s packer give a net compression of around 500% which should make things more bearable on a dialup connection.
The client side parts of the game (XHTML, CSS, Javascript and graphics) are released under the Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.
I hope that maybe someone, somewhere may find something of interest.
Download
Tap Trap 1.1 client source code
Tap Trap 1.0 client source code
Changelog
1.1
1.0