

Helicopter Game using HTML5 (Canvas / font-face etc) - daleharvey
http://arandomurl.com/2010/08/05/html5-helicopter.html

======
chunkyslink
Great game and great code.

daleharvey - your javascript is a pleasure to read sir. I'm trying to learn
js/canvas more and its good quality stuff like this that really helps.

Well done.

~~~
daleharvey
Thanks that is really nice to hear.

I have spent a long time writing some really big applications with javascript
and still find it such a strange language, every time I think I have found
"the style" I hit a reason why I shouldnt be doing it that way, luckily its
really fun at the same time.

~~~
heyadayo
You've got me curious: What type of big js applications do you spend that time
writing? Anything game related, or is this purely a hobby?

~~~
daleharvey
I was a cofounder of an online spreadsheet company funded by seedcamp, the ui
was entirely in javascript(15+kloc), and I have some chat clients + some other
things that arent complete.

The game stuff is purely a hobby (for now), they are quite fun to play and to
program, and I learn a lot from it.

------
charliepark
Well done. Have you considered submitting this to the 10K contest?
(<http://10k.aneventapart.com/>)

~~~
daleharvey
Thanks I hadnt noticed that contest, It should certainly be able to squeeze
into 10k

------
roofone
Fun game and great proof of concept, though the aerodynamics aren't very
realistic and whenever I've flown a helicopter through a cavern it's never
never seemed that quite that blocky.

Neat easter egg at the end though.

------
btw0
Shameless plug: also check out my "floor" game, it's written in processing.js.

<http://nuwa.madk.org/game/floor.html>

~~~
Empedocles99
Shameless indeed. Your game doesn't seem to work in firefox (or at all) from
what I can tell.

------
zavulon
You need to tweak the speed - this is completely unplayable on my Macbook with
4GB of RAM and an SSD hard drive. Copter crashes in a second before I can do
anything. But looks cool!

~~~
daleharvey
thats strange, its a fixed and low framerate and it isnt maxing any cpu so it
shouldnt really get any faster on a faster machine.

I have been told between this and pacman that I make the games a little fast,
but I do like them on the fast side.

~~~
teamonkey
Is there any technical reason for the 19fps framerate or is it just something
you used to balance the speed?

~~~
daleharvey
Yeh I started it at 30fps and it was nice and smooth, but as it got harder I
needed to slow it down, 19fps was the slowest that didnt look terrible, just
reminded me to fix up the code so I can speed up fps while slowing down the
play, it was running 30fps with no problems or lag.

------
gtjrossi
Nice! It's a bit fast, but fun. Coincidentally, I just finished my version
about a week or two ago. I used SVG, HTML5, CSS3-Fonts, etc. Check it out:

<http://www.jacobrossi.com/tech/helicopter/index.xhtml>

~~~
jbhelms
Your game crashed my FireFox, FYI.

Version 3.6.8 On Windows 7 64 bit

~~~
gtjrossi
I just tested it in 3.6.8 on Win 7). No crash for me. Though Firefox has a
hard time rendering it (~30FPS, or about 1/2 the frame rate of Chrome, IE9
Platform Preview 4, Safari, or Opera!). Try another browser perhaps ;-)

Also, if you have a lot of add-ons/plugins it could make it even slower (some
of these try to modify the page every time it changes).

If you get any error codes, I'd love to know the details! Thx

------
stuaxo
Holy fuck, that is difficult, played for a little bit and got 366.

~~~
eru
I got something similar, too. (Then I tried again and got something slightly
over 800m. The tunnel is getting smaller.)

If you like the concept, you should also have a look at Canabalt
(<http://adamatomic.com/canabalt/>).

------
thegingerbloke
Nice!

I once had a go at making the same thing:

<http://petegoodman.com/labs/js-canvas-copter/>

------
bitwize
My HTMLcopter goes schwaa schwaa schwaa schwaa schwaa...

Nifty game. Gravitational acceleration constant should be tweaked so my
HTMLcopter doesn't go CRASH because I wasn't ready for the game to start.
Great proof of concept nevertheless.

Here's one I wrote (but was "designed" by Shinji Kobayashi, a humorous
character of mine):

<http://www.parodycheck.net/shinji/cannon/>

~~~
Qz
I couldn't control it with the mouse reasonably at all, control seemed laggy
compared to enter key.

~~~
stcredzero
For some reason, I was able to control it with the mouse for 6 seconds, then
it became too laggy and also had to use enter.

------
shortformblog
This is addictive in the way Canabalt is. Well-played, sir.

------
j79
Fun game and impressive script!

Personally, the game was too fast (speed wise) in Chrome. However, FireFox and
Safari 5 played at a much more reasonable speed.

While, I was expecting the speed to be a bit slower in FireFox, I was curious
about the difference between Chrome and Safari (a V8 vs SquirrelFish
difference...??)

~~~
fungi
> javascript:alert(Heli.FPS=10);

obviously just swap 10 for your desired FPS

------
phreeza
I remember playing a game like this back in 2001 on my Palm. I think it was
called SFCave. Very addictive.

------
jws
For @font-face in canvas, I find that if I use the font on a page element, and
defer my drawing until onload() it works reliably. Not ideal, but workable.

------
frou_dh
I got a version of this helicopter game for my iPhone (iCopter) over a year
ago and I still play it. It's mysteriously addictive.

~~~
jokermatt999
The version I found for Android is called ThrottleCopter, if anyone else wants
to destroy their productivity. It appears to be a fairly faithful port of the
common flash version I've seen (blue helicopter, green cave), although with
better hit detection. My best so far is 23470.

------
Keyframe
Never thought I'd say this so soon, but this HTML5 game is too fast. Great
game/code though. Now we need a 3D tunnel version.

~~~
fungi
> javascript:alert(Heli.FPS=10);

------
edwardoka
This reminds me that I should really get my finger out and finish some of my
HTML5/Canvas experiments at some point.

------
malkia
Woohoo 410meters after 5 plays (probably not much).

The instructions should say HOLD enter key, not PRESS.

~~~
daleharvey
Thank you are right, updated

~~~
malkia
722m :)

------
w1ntermute
Your games don't load in Chromium from the dev channel, could you please fix
that?

~~~
daleharvey
I will check it out. strange that any of the feature tests would be failing.

~~~
w1ntermute
I'm on Linux btw, that might be part of it too.

------
simondo
Seems I do much better if I hum the Airwolf theme tune. How does that work?

------
Pistos2
It works quite well under Opera 10.61.

------
Tichy
Can't see it on my Nexus One. Too bad

------
spoiledtechie
what are the keys? it didn't seem to work with the arrows???

~~~
adammichaelc
Enter

------
morphir
for reference, my personal record: 693m

~~~
lubos
I beat you, 1017m

~~~
graphene
1106 :-)

My productivity, on the other hand, seems to have gone firmly into negative
territory...

