Friday, October 9th, 2009

Fun Friday: Mullets and Space Battles

Category: Fun, Games

<>p>The week is almost over, and that means it’s Fun Friday! Ajax and HTML5 aren’t just for serious business apps (“business in the front, party in the back”):

mullet_party

http://www.flickr.com/photos/heyjohngreen/ / CC BY 2.0
This week we have JS Wars from Jonas Wagner:

jswars2

jswars1

There are a couple of unique things about this game that makes it a good educational resource for developers. First, the code is GPLed so you can easily study it for your own needs. Next, I noticed a new attribute on the canvas tag I had not seen before:
  1. &lt;canvas width="640" height="480"
  2.         id="screen" style="border: 1px solid #ddf;"
  3.         moz-opaque="true"&gt;&lt;/canvas&gt;

Notice the moz-opaque attribute. Evidently this showed up in Firefox 3.5 and:

…lets the canvas know whether or not translucency will be a factor.  If the canvas knows there’s no translucency, painting performance can be optimized.

Hopefully the other browsers and the HTML5 spec can pick up this useful property.

Another unique aspect of this sample is that many free, open source tools were used to create all the images and sounds. All the graphics were created with the Gimp and Blender, and the sounds were made with csound.

BTW, if you are graphically challenged like me but need resources like this for applications and games I always recommend either grabbing images, video, and illustrations through the Creative Commons search engine, Wikimedia Commons, or iStockPhoto.com (you could grab an Illustrator file from iStockPhoto, for example, and then convert it into SVG using Adobe Illustrator to bring into your fancy web page).

Posted by Brad Neuberg at 6:30 am
8 Comments

+++--
3 rating from 23 votes

8 Comments »

Comments feed TrackBack URI

iStockPhoto.com is way overpriced, but the Creative and Wikimedia Commons are great resources.

Comment by Shaun — October 9, 2009

Ajax and HTML5 aren’t for serious business apps at all.

Loading a table in an app I am working on at the moment with Ajax/JSON took several seconds of frozen browser, or over 30 seconds on a timer, whereas it takes < half a second from plain HTML in a frame.

Comment by Darkimmortal — October 9, 2009

@Darkimmortal: seems to load fast enough for me…
http://extjs.cachefly.net/ext-3.0.0/examples/grid/buffer.html

Comment by Joeri — October 9, 2009

Weird FF 3.5 bug. I closed the tab ~30 seconds ago and the music is still playing. But still awesome to see this done natively in the browser.

Comment by tj111 — October 9, 2009

The opaque tag from Mozilla reminds me of enable-background from the SVG spec. For good reason too, they have the same intent / allow the same optimization. I’m looking forward to continued benefits from Mozilla programmers applying lessons and tools from the SVG spec to Canvas.

To Darkimmortal:
You’re not programming your application correctly. Ajax should never freeze the browser, but it can if you don’t use it appropriately.

To tj111: Interesting bug — I’ve seen it many times with Flash, I’m surprised it’s also showing up in FF3.5 native . It’s likely related to audio buffering, and it’s likely from a similar programming bug. Let’s try to keep an eye on this one.

-Charles

Comment by Downchuck — October 9, 2009

FF 3.6 adds another tweak, that may increase performance when using lots of scaled images…

ctx.mozImageSmoothingEnabled == false;

“Gecko 1.9.2 introduced the mozImageSmoothingEnabled property to the canvas element; if this Boolean value is false, images won’t be smoothed when scaled. This property is true by default.”

Comment by rbebic — October 10, 2009

@tj111 @downchunk @rbebic I think I’ve read somewhere FF3.6 fixed the bug.

@shuan to bad SXC recently changed hands to them as well

Comment by SilentLennie — October 11, 2009

Leave a comment

You must be logged in to post a comment.