Pete Goodman Web developer

Labs - JS Copter with Javascript and Canvas

Wednesday 21st January 2009, 08:57

As a big fan of both the original flash copter game and the recent iphone conversion, I decided to try to recreate the game using Javascript and the canvas element. A few evenings of tinkering later, I've managed to come up with this:

Click anywhere in the game to start. Hold the mouse button down to rise, let go to fall.

To play this game you need to use a browser that supports the canvas element.

The game is generated by this javascript file and is initialised by the javascript call below:


// initialise the copter
    var options = {
	copter : {
            height : 15,
            width : 30
        },
        canvas : {
            height : 300,
            width : 500,
            refreshRate : 20
        }
    }
    
    jsCopter.init("jscopter", "jscopter-container", options);

The options variable here contains a list of potential options that you can set to customise the game - look at the top of the javascript file to see a full list. The initialisation call takes three parameters, the id of the new copter canvas element, the id of the html element to create the canvas in, and the options to initialise the game with.

It's not amazing; there are plenty of speed/optimisation issues, some code fudges, and the hit detection isn't very good. I haven't spent too long thinking up the game logic either, the floor and ceiling could certainly be improved. But it's a proof of concept and an interesting display of the possibilities (and limitations) of Canvas.

Comments

  1. This is brill! Well done! But its impossible, i just crashed 5 times!
    Added on Saturday 24th January 2009, 22:28 by Hannah
  2. Awesome work Pete. I just scored 848 what do I win?
    Added on Sunday 17th May 2009, 03:46 by Joe Wheeler
  3. Hi,
    I'm doing a school IT project and wondering if I could imbed this in a webpage. The page is not going up on the internet. I'm starting to learn JavaScript, but don't know anything about canvas. Thanks.
    Added on Saturday 22nd August 2009, 04:35 by Tim
  4. Yep, help yourself to anything you find on this site. Enjoy...
    Added on Saturday 29th August 2009, 09:16 by Pete G

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.