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

Level Editor Redux

I have dedicated more of my sparse spare time and refined my level editor quite a little bit.

I have found some very cool and useful information about tile based games on the net this week and parts of it are already directly influencing the current codebase.  The latest somewhat stable version is 0.92b which rectifies some problems with Firefox 2 and implements all features listed as current. Once I have a chance to cleanup the code I’ll make it available for download in a new post.

The current development milestone is 0.95a  which incorporates already some of the planned features.

It still has to go a long way to be complete but the progress is going well. (more…)

Tags: Games, level editor, tile graphics

Generating Tile Maps

About nine months ago I discovered Open Sword Group’s Pixen a really neat image editor for OS X, perfectly suited for Pixel Art. I was working on my BA thesis by that time and investigated the possibility of tile based graphics for the thesis project.

Though it turned out that tiles were not feasible. However this application and the sites I discovered through my research had sparked fond memories of long lost games and an idea was planted.

For a couple of months now I am working on my very own little game project. Initially I was trying to use RepTile to create my maps. But after trying to contact the author without getting any response it seems the project is abandoned. Though the concept of this little application is still neat.

It works like any other tile map generator in the way that you can paint your map using the tiles you provide. A great addition however is that you can already assign properties to map tiles. For example, the stone wall is not walkable and the grass has less movement cost than the dirt . You get what I mean.

As badly as I wished to use this little program, I am no Cocoa programmer and can therefore not ad features I need.
But luckily I can do JavaScript and this seems to be the perfect playing field for it. Since tile based games are mostly web related, why not create the maps straight in the browser. So I took the great RepTile idea and moved it over to JavaScript and the outcome was this (click to see the full image):

The generator is working and can perform the basic tasks of painting tiles and assigning properties to them. Clicking the generate button will present you an xml file which you can use with an appropriate engine (such as the one I am working on). However, the code is a bit messy right now.

But if there’s enough interest I’ll clean it up and post it here.
P.S. The tiles used in this screenshot aren’t mine. Danc made them. Anyone interested can find the link in the Sprites, Sprites, Sprites post.

Tags: Games, level editor, tile graphics

Experimental Javascript

Javascript Benchmark

While it my not make a big difference for most people, I care about the performance of the code I write. Somtimes there are multiple ways to get to the same result, butto find out which way is better is not always easy.

Sometimes you’ll probably decide to use a certain function or concept because it is easier to implement or read, but that doesn’t necessarily make it faster to interpret for your browser.

To have some aid in what I do I developed a small Javascript Benchmark.

Searching through the internet I found some benchmarks that test the performance of Interpreters themselves but rarely one that is intended to compare performance of different functions or concepts.  If you find it in anyway useful feel free to use it. Though there is no guaranty that the results are correct measures.

Javascript Starfield

Back in the days of my trusty Atari 800 or later my Amiga, a starfield animation was a very popular effect. Unlike the Starfield screensaver that later shipped with versions of Microsoft Windows  these starfields were depicted from the side as if you flew by and not into it.

Trying to replicate this vintage look I quickly found out that Javascript and DOM might not be the ideal companions to do so. While the effect is quite nice in my opinion, the processor load to calculate the 150 stars’ position is quite high. Maybe I should look into SVG and the canvas tag to replicate this effect and probably have less processor load.

For the time being check out this probably first serious Javascript experiment of mine I did early in 2007.

Javascript Starfield

Tags: code performance, starfield effect

Sprites, Sprites, Sprites

This is a repost of some posts to my old website from May to June 2007

Animated Sprites and Tile Mapping with Javascript

Based on a previous post about Javascript Sprite Animation  I decided a while back to create a little tile map and have a sprite move about it using keyboard controls.

Below is the original context:

Yesterday while surfing the net I found some very cool tile graphics. Luckily Danc the creator of these graphics released them to the open public. These will prove a rich learning resource for me.

Anyone who is interested might visit his blog at lostgarden.com

The game tiles are available from this post > more free game graphics

Javascript Sprite Animation with Tiles

* * *

Javascript Sprite Shading Algorithm

My curiosity led me to try my hand at simulating a light source with Javascript. While I had done this previously to fake a 3d lighting effect (use this link for the JS version) with just 5 layered graphics, I wanted to try a different approach this time.

My goal was to create the illusion of a light source fading with distance - much like a point light source, a light bulb for example.

The algorithm or one that is similar was probably used in tile based games that tried to simulate light sources. Some that I played myself were “Jagged Alliance 2″  and the original X-Com strategy games.

To see the algorithm in action click the link below:

Javascript Sprite Shading Algorithm

Tags: Games, lighting, tile graphics