A New Job
So just imagine going into work on a Monday morning. You’re immediately called into an unscheduled meeting (which in my experience is never a good thing). You’re informed that due to budgetary concerns you’re being laid off.
However a similiar position at another company has been generously arranged for you. It’s just a matter of you accepting. And as tempting as it is for you to sit a home all day and collect six months worth of employment insurance, you accept.
And that’s how I got a new job.
In case anybody’s wondering: This new position entails me to use the same set of technologies that I’m familiar with (PHP, Javascript, HTML, Ajax). The new workplace is even the same type of workplace environment (even down to the machines itself). So really it just feels like I’m been assigned to a different development team more than anything else.
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.
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.
Happy Birthday To Me
I turn another year older today.
To celebrate I implemented showing an animated Ajax updating gif while waiting for an Ajax request to finish:
var xmlHttp = <a new instance of an XHR> xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { // do your ajax stuff here } else { // load the updating gif here } } }
The Designer thought it looked pretty.
I would have preferred the day off but I’ll take what I can get.