Digg Attack - A JavaScript Game

Digg Attack - A JavaScript Game canvas, digg, games, javascript

A Digg-'em-up struggle against the overwhelming forces of social media.

Impatient? Click to play Digg Attack! (read the intro screen for instructions) or keep reading for details and background.

This is something I started a good while ago but only just recently got into a playable state. The goal was to create a small game where the action is based on an external data source. It turns out that the Digg API fits that bill fine as it provides both varied data and a steady stream of it, and thus the product, in its current state, is an unusual 2D shooter where the flow of enemies is based on stories that are "dugg".

The Heroes The protagonists come in the form of a small flock of social media heroes, controlled by targets set by the player and influenced by various objects on the map. They are also somewhat autonomous as they use simple flocking mechanisms to stay close together and move as a group.

With the exception of the music, it uses only the Canvas element and regular DHTML and another goal was that I wanted it to feel "fluid" and be able to compete with similar Flash games, even when there was a lot going on on the screen. I think it meets this goal just fine, at least when played on a moderately sized box. I also know there are some decent optimizations to be done in there once I get around to it (ie. the explosions could be prerendered rather than dynamically created as they are now, etc.) On the sound side there is currently only background music. I had some sound effects going on with SoundManager2, but it's giving me a bit of trouble, so I've sort of abandoned them for now. Also, apart from the vortex sprite and the prerendered text, all the graphics are created at runtime with Canvas drawing.

The music is by friend_kami and brainworks, all released under Creative Commons licenses and found at SectionZ.

Ok, get on with it!

You start each level with a number of heroes (ie. little blueish dudes). The game connects to Digg.com and as stories are dugg, enemies are spawned and enter the screen from either the left or the right side. The type and number of enemies spawned depend on how many diggs the story has received:

Enemies of type 'Antihero' 6-50 diggs: Antiheroes, similar to your heroes, but red (and evil!) Spawn in flocks of 2-7 antiheroes. These guys are small and weak but will nevertheless actively and tirelessly hunt your heroes.

Enemy of type 'Predator' 51-500 diggs: Predators, larger and more dangerous. Coming in packs of 1-3 predators, these also actively hunt your heroes but are easier to out maneuver. Their larger size more than makes up for this, however.

Enemy of type 'Biggie' 501-infinity diggs: Biggies. Huge, slow and not very bright. These enemies wander around with no aim, just bouncing about the level. Are tougher to kill than the others, but move slowly.

The goal is to survive - or at least try to - for a number of seconds (typically 60-120) before you autmatically proceed to the next level. If you are so unfortunate as to lose all your heroes (chances are good that you will), reinforcements will be sent in at the low, low cost of 25% of your currently accumulated score.

Don't worry if you keep dying almost immediately, just try again and the next round might be more forgiving. The difficulty varies in time due to the unpredictable nature of the data the enemies are based on. You might be unfortunate and run into a stream of high/medium profile diggs and be flooded with strong enemies, or you might be able to just cut your way through small groups of antiheroes for most of the level.

The levels

As each level has a fixed amount of time, the ultimate goal is to get the highest score by the end of the last level. At present time there are a total of 12 levels with a combined game time of 15 minutes and 10 seconds.

The first level is just an empty playing field. Later levels feature blocking structures, attractors/deflectors, zappers and even small black holes. Here's a quick overview of what you could be facing:

The corner of an obstacle block Blocks: These are simple impassable structures that block your path and/or divide the map in smaller sections.

Directors: When you come in the range of a director, your heroes will feel a sudden urge to move in the direction of the arrow. They come in 4 flavours: up, down, left and right.

Attractors: Much like the directors, these also affect your heroes' senses of direction but rather than make them move in a specific direction, your heroes are compelled to move towards the center of the attractor. Be careful as it can be hard to escape once you've become trapped.

Repulsors: The twin sibling of the attractor, the repulsor does the exact opposite and make your heroes move away from the point of repulsor.

Zapper Zapper: High powered electrical menaces that make short work of your magnificent heroes. Come within range of one of these bad boys and one of your heroes is sure to be toast. Fortunately it takes a second before the zapper is ready again.

Vortex Vortex: Gravitational pull will drag your heroes to the midst of these miniature black holes where nothing and everything meet and the very fabric of spacetime is torn apart (that includes your heroes).

Except for the walls and blocks, the enemies are not affected by any of these map objects.

Quick tips

The enemies go for the collective (average) center of your heroes. You can exploit this by spreading your heroes out over the entire map.
Even if you can't move through blocks, you can still shoot through them.

Mostly tested in Firefox 3 but looks to be working in Opera 9.6 and Safari as well. If you get graphical glitches in Safari, try with a recent WebKit nightly. IE is of course a no go.

So, there are still a bunch of outstanding issues and stuff, but mostly it plays well. Actually, I'm not entirely satisfied with the gameplay yet and would like to evolve it a bit but I'm not sure in what direction. The whole "external data" part is up in the air as well. If you have any suggestions for changes, bug reports :( or just want to comment, please do so below. And post some high scores, even if you don't bother finishing all 12 levels!

There have been reports of issues with Linux and I think it might be related to nVidia cards, so if you're having problems with Linux and have a non-nVidia card, please leave a comment below.

The general rules and the details about how to control your heroes are described on the intro screen, so make sure you read it.

Click to play Digg Attack!

And if you like it, why don't you...

posted Friday, November 7, 2008 by Jacob Seidelin

⇓ 41 comments Anonymous

Nice game!
I betcha you had a lot of fun creating it :)

I feel the popularity of JavaScript games will continue to rise over time. Mainly due to how nearly any browser can play them.
Did you try ExCanvas for IE support?

You should submit the story to Digg, I'm sure they would get a kick out of it since your using their data as a generator for the enemies :)

Again, nice work :)

November 7, 2008 at 9:16 AM Jacob Seidelin

Thanks! Yes, I did :)

No, I didn't try with ExCanvas. I don't think it will perform very well with so much going on and I'm not even sure ExCanvas supports all the functionality I need.

November 7, 2008 at 9:31 AM Anonymous

Jeez, this is total Digg bait! ;) Seriously, this is awesome. I've been trying and trying to think of a way to use an API in a game, and couldn't think of anything clever outside of "Flickr Memory" which is kind of lame. Well done!

November 7, 2008 at 11:40 AM Anonymous

Well, if you decide to try ExCanvas, it's as simple as including the script, nothing else.
Your right that it doesn't support everything, but who knows, maybe you'll be surprised :)

November 7, 2008 at 12:25 PM Jacob Seidelin

@Robert: Yes, it's just that last time I tried it, it only seemed to work with canvas elements that were already defined in the HTML and not with ones created with JS. Maybe I'll try it, won't take long to find out!

@matt: Ha, yea I guess. I've been playing around with the API / game idea since the Wolfenflickr, but couldn't really figure out what to do about it either :)

November 7, 2008 at 1:22 PM Unknown

I don't know why, but I had some serious problems with the game. It ran nicely until the first explosion. Then I had a major lagparty forced me to restart my browser.

I tried the game again, and the exact same thing happened.

Running Firefox 3.0 on Ubuntu.

November 7, 2008 at 2:44 PM Jacob Seidelin

@Drakim: Yes, there are some problems with canvas and Linux with some system configurations (including mine). I googled a bit and found some nvidia specific X settings that should help, but it didn't have much effect for me. :(

November 7, 2008 at 3:05 PM Unknown

Huh, strange. All other games on this site that uses canvas runs perfectly for me.

November 8, 2008 at 8:16 AM Anonymous

Stop making all this cool stuff! You're making the rest of us look bad :)

I keep thinking about a Flash bytecode to JavaScript translator...

November 21, 2008 at 5:12 AM mondaytuesdaywednesdaythursdayfridaysaturdaysunday

I didn't see an explanation of the controls but maybe I missed it in either the post or in game. The post mentions "shooting" but doesn't say how to do so. I finally figured out that you hold down the control key and each of your heroes will produce a steady stream of bullets.

November 21, 2008 at 10:56 AM Jacob Seidelin

@sil: Nah.. :) Neat idea with the Flash -> JS thing.

@BenRifkah: The controls are explained when you first enter the game. I'll point it out in the post. Thanks.

November 21, 2008 at 11:08 AM mondaytuesdaywednesdaythursdayfridaysaturdaysunday

Never mind. I just realized that the start screen says you can hit ctrl to shoot.

November 21, 2008 at 11:10 AM mondaytuesdaywednesdaythursdayfridaysaturdaysunday

I'm a bit slow today.

November 21, 2008 at 11:10 AM Jacob Seidelin

Ha, no worries :)

November 21, 2008 at 11:11 AM Anonymous

Google Chrome gets stuck on the first black hole level. Great game though, really original.

December 7, 2008 at 9:59 PM Anonymous

Opera, Holding CTRL, it seemd to gt stuck on the first black hole level aswell... Its a veery neat, and intuitive game though, keep up the great work!!

December 16, 2008 at 8:00 AM Anonymous

Same problem with Firefox in Linux. I've got a pretty beefy system, and the first time I fire at an enemy, the browser just about locks up.

December 17, 2008 at 4:10 AM Chris Cowan

I also have extreme slowdowns on my ubuntu 8.10 system with firefox. I have an nVidia card, saw a mention about that. Works great on my other computer, and I love the idea of taking in external data like how this does.

December 17, 2008 at 4:48 PM Jacob Seidelin

Ok, thanks for all the Linux reports. Anyone having issues with non-nVidia cards?

I'll have to take a look at that black hole, it seems.

December 17, 2008 at 11:42 PM Anonymous

Sounds like geometry wars :)

December 18, 2008 at 7:07 AM Anonymous

C64 Time :)

January 25, 2009 at 10:50 PM Anonymous

I finished with 14,100. That 25% thing is pretty harsh; IIRC my score was significantly higher at times.

February 22, 2009 at 5:56 PM Jacob Seidelin

@Anon: You're right, and I have actually been meaning to reduce the penalty, maybe 10% would work better.

February 23, 2009 at 12:29 AM العاب

Hy u all people.
Hope u fine...here is ome information regarding games....
Game-Monitor continually tries to get the most complete list of game servers that it can find from user submissions, master servers, and affiliates. We then monitor all these servers, gathering as much information as we can, and provide this information, in an easy to use interface, to you, the end user.
plz check it out u ll have fun...
Thanks u.
http://games.m5zn.com/

November 23, 2009 at 5:26 AM Anonymous

I played it using Mepis 7 (Linux); it played really well - no slow down at all. I have an nvidia graphics card.

December 10, 2009 at 6:17 PM srpoder

Great game, I'm your fan ;).

January 7, 2010 at 1:04 PM cheap vps

Tried it , and failed, great game tho, gonna book mark it.

January 14, 2010 at 4:10 AM Anonymous

Hi, this is awesome. Any chance I could take a look at the code.
Thanks !
~Viv

February 12, 2010 at 4:43 PM Anonymous

Hey,
This game is really great.
I'm playing on a macbook pro with safari 4. Basically the game is too fast for me! Also, I can't really see the cursor so it's hard to tell where I'm pointing. Other than that, it's great to see something working this well with JS/Canvas

May 1, 2010 at 12:12 PM Unknown

Absolutely incredible and very inspiring. Love the music too XD

Completed all twelve levels with a final score of 118732.

Thanks for creating this.

May 9, 2010 at 6:26 PM Unknown

what is this!

December 4, 2010 at 3:04 AM Anonymous

Where can I get the music from this? It is very relaxing.

December 23, 2010 at 1:58 AM CongeeG

This game seriously lacks any explanation of what to do.

All I do is to click somewhere an wait a minute,
and then do that again.

Whats the purpose of this game?
How do I die or score?

Its technically nice, but lacks gamedesign