A new day, and a new post on job application. So this time instead of asking a snippet, I was actually asked to deliver some sort of a full application. Not sure why this was required, but I had fun creating them nonetheless. Though I would say I am not really a fan of creating visual stuff though (oh the crappy animation nearly killed me).
First of everything is the super famous Conway’s Game of Life. I have heard about this game for quite some time, and finally got the time to understand how it works just a few years ago. This is not my first time doing it, however, the last time was done in clojure for 4clojure. Particularly, for this problem. Now after about 4-5 years, the thing looks like some weird wizardry craft to me.
Anyway, since I was asked to deliver a working version, and very much the only usable interface I can build is via web, so naturally I chose the web version. However, I took some time to fix the presentation to match this game titled Parable of the Polygons by vi hart and nicky case. However, considering I did it in a day, and my lack of sense in aesthetics, my version of Game of Life wasn’t even half as good looking. I should probably spend some time polishing it when I find some time.
I suppose I should include some sort of documentation here for the game should anyone gets interested in applying it in their own site. The script itself is designed to be embeddable. Firstly the pre-requisite, it requires the latest version of jQuery and Underscore, that probably also limits the choice of Internet browser as well.
Then one would need to include the script and run it as follows
<div id="sandbox"></div>
<script src="https://code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script src="http://underscorejs.org/underscore.js" type="text/javascript"></script>
<script src="game-of-life.js" type="text/javascript"></script>
<script type="text/javascript">
(function() { $('#sandbox').game_of_life({
width: 20, // column size
height: 20, // row size
init: [], // an array of initial points to be checked, eg. [[0, 0], [0, 1]]
evolve: true, // show the evolve control button
randomize: true, // show the randomize control button
clear: true, // show the clear button
automate: true, // show the automate button
disabled: true, // if set to true, user cannot play with it
reset: false // re-initiate the board with the points specified in init option above
}); })()
</script>
In order to host more than one board in a page, make sure to choose unique prefix value. All other options are actually optional, so it is possible to just call $(selector).game_of_life(). The code is hosted at github, and licensed under WTFPL, feel free to fork.
The other game I was asked to submit, is a clone of 2048 originally made by Gabriele Cirulli. I wanted to present it somehow like the Game of Life game as above, however I couldn’t find a way to write a story that is half as interesting for that game (not forgetting the story for Game of Life was badly planned and hance badly written). Anyway, I consider completing the game a major achievement already as that was really my first time flying stuff here and there doing animation that really serves some purpose.
Unlike the Game of Life, as the game actually captures keydown event, so it was not designed to have multiple instances running in a page. However, it was still softcoded enough to be useful, for instance one can cheat with a larger board with more than 4 * 4 grids. While most of the CSS stuff was already being taken care of, but the webmaster would probably want to do some manual adjustment here and there.
<div id="game"></div>
<script src="https://code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script src="http://underscorejs.org/underscore.js" type="text/javascript"></script>
<script src="2048.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#game').game_2048({
row: 4, // the number of rows
column: 4, // the number of columns
size: 100, // the size of each grid, in pixels
margin: 10 // the margin between each grid, in pixels
})
})
</script>
Just like the Game of Life above, the options are optional, and the defaults are shown as above. In order to run it, the same pre-requisite applies, and that means users have limited choice of Internet browsers. Feel free to clone the repository here, and the code itself is also licensed under WTFPL.
Pretty much it for now I suppose, as mentioned I would probably keep polishing them when I find some time during the weekend before submitting them.
