I’ve started working on a version of PacMan for the Spidey Wall (which I blogged about recently). It’s already working pretty well as a web-app and you can play it on this site with the link below.
Click Here to Play Spidey Pacman
If you have a go at playing it please let me know by leaving a comment below – I’ve only tried it on an iPad and my laptop (chrome & safari) at present so let me know if there are problems on other devices. I’d also be interested on how far you get (tell me your high-scores!!!) – I haven’t managed to complete the level yet!
There are many quirks (e.g. there is actually only one level!, the game doesn’t end when all the dots are eaten!, the behaviour of the ghosts probably isn’t all that true to their proper behaviour – although I have tried using this guide, the scoring isn’t the same as the original, there’s no leader board, etc, etc.). Please let me know of any bugs you find though.
I envisage that ultimately it will run on a tablet or smart-phone and send data (over some wireless connection yet to be finalised) to the Spidey Wall. I expect that the Spidey Wall controller will respond to commands like – colour LEDs 47 to 65 with colour #55ab8a or similar. So the game logic will all be on the tablet/smart-phone and the Spidey Wall controller will just be a big display panel colouring the appropriate LEDs on the wall as you play the game.
Maybe in the end the tablet will not show the game display at all and just show a game-pad for setting direction and the score so that all the action occurs on the wall.
I’ve developed the code in CoffeeScript with a mix of techniques I’ve learned from using D3 on a couple of projects (mainly around creating an manipulating SVG on the fly). I really like that approach to creating quick web-apps – mainly because I find that classic HTML/CSS behaviour is essentially almost random and requires intense amounts of trial and error to get the effects you want. By contrast generating the UI on the fly is relatively straightforward as you can make calculations in code to control the exact placement of DOM elements as long as their positioning is absolute.
Actually in this case I’ve ended up with a canvas showing the backdrop to the game with SVG sprites overlaid on it which also works pretty well. And the code is relatively clean – you can see it here on github – although no doubt it could be improved significantly.