A while back a colleague of me wondered whether it would be possible to build the old school snake game using radio-buttons. I accepted this challenge and bought enough food and water to last for a long cold winter. This is my story.
Well, let me start by telling you that the whole process of RadioSnake (yes, I gave it a name), was a smooth ride. I finished it in one night. Luckely, because all the provisions were gone. Programming does make one hungry doesn't it?
Anyway, lets start of by showing you a demo of what I created. Press p to start playing, WASD for movement.
I wrote RadioSnake as a jQuery plugin. It is actually quite some time ago when I wrote it, around the time jQuery 1.5 was just released. The plugin works just fine with current versions as well. I've tested it with 2.0.3.
Back when I wrote this I planned to use this example for a post on how to write a jQuery plugin. However, at this time there are so many great tutorials out there already, like here, and here. Therefore I'm not going to bother you with that. Instead, I'll just give you the code and explain how you could use the plugin. Keep in mind, that to really make a game out of this you'll probably want to extend the game with scores, extra levels and whatnot. Check the download below this article.
First, we need a div to act as out playing board:
<div id="snake"> </div>
Then we call the plugin on this div and set the options we want. Below is an example with all options explained.
speed: 100, // the speed, duh
boundaries: false, // whether the games starts with walls
invert: false, // invert radio state (off==wall||snake)
enable_mouse: true, // whether radiobuttons can be turned on/off with the mouse
use_checkboxes: false, // change radiobuttons to checkboxes
key_up: 87, // w
key_left: 65, // a
key_down: 83, // s
key_right: 68, // d
key_startpause: 80, // p
key_newgame: 78, // n