Fellow Yahoo Matt Hackett took a leaf out of Jacob Seidelin’s book and started converting old school arcade games to JavaScript. Instead of using Canvas his only “non JavaScript” solution is playing the music with Scott Schiller’s Sound Manager (which, as we know, uses Flash under the hood).
You can come down with 8 bit shoot-em-up fever by clicking the screenshot.
Matt also shows you what the score is and give some more game info on his blog.
Andrew Wooldridge created CanvasQuest with the idea of creating a simple roguelike game. It has some interesting features like map loading, and uses graphics to render the text via sprites.
It uses the canvas element to do most of the rendering and should work in both FF2, FF3, Opera(9.27 and beta) and Safari 3.1.1. There are a few glitches in Safari in the kart sprites, but other than that it should be playable. Also, if you’re using WebKit nightly builds, make sure you’re using the latest, as some of the recent ones had some canvas problems. I haven’t even considered getting IE support, sorry.
The (minified) code weighs in at about 11 Kb, but unlike the Mario game from last month, this one uses several external image files. This was more a test of how smooth I could get a game like this to feel, anyway, so filesize wasn’t an issue. I think it runs pretty ok, though.
There are a couple of rendering settings you can play with. “Quality” controls how many vertical lines are rendered, “Screen scale” controls the size of the screen (duh). Both trade visual appearance for performance.
Ever wanted to create your own isometric pixel picture, but didn’t know what the word isometric meant? Well, now you can fulfil your wildest dreams with Cubescape!
That is the headline for Cubescape, a site that released a new jQuery based front end that lets you drop the cubes!
Perfect for a Friday, go ahead and get dropping on this very clean interface.
Piotr Dachtera took his 64pola.pl, and created a scalable version using Comet. Dylan reports it as “a Jetty-powered Comet app that uses dojox.cometd on the client-side. It’s a solid implementation that shows chess moves in real-time, and to date is the best all-around Comet game I’ve seen that is live to the world.”
Mathieu Nouzareth then commented that Cafe.com, a Flash based gaming platform also uses Jetty and Comet techniques (compared to AMF etc).
Ben and I gave a presentation at JavaOne on what’s new with Ajax. Since this was JavaOne, we skewed a little more than we normally would to Java topics, and one of them was using the new Java Plugin, that has great new features such as being able to take a running applet out of the web page, and having it continue to live after shutting down the browser. Java is running out of process here, which also helps the “Java crashing the entire browser” problem.
Anyway, back to our demo. For some context, last year at JavaOne had us performing Guitar Hero on stage, so we knew that we had to use a gaming console in some way. This year it had to be the Wii, but instead of using the console, we decided to just use the controllers.
Wouldn’t it be cool to control a Web page using the controllers? We thought so, and we set to it. You can talk to the Wiimotes via Bluetooth, so we needed a stack that would allow us to do just that. Java has a bluetooth stack. We could get an applet to talk to the Java stack. Hmm.
It actually took quite some time to test out the various stacks out there. In the end we went with a native system called Wiiuse that a lot of Wii hackers use. There is a wrapper library called Wiiusej that gave us exactly what we needed.
A quick test later and we had an application that was talking between the remote and the program. It turns out that the main controller sees a series of IR lights that are in the Wii sensor bar, and this allows you to simulate the system with any decent IR source. In the presentation room the big lights that shine on stage were strong enough to act as a sensor bar so we won’t even have to use it. We can just point out to the crowd.
Anyway, back to the application. We then wrote a Java class that acts as a state machine for what the remote is doing. It understands the movements, which buttons are pushed, how fast you are moving the device. With this data we could build a simple darts game. With the state machine Java code, and an Applet wrapper that exposed the information, we were ready to get to the Ajax side of the house.
We painted a darts board onto the screen and then had JavaScript start polling the Applet for information via JSObject (As simple as: document.nameofapplet.pollmethod()). This turned out to be more stable than talking the other way, even though it meant we were polling instead of being entirely event driven. When the JavaScript code polled the applet it would pass back a data structure with the data for the coordinates of the remote, and whether the dart had been fired (button A to fire, button B to reload). We would move the dart image on the screen as you move the remote, and when fired we kicked off an animation to fire the dart at the board.
At first, it was all too simple. You setup the shot and it would get the right area every time. Not a fun game. We then decided to add some simple physics to the Ajax game. We took into account the velocity of the throw (if weak it would fall down) and how straight your shot was. If you wiggle around, the dart will not be accurate.
Anyway, this was a lot of fun, and shows that as much as we mock Java applets, if we forget about using them as fancy blink tags, and instead think of them as more extension points, maybe there is life for them.
The video below shows you a demo of the application, the source code with an explanation, and more details.
XSketch is “a multiplayer word sketch game. It is programmed in Adobe Flash, Java, Ajax, and GWT. Gameplay is similar to Pictionary where you sketch a picture with the goal of having other players guess your word and vice versa.”
Ryan Dewsbury creator this game, which he adds to his collection of GPokr and KDice.
One of the examples shown is a pretty cool Tetris game:
As Orto simulates the multithreaded nature of Java with yields and timeouts this is of course hard-core simulation (read: hack), but the benefit are that you could Java Games on non-JS devices, like the iPhone.
Orto also seems to try to simulate the Java UI conventions, thus making it easy to convert existing applications (to a certain degree as there is no equivalent in HTML for the richness of Java UIs unless you build them yourself as libraries ike Dojo or Quoxdoo did).
Sometimes you want Monday to be a Friday, so we have ProtoRPG, a role playing game written by Pierre Chassaing in JavaScript using Prototype and Script.aculo.us.
Walk around, add to your inventory, and feel like you are playing your first RPG many moons ago, on a Friday.
Jacob Seidelin is doing great work, and for something fun, he build a piece of Super Mario in just 14KB of JavaScript:
Here's an experiment in keepings things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.
We also have MIDI music embedded as base64-encoded data: URI's. No music for IE, though, and it seems all the other browsers each have different, minor problems with it, but it sort of works.
In this chapter, we took the languages of CSS and JavaScript well beyond the tasks for which they were intended?the presentation and basic behavior of HTML documents -- and used them to create an interactive 3D maze.
First, we looked at the basic principles by which triangles can be displayed using only CSS. We then extended that concept to render a perspective view, creating the illusion of three dimensions. Next, we established a convention for specifying floor plan data, and for dynamically translating that data into a perspective view. By adding listeners for user events, we successfully created an interactive maze that can be completely customized and extended. To top things off, we added some usability aids, such as a top-down map, and accessibility aids including keyboard navigation and captions.
While I haven't delved into the details of every method that comprises the game script (there are plenty of comments, so I'll leave that for you to pursue in your own time), I hope this chapter has convinced you to look at JavaScript in a new light. The possibilities really are only limited by your imagination!
