Play Demo (Requires Firefox 1.5)

NS-Tower in a Canvas tag

After reading about the new HTML Canvas tag and seeing some ridiculous demos like CanvasScape, I decided to try my hand at a tribute to one of my favorite games, NS-Tower. NS-Tower is a relatively simple platform jumping game that dates from around 1996. To my knowledge, this is the most complete reengineering of an existing game in HTML/Javascript to date. Of course, if Nagi-P Software objects to this, I'm happy to take it down.

My implementation is nearly identical to the Mac/Windows application -- the graphics and physics are all identical, since they're based on a decompilation of the Java version of NS-Tower. The main differences are a lack of support for different platform types: springs, left/right, and up/down, and difficulty levels. I'm particularly curious how NS-Tower generates platforms for the Easy, Medium and Hard difficulties. Of course, if the folks at Nagi-P don't like my tribute, I'm perfectly happy to take it down.

The HTML Canvas provided all the functionality I needed (images and colored rectangles), so most of the work lay in getting the physics and feedback just right. The game runs fairly smoothly at 20 FPS in Firefox on my laptop. There's occasionally some lag while scrolling, but I'm afraid this is unavoidable, since the entire canvas is being redrawn each frame. There was one particularly annoying bug in Firefox's canvas: transparent GIFs and 8-bit PNGs are garbled when drawn to a canvas. 24-bit PNGs seem to work just fine, though.

I tried using Google's ExplorerCanvas to port this game to IE, but the results were pretty poor. Apparently Firefox and IE use different mechanisms to track keystrokes, and I'm not enough of a Javascript programmer to know how to make my scripts work in both. Even with that aside, I only got about 2-3 FPS in IE. No doubt this will improve, but it's not quite there yet.

TODO
  1. PAUSE
  2. Make death happen at the correct time
  3. Let the guy fall through 32 pixel holes
  4. Add floor/jump count
  5. Animated/correctly-facing guy
  6. Walls on the side
  7. Only draw platforms/power bar on change
  8. Mimic NS-Tower's jump power
  9. Better platform placement
  10. Mimic NS-Tower's floor spacing
  11. Reduce calls to onBlock() (partial)
  12. Figure out what's going on with transparency
  13. Backdrop (parallax)
  14. Mimic the rest of NS-Tower's interface
  15. Signs that you've died or paused
  16. Try Google's IE Canvas

Please leave comments! It's what makes writing worthwhile.

comments powered by Disqus