A game written entirely in HTML, CSS, and JavaScript without using canvas | Hacker News Reader

A game written entirely in HTML, CSS, and JavaScript without using canvas

couchware.ca

23 pointscdmckay15 comments

If you think that's good, check out http://www.youtube.com/watch?v=Ol3qQ4CEUTo (AVES Game Engine).

They benchmarked Canvas, and found that it was faster _not_ to use it for their engine.

Nice. However from a further vision perspective, canvas might wind up gaining 3d hardware support. Or it won't matter. idk.

It took me a while to figure out how it played, even with the instructions but once I got it I killed maybe 20 straight minutes. Pretty cool game, reminds me of Bust a Move combined with connect four.

I like the fact that it uses almost no CPU, even on this ancient Macbook.

Isn't this what we SHOULD be using Canvas for?

Probably they didn't use canvas for the same reason as Google (for their current Pac-Man logo game): DOM based renderer will work on more browsers.

Canvas emulation for Explorer is not very fast. This may not be a problem for chart-like applications, but when you want smooth animations, milliseconds add up.

Now, if you excuse me, I will shamelessly plug my recent canvas game (I don't support Explorer):

http://alteredqualia.com/cubeout/

Can I plug my canvas game too?

I just finished up a tetris clone last night:

http://kibabase.com/jstet.html

Great, I loved blockout as a kid. Spent a lot of time with my parents trying to beat each others high score. Brings back a lot of good memories.

Yep, I also remember Blockout fondly. Way more fun than Tetris, despite being much less popular.

Great. You got me fired for playing. I blame you.

Addictive. Still needs some help from frame-rate awareness. When a "slowdown" occures the game needs to be aware of it's processing slowdown and slow down the game fps to compensate otherwise things "jump".

About slowdowns. Which browser/OS do you use?

I know I have troubles on Firefox on Windows 7.

I do compensation for actual elapsed time, but unfortunately this doesn't help when setInterval fires too late (in FF I can get occasional "jump" frame with 30x usual duration, I suspect due to garbage collection [1]).

Chrome and Opera are much more reliable in their JS timing.

----

[1] You can check GC + animation test here:

http://hacks.mozilla.org/2010/01/javascript-speedups-in-fire...

FF (even version 3.6) performs pretty badly: I got 80-120 ms delay due to GC, Opera has 21ms, Chrome has 8 ms.

For my game it's even worse, normal frame can take 14 ms, garbage collected one 500 ms.

Hardly a game. I just got to level 3 scoring 3840 without doing anything - I just let it play on its own.

Very cool technology demo tho.

Oh no there's definitely some strategy and depth to the game. If you only played to level 3, for example, you probably didn't notice the game begins to significantly decrease your decision-making time. After a few attempts, I was able to get to level 12 with a score of 46920. I will say, since the game is pure HTML/CSS/JS, I opened Firebug and attempted to cheat by deleting some of the <div> elements that represent the blocks. But of course that only resulted in making those blocks invisible.

Anyway, as web developer interested in (but with no experience in) game development, it's certainly inspiring to see a game of this caliber made using only these technologies.

Haha yeah, unfortunately that won't work. There's an internal representation of the game board that needs to updated if you want to cheat like that :)

Yeah it is more of a tech demo in it's current form. It's based a much more complete game called Wezzle that we made using Java.

Reply on news.ycombinator.com