Taxi Strike for @aneventapart 10K contest

This is my second entry for this year’s an event apart 10k contest. It’s published right here. Go there, try it and put some comments!

Taxi Strike

All taxi drivers went on strike. You are the only one who can satisfy the needs of this city!

It’s a 3D top view car game where you have to take people from one place to another. It’s javascript based and has some beautiful features:

  • 3D inside canvas HTML5 2D context. I had to develop some tricky functions to perform textured polygon rendering in basic canvas. WebGL was not allowed because the game had to work in browsers that don’t suppor that feature.
  • Full physics for cars and city elements (such buildings, lamps, …). Cars move all around the city, trying not to crash with each other. But when they collide (or your taxi crashes with them) they do exceptionally well!
  • Taxi Strike 10k generated city fragment

  • A big fully textured generated city. Due to the 10k contest limit I couldn’t afford using external graphics or city definition. With a couple of simple textures I’d reach the size limit! So I had to generate all the city an its graphics in load time. The generated city is cool! I’ve used some graph theory algorithms for creating roads, greedy algorithms to generate buildings and deterministic random numbers to obtain always the desired city. All graphics are vectorial. Some of them where drawn using inkscape and then converted to HTML5 canvas functions and optimized manually. And I think I’ve got a nice comic style!
  • Some Taxi Strike generated graphics

  • Path finding. When you attend a call you are telling to go some place in a given time. Then, some arrows appear on the roads to help you reaching your goal, like using a GPS. That arrows mark the shortest path to your goal driving using the roads. But of course you can take shortcuts between buildings or through parks, taking less time and getting more points.
  • And so much more. Lots of details to make all things work.
Taxi Strike

Drive your taxi and take people everywhere

I almost went crazy getting all that features in only 10 kilobytes. In the way I had to discard some ideas and remove some things I’ve already developed. For example there were pedestrians walking; the game worked on mobile platforms drawing some buttons to drive the car; and more things. It was a pity to throw away all the mobile logic, but that was too much code for 10k…

I will post some of the techniques used in this game when I have time. So come back soon and maybe yo will find new freaky entries!

Air Strike for @aneventapart 10K contest

My this year 10k an event apart contest entry have just been published! You can try it by clicking here!

Air Strike tutorial

Air Strike tutorial screenshot

“All air traffic controllers are on strike and you are the only one who can make all those aircrafts land”. This is the premise behind this addictive game. You have to make aircrafts going to their respective airstrips for landing, being careful not to crash them.

Air Strike in game

Air strike in game screenshot

The game is less than 10KB and works fine with modern HTML5 capable browsers (IE9/10, Firefox, Chrome, Safari, …) on desktop computers and mobile devices (iPhone/iPod/iPad/Android). I’ve used several compression techniques than I will describe on this blog. Some of these techniques have been Javascript PNG compression – managing to avoid problems with Android web browser image reduction -, SVG to canvas code conversion, Javascript code reduction; and more…

Air Strike on iPhone

Air Strike on iPhone screenshot

Playing is easy. Use your mouse or finger to make aircrafts follow a path to their respective airstrips. Avoid them crashing and land as much as you can.

Have fun with the game and leave some comments on the entry for the contest!

JsNebulo for @aneventapart 10K contest

This was my last year 10K an event apart contest, where I obtained a notable mention. It’s aclassic Amstrad game version that is less than 10KB (including graphics). It has been developed using javascript and html5 canvas element.

JsNebulo

JsNebulo screenshot

It was hard to fit it in only 10K. I took the character graphics from Amstrad emulator screenshots, cleaned with Gimp and compressed using the awesome PunyPNG tool. It gave me all graphics in only 1KB.

All the code had to be in client side, so everything is javascript. The complete source code was near 50KB. Too much for the contest. Then I had to compress it in someway. After much investigation I found tools in the internet that helped me a lot. The first was Closure Compiler. It parses your javascript, analyzes it, removes dead code and rewrites and minimizes what’s left. It’s quite impressive how it reduces the size of your javascript. But that was not enough. Then I applied the javascript compressor from JavaScript Utility Web Site. It compress all your javascript in a string and introduces some little code to decompress in page load time. It was all ok and my code plus graphics were less than 10KB!

Original Amstrad Nebulus

I’d like to add much more enemies and levels. But that was not possible due to size limitations and contest deadline. So I only could make the first game level. In a near future I’ll optimize all the code to work in mobile devices too and publish it here, allowing people to create new levels and share them.

You can try it in my contest entry, clicking in Lauch button. You have to make the frog reach the top of the tower being careful with enemies and traps. Use arrow keys to move, activate elevators and doors, and space key while walking to jump. Good luck!