6 ms·

HTML 5 Asteroids

59 points by gr366 16y ago

ck2 16y ago
Oh heck, there goes my next hour. Wow that's fantastic. Now someone make Missile Command. Pegs my CPU though (Firefox and Chrome) Open source too: http://github.com/dmcinnes/HTML5-Asteroids http://github.com/dmcinnes/HTML5-Asteroids update: I tried a few flash versions on the web to compare sorry to say they use a fraction of the CPU, at least under Flash 10.1rc4
- jrockway 16y ago
  Pegs my CPU though (Firefox and Chrome) I assume this is to intentionally maximize the framerate. ("renice" is your friend if you have something more important to do in the background.)
- pavs 16y ago
  Chrome / Mac didn't see any high CPU usage.
buster 16y ago
It shows very good why it's not ready to ditch Flash completely. I mean.. that's asteroids, i have a Core2Duo, 4GB RAM, 1024MB graphicscard und the asteroids are not smooth, they are flickering a little...
- billswift 16y ago
  I have a two and a half year old AthlonX2 with only 256 MB RAM and have no problems with it. Plus I am on dial-up, and this loads much faster than Flash.
  - buster 16y ago
    I mean the animations are not smooth, it's probably the algorithm that rotates the asteroids, but well.. if noone can see that, i may be more sensitive about it, but it was the first thing i noticed.
deleted 16y ago
[deleted]
philwelch 16y ago
On a Mac Core 2 Duo MacBook with Safari, it stays below 45% CPU and is smooth as silk. This is actually better performance than Flash.
- ilike 16y ago
  I would like to know what Flash game are you comparing this simple game with.
  - maukdaddy 16y ago
    Doesn't matter. ALL flash pegs my MacBook Pro CPU >50%, most of the time > 90%
    - joubert 16y ago
      yeah, even ads!
ZeroGravitas 16y ago
Surely SVG makes more sense for vector games? They should also try to recreate the arcade experience with the painted backgrounds, like from here: http://mameworld.info/mrdo/mame_artwork/astdelux.png http://mameworld.info/mrdo/mame_artwork/astdelux.png
- pohl 16y ago
  Honest question here... Why would SVG make more sense than canvas? Doesn't Canvas use a similar vector drawing model that you find in Postscript, Java2D and SVG? It seems to me that the main difference between the two is that one is an API and another is markup. So what makes SVG more suited for vector games? I would think needing to have objects for each element in the SVG's XML would be unnecessary overhead, and wouldn't really buy you anything in return.
aw3c2 16y ago
Works very well with Opera too.
- Pistos2 16y ago
  Yep. Over here, Opera 10.53 on Linux, on an Athlon X2. Uses about 75% of one of the CPUs. I'm impressed that I can hold any combination of the game-playing keys, and it doesn't falter (thrust + turn + fire). The framerate holds, and everything looks and behaves smoothly, with great responsiveness.
wazoox 16y ago
That's great, but it existed as a DHTML demo for Internet Explorer 4.0 10 years ago. So much for the hype.
- ck2 16y ago
  1996 actually, so 14 years, wow (when did I get old?!) http://samples.msdn.microsoft.com/workshop/samples/dhtmltechcol/dndude/asteroids.htm http://samples.msdn.microsoft.com/workshop/samples/dhtmltech... Only works in IE though.
renewableGuy 16y ago
Cool. But the game is very sluggish and almost non playable on iPad. I wish these html5 games were built with some consideration for iPad. Anyway, i really appreciate the effort. One step closer to a flash-less web.
- andrew1 16y ago
  > I wish these html5 games were built some consideration for iPad. If the author doesn't have an iPad then it's going to be a bit difficult for him to know how this will perform. Possibly he's just made sure it works OK for the 99.99% of people not using iPads.
- jasonlotito 16y ago
  Maybe the iPad should be built with some consideration for the web? The web shouldn't be built with consideration for a single device. The game is HTML5. Fine. The iPad obviously has performance issues with that. That's the iPad's problem. Apple didn't want Flash, they wanted HTML5 and standards. Now they have to pony up. But no, the iPad should conform to standards, and support those standards. If the iPad is not capable of supporting those standards in a usable manner, it's the iPads problem.
  - joubert 16y ago
    I agree with both you and the parent. One of the problems with many sites is the expectation that there is a (dedicated) keyboard on the device that is browsing. I think when one designs something like this, take cognizance that more and more devices have virtual keyboards.
- Steltek 16y ago
  I recall one of Jobs' major points against Flash was not providing support for touch-based interfaces. Here we have a clearcut example that the tool you use (HTML5) does guarantee you anything in the final product. On a contrarian note, a cross-platform game framework here could perhaps provide for remappable controls and performance tuning. This same cross-platform framework is labeled by Jobs as a threat to Apple's marketshare. Perhaps Apple should not be so quick to bludgeon developers with claims of The One Best Way to the exclusion of all others.
pellicle 16y ago
Needs audio! But very cool indeed.
cubicle67 16y ago
I made a canvas variant of asteroids about a year ago. It's not up any more, but does anyone here remember it? The game over screen told you you'd died of dysentery Edit: Hey! I found it :) http://users.tpg.com.au/_dp/dave_asteroids.html http://users.tpg.com.au/_dp/dave_asteroids.html
joubert 16y ago
nice nice. can you texture map the objects?
RyanDScott 16y ago
The Render Engine also has a nice demo up--I prefer its nifty particle explosions and rocket exhaust. I believe this uses the HTML5 Canvas. http://renderengine.googlecode.com/svn/trunk/demos/spaceroids/index.html?evolved=true http://renderengine.googlecode.com/svn/trunk/demos/spaceroid...

59 points by gr366 16y ago

ck2 16y ago

Oh heck, there goes my next hour. Wow that's fantastic. Now someone make Missile Command. Pegs my CPU though (Firefox and Chrome) Open source too: http://github.com/dmcinnes/HTML5-Asteroids http://github.com/dmcinnes/HTML5-Asteroids update: I tried a few flash versions on the web to compare sorry to say they use a fraction of the CPU, at least under Flash 10.1rc4

jrockway 16y ago
Pegs my CPU though (Firefox and Chrome) I assume this is to intentionally maximize the framerate. ("renice" is your friend if you have something more important to do in the background.)
pavs 16y ago
Chrome / Mac didn't see any high CPU usage.

buster 16y ago

It shows very good why it's not ready to ditch Flash completely. I mean.. that's asteroids, i have a Core2Duo, 4GB RAM, 1024MB graphicscard und the asteroids are not smooth, they are flickering a little...

billswift 16y ago
I have a two and a half year old AthlonX2 with only 256 MB RAM and have no problems with it. Plus I am on dial-up, and this loads much faster than Flash.
- buster 16y ago
  I mean the animations are not smooth, it's probably the algorithm that rotates the asteroids, but well.. if noone can see that, i may be more sensitive about it, but it was the first thing i noticed.

deleted 16y ago

[deleted]

philwelch 16y ago

On a Mac Core 2 Duo MacBook with Safari, it stays below 45% CPU and is smooth as silk. This is actually better performance than Flash.

ilike 16y ago
I would like to know what Flash game are you comparing this simple game with.
- maukdaddy 16y ago
  Doesn't matter. ALL flash pegs my MacBook Pro CPU >50%, most of the time > 90%
  - joubert 16y ago
    yeah, even ads!

ZeroGravitas 16y ago

Surely SVG makes more sense for vector games? They should also try to recreate the arcade experience with the painted backgrounds, like from here: http://mameworld.info/mrdo/mame_artwork/astdelux.png http://mameworld.info/mrdo/mame_artwork/astdelux.png

pohl 16y ago
Honest question here... Why would SVG make more sense than canvas? Doesn't Canvas use a similar vector drawing model that you find in Postscript, Java2D and SVG? It seems to me that the main difference between the two is that one is an API and another is markup. So what makes SVG more suited for vector games? I would think needing to have objects for each element in the SVG's XML would be unnecessary overhead, and wouldn't really buy you anything in return.

aw3c2 16y ago

Works very well with Opera too.

Pistos2 16y ago
Yep. Over here, Opera 10.53 on Linux, on an Athlon X2. Uses about 75% of one of the CPUs. I'm impressed that I can hold any combination of the game-playing keys, and it doesn't falter (thrust + turn + fire). The framerate holds, and everything looks and behaves smoothly, with great responsiveness.

wazoox 16y ago

That's great, but it existed as a DHTML demo for Internet Explorer 4.0 10 years ago. So much for the hype.

ck2 16y ago
1996 actually, so 14 years, wow (when did I get old?!) http://samples.msdn.microsoft.com/workshop/samples/dhtmltechcol/dndude/asteroids.htm http://samples.msdn.microsoft.com/workshop/samples/dhtmltech... Only works in IE though.

renewableGuy 16y ago

Cool. But the game is very sluggish and almost non playable on iPad. I wish these html5 games were built with some consideration for iPad. Anyway, i really appreciate the effort. One step closer to a flash-less web.

andrew1 16y ago
> I wish these html5 games were built some consideration for iPad. If the author doesn't have an iPad then it's going to be a bit difficult for him to know how this will perform. Possibly he's just made sure it works OK for the 99.99% of people not using iPads.
jasonlotito 16y ago
Maybe the iPad should be built with some consideration for the web? The web shouldn't be built with consideration for a single device. The game is HTML5. Fine. The iPad obviously has performance issues with that. That's the iPad's problem. Apple didn't want Flash, they wanted HTML5 and standards. Now they have to pony up. But no, the iPad should conform to standards, and support those standards. If the iPad is not capable of supporting those standards in a usable manner, it's the iPads problem.
- joubert 16y ago
  I agree with both you and the parent. One of the problems with many sites is the expectation that there is a (dedicated) keyboard on the device that is browsing. I think when one designs something like this, take cognizance that more and more devices have virtual keyboards.
Steltek 16y ago
I recall one of Jobs' major points against Flash was not providing support for touch-based interfaces. Here we have a clearcut example that the tool you use (HTML5) does guarantee you anything in the final product. On a contrarian note, a cross-platform game framework here could perhaps provide for remappable controls and performance tuning. This same cross-platform framework is labeled by Jobs as a threat to Apple's marketshare. Perhaps Apple should not be so quick to bludgeon developers with claims of The One Best Way to the exclusion of all others.

pellicle 16y ago

Needs audio! But very cool indeed.

cubicle67 16y ago

I made a canvas variant of asteroids about a year ago. It's not up any more, but does anyone here remember it? The game over screen told you you'd died of dysentery Edit: Hey! I found it :) http://users.tpg.com.au/_dp/dave_asteroids.html http://users.tpg.com.au/_dp/dave_asteroids.html

joubert 16y ago

nice nice. can you texture map the objects?

RyanDScott 16y ago

The Render Engine also has a nice demo up--I prefer its nifty particle explosions and rocket exhaust. I believe this uses the HTML5 Canvas. http://renderengine.googlecode.com/svn/trunk/demos/spaceroids/index.html?evolved=true http://renderengine.googlecode.com/svn/trunk/demos/spaceroid...