Javascript Snake
I made a Javascript version of that ubiquitous snake game. Why? Well certainly not because the world is lacking of Javascript based Snake games. I came across a copious amount of free time at work today and feeling that I had to code something while at work I figure a snake game would be straight forward(ish).
Displaying The Snake:
The basic premise is the following grid (where yellow represents the snake and green represents the snake head):
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
| 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
To appear to move the snake you manipulate the head (27) and tail (22) cells by changing its colour. For example to move up colour cells 17, 22, and 27 green, white, and yellow respectively. I’m more than sure there’s a name for this kind of ‘illusion’.
Changing the colour is as simple as changing the cell’s background-color property.
Surprisingly the biggest hurdle that I had to overcome was coming up with the HTML to make the grid. I tried using a bunch of <div>s and aligning them with float:right but of course I couldn’t get that to work across browsers. The Designer helpfully suggested that I just use a good old fashioned <table> and lo and behold that worked beautifully!
Moving The Snake:
The snake’s cell numbers are stored internally in a deque. When the snake moves push the new head and pop the old tail.
get new head position
if new head position is the wall or the snake itself
end the game
else
if new head position is food
place food in a new position
grow the snake
update the score
else
remove the tail from the snake deque
add the new head position to the snake deque
Determining The New Head Position:
The new head position is determined by the current direction of the snake. For example in the grid above the new head positions would be 17, 28, and 37 for up, right, and down respectively. Note that left is an invalid direction. The current direction is controlled by whatever arrow the user presses during the game. Of course you want to check if whatever the user presses is a valid direction.
Anyways… play the game. Let me know what you think…
Music Database
How awesome is JQuery’s Ajax and XML parsing functions? It helped me implement the basics for my ajaxish music database application all during my lunch break today at work. I’ve been putting off creating it mainly because I didn’t want to deal with writing the tedious Ajax and XML parsing code that’s necessary for Ajax stuff.
And when I say ‘basics’ I mean everything except for the interface (ie. the HTML / CSS part). I was trying to go for the Homebrew style of OS X’s Terminal application but since I’m not much of a designer it was difficult getting that exact look. Also note that ‘basics’ really means ‘not production ready’ but since this is just a personal project kind of thing what do I care how polished things are.
What I Get For Accomidating Firefox On OS X Keyboard Users
I found this blog post about how to get Firefox in OS X to recognize tabindex:
I just spent the better part of an hour trying to get tabindex to work
under Firefox/Mac OS X.The solution lies not in Firefox, but in the Mac OS X preferences.
Apple Menu > System Preferences > Keyboard and Mouse >
Keyboard Shortcutsand under “Full Keyboard Access” choose “All controls”.
Sweet lord….
Now in the first line if you replace ‘an hour’ with ‘the afternoon’ then you’ll get an accurate picture on how I spent my afternoon today.
Sweet lord indeed…
How Truth Tables Ruined My Afternoon
This piece of code was killing me this afternoon:
$DB_ERROR = -1; $API_ERROR = -2; $UI_ERROR = -3; $errorCodes = array($DB_ERROR, $API_ERROR, $UI_ERROR); $returnCode = TRUE; $isError = in_array($returnCode, $errorCodes); print($isError);
I was expecting $isError to be FALSE but it kept turning up as TRUE. I just couldn’t understand it. That is until I read the online docs:
When converting to boolean, the following values are considered FALSE:
* the boolean FALSE itself
* the integer 0 (zero)
* the float 0.0 (zero)
* the empty string, and the string “0″
* an array with zero elements
* an object with zero member variables (PHP 4 only)
* the special type NULL (including unset variables)
* SimpleXML objects created from empty tagsEvery other value is considered TRUE (including any resource).
Do you see what I was assuming here? I considered TRUE to be a 1 and FALSE to be everything but a 1. I guess I’m just so used to those truth tables with 1 representing true (thank you very much Discrete Mathematics For Computer Science). But hey you’ve gotta work with whatever the language gives you.
At first I thought about converting $returnCode to an integer before I make that in_array comparison but then after reading more of the online docs I found something cleaner:
$isError = in_array($returnCode, $errorCodes, TRUE);
That extra TRUE checks the types as well as the values.
Five Days In The Hospital
Last week I spent 5 days in the hospital. I got into this bicycle accident (sadly no vehicle was involved. Somehow I thought this would make the accident more noble. Or at least less embarrassing). I hit a sidewalk curb and woke up in the ambulance. And in between hitting that sidewalk curb and waking up in the ambulance I manged to fracture 5 ribs and dislocate my shoulder.
So… some words of advice to all my non existent readers out there. First off: If you’re riding your bicycle down the steepest bridge in your city make sure to slow down. Even if you have a green light at the bottom of the bridge. Even if you’ve made that downhill trip a million times before. And especially if you’re rushing to work because you can wait to write some kick ass code. Just remember… slow down!
Secondly… Use JQuery wherever possible. It rocks.