Scripted Image Mosaics

Here’s another useful tidbit.

I already wrote a lot of posts about Javascript Sprites, how to animate them and how they perform. What I neglected so far is how they actually get on the stage or the page to use the correct term. Another fact is also that most people won’t have flashy Scripted animations all over their page – for those people utilizing one of my sprite classes is not just impractical, it’s also a waste of bandwith.

What it will do

To give those people some JavaScript love too I quickly coded a Mosaic Object this morning. It will basically look up a particular piece of your image and return:

• a canvas element which you can draw into a canvas or attach to another element
• or a div element, perfectly sized to fit the mosaic piece with background and background position set apropriately

(more…)

Tags: Games, JavaScript, tile graphics

Your Own JavaScript Data Structures

Some Data Goodies

To keep one or the other occupied I thought why not give away some insights on how to implement advanced data structures in JavaScript. Read on to learn how to use Stacks, Vectors and various types of linked lists in your JavaScript Application - complete with Source code.

The Problem

Beside primitive types, Javascript has only built in Objects and Arrays (which themselves are Objects internally as well). While this is a convenience drawback, this also results in a great flexibility. This article will show you how to implement your own data structures utilizing JavaScript object’s prototype property to create your own data types. I’ve added all objects to my global Object CGE, you might need to adjust that to fit your code.

Although not necessary for these Objects to work, I’ll also provide a version of each Object that was made utilizing the AJS.Class constructor, thus only working when the AJS Library is present.
(more…)

Tags: JavaScript, oop

Cool Javascript Mario Games

Yesterday at work I got these links from a colleague. There really is a guy that takes JavaScript development to the top. He made a fine little Mario Land clone, having all the music and sprites coded in JavaScript. No sound files, no images, no plugins - just pure Javascript and use of Canvas. Though the script has a fallback to semantic html sprites when canvas isn’t available.
I’d say, great kudos to CupBoy.
Go check it out at his blog:
14KiB Javascript Super Mario

… and then there was this other guy
sorry, couldn’t resist this cheesy line…

There was a response to this blog entry from Myles Eftos who had been cooking something similar with just semantic html. So these sprites are all divs and spans. Sure this is much slower than canvas but it’s impressive nonetheless.

See the blog entry here:
Swing Your Hands From Side to Side - How to Abuse Javascript

Tags: code performance, Games, JavaScript, tile graphics

Performance comparison between HTML, SVG and Canvas

I already found out that using scroll properties is good for fast map scrolling. I extended the concept, and after posting my code to animate sprites via a containers scroll properties I thought hey, why not just check if there’s anything better. The following article provides a short overview and a sample for each technique. There is a zip file containing the full sources as well
(more…)

Tags: code performance, Firefox, Games, JavaScript, Opera, Safari, SVG