Before you get too overly excited by the title, no this isn’t a full recreation of the 1997 DMA classic. Instead it’s a WebGL tech demo put together by Niklas von Hertzen as an experiment, to test out the creation and performance of large static environments. It works by loading in the original GTA map files which are now freely available, parses all of the data out of them and re-creates the city in WebGL driven 3D.

Several of the game objects are also present, and a basic collision system allows you to teasingly walk around the city in pedestrian mode. I guarantee you’ll walk up to a car and try to get into it, but alas that won’t do much right now. However the project is fully open source, so if you’d like to re-live the Gouranga moment and add it back in, then checkout the code from github and get hacking.

View the GTA WebGL Demo

Here at CreativeJS, we’re usually so busy scouring the Internet for the latest amazing demos we don’t get a chance to catch up with you all as much as we’d like. We’d like to change that.

Over on our shiny, new Facebook page, we’ll be posting each article as it comes out and we’d love it if you want to join in the conversation there. If you subscribe to the page, you can get the articles right in your timeline. Effortless!

During our quest to find the most creative uses of JavaScript out there, we come across many more cool things than we could ever hope to write about. We’ll be posting a few of these to Facebook so you don’t miss them. You can also send us messages there if you find something you think we should cover.

Even more ways to get Creative

If Facebook’s not your thing, don’t worry. We’ve also added a weekly email digest to the site. Subscribe using the link in the sidebar and you’ll still never miss out.

There are now loads of ways to keep up with the articles here but if you have any more you’d like us to do, just get in touch.

The Google maps team have been hard at work lately, releasing in late 2011 an interactive showcase of their newer maps features, including an updated mobile experience, 3D Streetview and even Indoor maps.

This campaign was quickly followed by a pair of videos showing off both a larger than life ball-in-maze style game, as well as a small gameplay video of the Google Cube game.

After a three month wait and lots of anticipation, Google’s promotional Cube game is complete and released, bringing with it all the quality and polish we have come to expect from any promotional Google product.

The premise of the game is quite quite simple: you guide your small blue ball from location to location over 8 levels within the 3D, cubic map, which itself has been styled with the iconic “Google Maps colors” that we have all come to know and love.

The gameplay itself is strictly 2D (with the exception of multiple ‘floors’ on the indoors level), a third dimension is also added as the cube itself tilts and pans, giving a much deeper 3D experience. The cube and levels are rendered in webgl with Three.js (No surprises there) and the physics and collisions are handled by the ever popular box2D. The beautiful background music which really completes the experience has been implemented with the html5 web audio API.

A quick glimpse at the source also hints a hidden easter egg: if you type in the Konami code (up up down down left right left right b a enter), and are on a mac-os, you can use the in-built accelerometers in your laptop, and really tilt yourself to victory!

Cube – A Google Maps project – put together by B-reel (@B_REEL)

Score Rush was one of the inaugural games made available when the Turbulenz site opened its doors and went into public beta in April 2012. Created by Jason and Matthew Doucette of Xona Games this is a browser based port of their Xbox 360 original that rocked the Xbox Live Indie charts upon release. Although still in beta and constantly evolving, along with the platform on which it lives, this is already one heck of a gaming experience.

Xona are masters of the bullet hell shoot-em-up sub-genre and Score Rush is no exception. Powered by the Turbulenz SDK it screams along at a blistering pace, with boss after boss to defeat and thousands of bullets delivered in lethal but mesmerising wave patterns to avoid. Although the on-screen action can get visually overwhelming it always feels fair, and there’s no death-by-dodgy collision detection to be found.

You can tweak the visual effects in the options screen to tone things down if you prefer, but something about the franticness of it kept me striving for the next achievement. Needless to say if your PC/Mac isn’t up to spec then you won’t get far running this game. Yes it may be “browser based” but you’ve still got to have the equivalent GPU horsepower of an Xbox under the hood to really appreciate it.

Special note must be made to the soundtrack. Dragon Music Productions provide the audio that rocks along as your adrenaline flows as you desperately bid to clear just one more wave before inevitable annihilation. If you’ve got a joypad and browser capable of supporting it, then plug it in as this was a dual-stick shooter at birth. Although it maps well to mouse and keyboard it’s still best experienced the way it was meant to be played.

If you’re a game developer then the Turbulenz SDK is well worth checking out. There is a real elegance to the framework and it is blatantly clear it has been constructed by a team of professional game developers. Although it obviously has deep links into the Turbulenz social system for things such as achievements and leaderboards the performance, physics system, asset streaming and ability to update any part of your game, at any time, opens up a lot of options should you wish to create for their network. It will be fascinating to see how it progresses and what the developer adoption rate will be like.

Turbulenz themselves are in very early days, constantly shifting and changing as they expand out upon their original goals. But even at this point they seem to have something no other portal has at the moment: genuinely console quality games. Personally I find this approach highly interesting. There are hundreds of places on the web to enjoy good quality games, from 5 minute coffee-break fillers to epic Flash masterpieces, but they still feel like browser games. Whereas Score Rush and its ilk are like peering into the guts of an Xbox that’s beating inside your browser. It appears as if Turbulenz are coveting an as-yet unexplored “high-end browser gaming” market as part of their strategy. Will this work out in the long term? Time will tell. But for now it’s definitely worth keeping an eye on.

Play Score Rush on Turbulenz.com, free registration required. Add me as a friend (username: photonstorm) if you’d like to see the local achievement streams in action – and to lay waste to my pitiful highscores

We’re not quite at the stage where we can fly through the Internet in 3D à la Johnny Mnemonic, diving between skyscrapers of data and along streets of shimmering bytes. Until then, we’ll have to make do with visualising our web pages in 3D which is still pretty futuristic, if you think about it.

3D it! from Edan Kwan is a bookmarklet that uses 3D CSS transforms to turn any web page into a moveable, (partially) rotateable 3D object which displays elements closer to the viewer the deeper they’re nested in the DOM. As it’s just standard JS with CSS doing the graphical heavy-lifting, the page is still fully interactive – hover states, links, selectable text, the lot. It can struggle a bit with larger pages but for the most part, it’s fun to launch it all over the place. Try it out on this page!

Firefox users have had access to something similar since the middle of last year – the Tilt 3D extension* creates a 3D visualisation of the current page using WebGL. Being powered by some more heavy-weight JS, this one is very smooth and completely rotatable but only available in Firefox. Whether it helps in web development depends on your working style but there’s no doubt it’s fun to pretend to be Keanu Reeves.

*As Alex Turnbull points out, the tilt extension now is integrated into the latest version of Firefox.

If you’ve ever seen a Java applet in a web page, chances are it was only there for one purpose: to add a “rippling lake” effect to an image. Why Java never took off we’ll never know! But now, thankfully, we can remove all those Java applets from our web pages and replace them with this lovely modern HTML5 canvas version instead.

Lake.js is a fun retro canvas effect you can apply to any image element. It’s a jQuery plugin that inserts a canvas element directly beneath an image. In that canvas it displays a flipped version of the image with an animating, rippling reflection. You can also adjust the speed, scale and number of waves used in the effect.

Have a look at the demo page or grab the source code from GitHub and, as it suggests, make some “cool ass lakes”!

Even if you insist on sticking with your Java applets for that extra retro kudos, the source code is great to pore over as it shows exactly how to manipulate pixels using canvas. Play around and see what other effects you can make!

Manny provides a nice write up on the process as well as links to the various iterations of the experiment on his blog. So, it’s not just a fun experiment to play with, it’s also a nice peek into the process of getting there. And who doesn’t love a good process story?

There seems to be a trend of re-creating classic 8-bit games in JavaScript at the moment, including the recent and excellent Survivor. But this time Hungarian developer Krisztián Tóth brings us a faithful re-creation of the Commodore 64 version of Wizard of Wor, itself a port of the 1981 Midway arcade title. The overall concept of the game is a simple one: you and an optional friend, battle your way through a series of dungeon mazes fighting the baddies that dwell within. These include the Burwors, blue wolf-like creatures, Thorwors, red scorpions and the titular Wizard of Wor, a deadly wizard who appears after every 3rd dungeon.

It’s up to the players to decide if they want to play co-operatively or against each other, as their shots are fatal. This creates an interesting dynamic rarely found in a game over three decades old. As this JavaScript re-creation is as true to the C64 version as you can get without plugging in a real Commodore or emulator, I was keen to find out more from Krisztián about the reason for making the game and the process involved:

“When I was 7 years old my parents bought a Commodore 64 and this was the first game I really fell in love with. I was enthralled, both by the game and by the computer. After being so fully infected I think my mission was to just give something back in return. This is my fourth C64 JavaScript conversion. First was Domino, then Tetris. The third as biggest was Boulder Dash with the complete construction kit and now Wizard of Wor.

In order to convert Wizard of Wor to JavaScript I just played the original, a lot, and looked carefully at what I was seeing. No disassembly of the original code was used, it was all done by eye. These games always seem so simple at first, but when you look deeper you realise that isn’t true. Their primitive graphics and sound effects hide a lot of complexity. In this game for example the most difficult algorithms are found in the enemies and player movements. But I always aspire to create a perfectly faithful adaptation. That’s the whole point of it for me.”

When questioned about how he built the game from a technical perspective, Krisztián  had this to say:

“I used my own engine to create the game. Obviously I use jQuery and a few other plugins,  jStorage for handling local score saving for example. But my principal aim is that the program code should be as simple as possible. To ensure that the code doesn’t contain unnecessary functions, which I would almost certainly have if I used a framework. The JavaScript in my Tetris game for example is < 12Kb. I’m an old school programmer. I fight for every byte of memory, and I love that

The game uses a combination of canvas and CSS. The main game area is of course canvas. Canvas is the solution if you want fast animations. I tried using animated divs and cells but this was a dead-end in erms of speed. My computer is 10 years old, so I am forced to optimize my code otherwise I cannot play my own games! Of course using canvas meant I lost all SEO, so the intro screen, instructions and all text are plain HTML styled with CSS. I never re-draw the whole canvas either, only the areas I need, which of course helps increase speed.”

With four C64 games already under his belt I wondered if there were plans for any more?

“I have a lot of plans but very little free time. I always make a rule to never start a new project, but I cannot keep it! There are a lot of great games, not only C64 ones, that I would like to try: Impossible Mission 2, Dune 2, over-head RPG games like Ultima 1, platform games like Prince of Persia and more. There’s plenty of choice. It’ll be a surprise!

My basic programming principle is this: We should write code in such a way that the players do not have to focus on the technical details. I want the players to become addicted to the game world that the code created, and the developer should be prepared to make the code do anything to keep this illusion alive.”

Play Wizard of Wor

Pile-o-Gears is a simple, yet addictive platformer built by Christer Kaitila using the Jaws engine. Just another platform game, you say? Not quite! Consider that this particular game was built in only 48 minutes (with some help from existing code)!

The smooth framerate and limited development time fed my intrigue of Jaws, a 2D game library which supports both canvas and DOM-based elements. The simplicity of syntax and separation of game logic is thoughtfully done. A basic game setup in Jaws looks like so:

jaws.start({
    setup: function() {
        // Initialization code -- called once
    },
    update: function() {
        // Game logic -- called each game tick
    },
    draw: function() {
        // Drawing logic -- called each game tick, AFTER update()
    }
});

In particular, separating the update() and draw() method calls allows you to optimize your repaints which can slow down your intervals—something we will cover in-depth in a future tutorial here on CreativeJS. Jaws is far from alone in the JavaScript game engine arena, but it will be great to see what else can be made with it.

Do you have any experience with Jaws or other gaming engines? We’d love to hear your experiences! Also be sure to give Pile-o-Gears a few minutes of your time to play (so you can be awesome, too) and read up on Christer’s experience while you’re at it.