Welcome to the Javascript Gunner page. This little script that I wrote is an example of the kind of thing that can be done with the javascript <canvas> tag and a little imagination. Why should your drawings be confined to the <canvas> tag when the <canvas> tags themselves can be moved around the page?

This effect is not compatible with Internet Explorer!! Download a real browser if you want to see it. It’s been tested on Firefox and Safari. It cannot work on IE because it depends on the <canvas> tag and fixed element positioning, which IE does not support.

What’s happening?

Each gunner moves around the perimeter of the web page and fires bullets towards your mouse pointer. That’s it. There’s no game to it. It’s just a demonstration. But that doesn’t mean you can’t have a little fun with it! If you leave your mouse cursor perfectly still, every bullet will hit it.

So let’s play!

Be careful. It’s very easy to overload your browser with too many gunners.

The Code

You are more than welcome to take a look at gunner.js (12 KiB), download it, and use it on your own website.