I created this demo more or less by accident when prototyping some particle mechanics for a game. It is based on a particle system, and an acceleration map but more on that later. It reminds me quite a bit of simulations of galaxy formation or a lava lamp, it's really nice to watch.

Demo

Click the image to open the demo. In the demo, set the particles in motion by dragging with your mouse.

Mobile devices

This demo also works on Android including fullscreen (tested on a nexus one with 2.2), iPhone and iPad! Give it a try ;)

How it works

Each particle has a position and a velocity stored in a typed Float32Array (yes, they work on iOS). In addition to that there is an acceleration 'map' in the background. When you drag over the particle system, you initialize the acceleration map which sets the whole system in motion.

accelerationMap[particle.position] += particle.velocity*someFactor
particle.velocity += accelerationMap[particle.position];
particle.position += particle.velocity;
...

It's been well over a year since I first released JS WARS. I was playing with the idea of having a version that runs on mobile devices for quite a while now, but until recently the technology was not advanced enough to easily do it. With the release of iOS 4.2 there is a platform that is fast enough and has all the features that are needed to run JS WARS - So I did it.

Getting it

You can try JS WARS mobile under the following URL: http://29a.ch/jswarsmobile/.

Tested devices

• iPhone 4g with iOS 4.2
• iPad with iOS 4.2

Please report your success with other devices in the comments. If you don't have a device that can run it, you can still play the normal version.

Controls

You can control your ship with the joystick on the top left. Push and hold the laser button on the top right to fire your laser canon (infinite ammo). The second button allows you to fire missiles/nukes when you have any (ammo is limited).

Technology used

and now for some buzzwords...

• HTML5 canvas
• HTML5 offline capability
• Multitouch events
• mobile-bookmark-bubble

I'm actually quite impressed by the canvas performance of the tested devices, is this now hardware accelerated?

What's currently (2.2) wrong with Android

Until recently the canvas implementation of the android browser was pretty much unusable due to problems with the pixel density (1 css pixel -> 4 physical pixels). Those problems are solved now, and thanks to the jit the browser is fast enough to support JS WARS as well (faster than mobile safari it seems). The two things that are still missing hovever are multitouch and a way to treat a website like an app. I find it a bit confusing that iOS seems to be more friendly to webapps than android and I really hope the great engineers at google will catch up. Maybe 2.3 will do the trick already. I'll try it out as soon as there is an official release for the Nexus one (or I can get my hands on a Nexus S...).

Graphics

All the graphics in JS WARS were made by myself using open source software (gimp and blender). I have released a part of them under a creative commons license for you to reuse.

Source code

I will not publish the JS WARS mobile source code because it's a mess and I don't intend to clean it up nor do I want to be responsible if you permanently loose your sight because of it. I do however plan to write an article about the associated challenges that will include relevant code.
So if you haven't done so already subscribe to my news feed or follow me on twitter.

I was close to complaining that there was virtually nothing new in ubuntu 10.10. Well there was something new, it broke play it slowly. This should be fixed in 1.3.1. In addition to this I have fixed a bug that caused an exception when the mimetype of a file could not be detected.

I hope you like it. Feedback is appreciated!

Get it Now