Helicopter Game using HTML5 (Canvas / font-face etc) | Hacker News Reader

Helicopter Game using HTML5 (Canvas / font-face etc)

arandomurl.com

170 pointsdaleharvey52 comments

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.

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.

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?

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.

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

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

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.

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!

You click and hold the mouse button to gain altitude

You release to descend.

Sounds like you aren't using the controls correctly. My first time up I just clicked once and my copter fells to a speedy death.

I realize that, that's what I've been doing. Maybe I'm just slow, and don't like action games.. the only games I've ever really liked are turn-based RPGs, strategy, and adventure.. so I'm probably not the target audience for this anyway.

I'm having the same problem. When I just tap the enter key, the copter shoots up into the ceiling. Way too quick to control.

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.

I think it's a little disconcerting that you basically have to keep the button held down as you start or you crash.

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

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.

For what it's worth, I've tried this in Safari 5 on my Mac, and Chrome on my linux box, and it is indeed the same speed...

Which browser are you using? The speed is vastly different for me when I play this in Chrome vs FireFox...

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

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

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

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

Your game crashed my FireFox, FYI.

Version 3.6.8 On Windows 7 64 bit

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

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

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/).

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

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/

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

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.

Nice!

I once had a go at making the same thing:

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

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...??)

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

obviously just swap 10 for your desired FPS

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

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.

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.

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.

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.

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

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

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

The instructions should say HOLD enter key, not PRESS.

Thank you are right, updated

722m :)

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

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

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

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

It works quite well under Opera 10.61.

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

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

Enter

for reference, my personal record: 693m

I beat you, 1017m

1106 :-)

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

Reply on news.ycombinator.com