HTML 5 Canvas game | Hacker News Reader

HTML 5 Canvas game

benjoffe.com

115 pointsmyth_drannon34 comments

Nicely done!

The first thing I notice is that unlike 90%+ of real-time browser-based games (flash or javascript), it doesn't stupidly burn 100% CPU for no reason at all. It takes close to 0%!

You'd probably get the same if you wrote a slow paced, event based game in Flash. Dirty rects means that even though Flash rendering is called at x fps, it can be skipped if nothing's changed (at least, as far as I understand it, my games always change each frame).

Generally if a game has focus it should burn 100% CPU in order to update as smoothly as possible, but the real problem is games that still update and consume CPU like that when not in focus.

But most of those games that burn 100% CPU still burn 100% CPU even if the game is paused with a static pause screen and the container window is scrolled past the flash area and the browser window doesn't have focus and is totally obscured.

So it's obviously not a deliberate tradeoff.

Wow, that's one of the first JavaScript games that played just like a normal game, and it didn't feel cheesy like pong. No speed or control issues to report. Bright, clear, 3D rendering.

Of course, I, like many others, am biased for Tetris.

Oh, and I realized that you got to skip the conditions for turning at the walls, since it wraps around instead. Still hard, I bet.

Can I plug my little javascript version of asteroids? http://users.tpg.com.au/_dp//dave_asteroids.html

I've tried to make it not cheesy and nice smooth gameplay

Sometimes when it goes to the next level, an asteroid materializes right on top of me, which seems a bit unsporting.

I recall that happening in the original game, too. I could be wrong.

EDIT: "You have died of dysentary." That made me smile.

Same thing happens when you die sometimes, which is a real pain. It's on my list of things to do, I'm just trying to think of a good way to handle it (gameplay wise)

Not only is it technically impressive, it's actually fun too! I'm not a gamer (not even much of a casual gamer) so this may sound like a dumb Q: but are such variations of Tetris common?

It took me a while to realize that my default browser, Safari 3.2.1, doesn't support HTML 5 Canvas. I'm seeing a bowl and a logo. Graceful degradation, not so much.

Safari most certainly does support HTML5 Canvas. The canvas was originally introduced by Apple in 2004. (http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#0...)

You're definitely right. I'm not so familiar with Canvas at all, so I assumed that since it didn't render, it wasn't supported. My main point was about the graceful degradation.

Huh? You're completely wrong. How did this entry get 4 points?!

http://img24.imageshack.us/img24/2830/picture32s.png

Doesn't work for me:

http://screencast.com/t/gWyJToSTl

Same thing on Safari 3.2.1 here. Works fine with WebKit, though.

It's a proof of concept, and a darn good one, graceful degradation is unneeded.

People speak in binary on support for CANVAS, SVG, CSS etc -- "this browser has CANVAS support", "that browser doesn't have CANVAS support".

They should actually be speaking of "what level of CANVAS support", because there are different implementations among different browser brands, versions, and possibly operating systems. Whenever there's a common spec with multiple implementations, some solid conformance testing is vital before starting development.

(I'm not too concerned about the lack of "graceful degradation" here, because it's more of an enthusiast piece, "look what I can code", rather than something solid to deploy out to the general public. Different priorities.)

jd/adobe

Seems to be broken in Chrome.

Do the high scores not work? Or did no-one else finish a game?

I got on the highscore list for garbage, so it seems to be working.

hmm.. Can you see anyone else's name on their though? I see my name on Traditional - but the other 2 spots on that are blank - and all 3 spots on Time Attack and Garbage are saying "Empty"

I guess you are right. I don't see any scores on there at all.

The opera widget has been around for quite a while.

His other demos seem to run pretty well too (using Flock): http://www.benjoffe.com/code/tools/functions3d/ http://www.benjoffe.com/code/demos/canvascape/ http://www.benjoffe.com/code/toys/spirograph/

This is great, but why Canvas? SVG/VML would be a more natural choice - JavaScript fits better with a DOM-based API where you don't have to repaint everything.

Cool, works great in FF3 on Ubuntu.

The only thing is that pressing up and down to rotate the tetromino moved the page up and down as well.

Is it just me, or does the "bin" seem MUCH shallower than an official Tetris game?

Otherwise, pretty impressive for not using Flash.

Anyone who does a game in Javascript rocks...so does this one. Amazing...I didn't even know you could do this...

Doesn't work in Chrome, but extra points for being the first Canvas thing here in a few weeks to support IE!

I'm thinking no one did too well. I got the high score of "2". (Unless that's broken.)

The controls should support holding down L/R instead of tapping only.

It does for me (Safari 3 + Webkit nightly)

It does support it. Using Firefox. It's perfect.

Only issue I had is if the window is sized too small to require a scrollbar, then pressing down/up actually scrolls the page, as well as controlling the game.

Perhaps need to cancel default action in the key handler...

I'm surprised at how quickly it runs in Firefox.

Reply on news.ycombinator.com