A Gallery of JavaScript Projects In Progress

A few years back I started to switch a lot of my development side projects to JavaScript. It was becoming clear that with the increasing capabilities and performance of browsers, the web would be a platform for applications and games, and it was exciting to jump in and start experimenting with this.

I have worked on many JavaScript projects over the last few years, and while I have released several of them, a much larger number have gone unreleased. In this article we are going to take a tour through some of my in-progress JavaScript/HTML5 games and applications, and discuss some of the things learned while working on them.

Before we begin, I should warn you that many of the games below include programmer art, and so not everything looks great. Programmer art is artwork that is made by a programmer as a placeholder, rather than by a proper artist. I am a much better programmer than artist, and so I feel that my time is better spent on code. Some of the art is from other sources, and I will provide attribution where appropriate.

Back in August an Inaugural Asset Jam on was proposed on Reddit where it was suggested that everyone use the same art to make different games. The art was a platformer art set by Kenney that was made public domain as part of the Open Bundle. Since then, Kenney has released more public domain art and his work is becoming a bit of a standard as placeholder art for indie game developers.

When making this, I leveraged my EJU Game Engine which supports Box2D integration. I had already tuned Box2D for platformer games, and so it was easy to get it up and running with a very smooth and responsive feel. This project used NodeJS to provide a WebSocket server for multiplayer.

You can read all about the project HERE. A gameplay video can be found HERE.

This is the project I am asked about the status of most often. After the game jam completed I did keep working on this for a while. I fixed bugs and added some more features. I really like the feel of this game, and I hope to someday find the time to bring it to release.

In December of 2012 I released Leshy Fractal Explorer. Despite this being a very powerful fractal browser and much more feature packed than other popular 2D fractal browsers on the web, it received almost no attention. You can try the old version HERE or read more about it HERE.

I have a few ideas why this program wasn't well received. I chose very conservative default settings. This helps performance, but unless people raise the settings things don't look as good. Also, fractals lose details quickly on zooming from the low maximum iteration count. Right before releasing I decided to not make the application take up the full window. Users can still make it fill the full window, but by default it is just embedded on a page and so it looks less impressive. The biggest mistake though was the user interface, which isn't all that intuitive. Years ago I had spent many hours playing with the Fractint program. In the old days a program that required you to memorize dozens of key combinations was considered normal, but these days, especially on the web, people have a very short attention span, and if they can't figure it out quickly, they leave.

After the release I began working on a major new version. I added tons of features including stripe average coloring modes and color cycling. I fixed some bugs and improved performance as well. I could release it as is, but I feel like the new version needs major UI refinements, and I have been holding off on the release until I find the time to do that.

It seems that most people interested in game development in recent years took some influence from Minecraft, and I am no exception. I made a 2D block-centric sandbox game with a randomly generated giant world including caves. On the technical side, this game includes a caching system for storing and retrieving sections of the world and seamlessly adding and removing them from Box2D to keep performance up.

As a kid, I played a ton of the early Sierra adventure games. There was something special about that genre that I feel is lost even on most similar modern games. I decided to create an engine for this type of game, and Burrito Quest was my demo for testing the engine.

Scenes in the engine were multi-layer images that included all objects, event zones, and collision maps. The images were converted through some Perl magic into something usable by the engine. It was designed this way so that artists could completely manage and update the scenes independently of the programmer while using the tools they were most comfortable with. I also made a server side web application in Perl for managing game assets to make collaboration easier.

In the demo game, Burrito Quest, the player controls a sentient burrito who is imprisoned in the basement of a burrito shop. The owner keeps him there and routinely comes in to collect his sweet guacamole tears, which are an essential ingredient in the shop's burritos. The player must escape the shop and find freedom.

In this type of game the programmer mostly does scripting, and the really important work is left to artists, musicians, and writers. I think this style may be perfect for game jams, and if I can find the time I would love to make an open source version to use for that purpose.

After making the Leshy SFMaker sound effects generation utility I ended up writing several programs built on top of it. I created a synthesizer library that used SFMaker sound text to define instruments. Using that, I made a piano application to test out the synths, and a sequencer to provide an alternate way of generating music with SFMaker. An early version of the SFMaker synth library found its way into Leshy Fractal Explorer where it is used to create fractal music.

Bunny FooFoo was framed years ago by the field mice, and now he's back and seeking revenge. This is a stage based platformer game taking influence from Bubble Bobble and Snow Bros. The current implementation has a few dozen special items that make things happen or give power-ups to the player. Two players can play at the same time with controllers or a shared keyboard.

This game feels and plays well and has a somewhat addictive quality to it. To release it though, there are still many more items, enemies, and art assets that need to be completed. Most of the current artwork was done by Judy Haber

In order to build out features of the EJU Game Engine to better support top down games, I made a driving demo. Box2D was used to provide physics, and lots of custom car behavior was added for gears and steering. I focused a lot on audio, and made it so that the car's engine noises adjust pitch as gears are switched. World audio was made dynamic so that the volume of world events depended on the distance and force of impact. I added basic multiplayer support as well, using WebSockets and NodeJS.

I have started a few different platformer game projects, but overall they have just resulted in nice tech demos. Support was added for platformer elements, such as one sided and moving platforms, acid pools, rideable entities, power-ups, and physics aware particles. The work that went into building all the features for these demos was useful in many other places, such as Foo Foo's Revenge, and the game jam game Freedom Frog.

In this game the player must safely escort a chicken through a dungeon. Random levels are generated procedurally, and dynamic lighting is simulated with multiple and moving light sources. For example, a fireball illuminates everything around it, and a lamp that is turned on and dropped continues to light the surrounding area. A number of different weapons and other items can be found throughout the levels. Gameplay takes influence from the games NetHack and Gauntlet.

Leshy Animator is a web based keyframe based animation utility. This is very different from Leshy SpriteSheet Animator, which deals with animations from sprite sheets. Instead, Leshy Animator takes sliced up character images, and allows you to create animations by altering image positions and rotations on a timeline. It supports all the standard tweens and can either be used as library to provide highly accurate and controllable animations with event triggers, or it can export sprite sheets. Experimental support for bones also exists, allowing a skeleton to be defined so that moving one limb appropriately pulls others while honoring distance and rotation constraints.

A little boy frantically tries to catch dogs and cats being tossed down from the sky by an angry cloud. This was an attempt at a mobile friendly game. It takes inspiration from the old Atari 2600 game Kaboom. All artwork was done by Judy Haber.

This game is fully playable and works well. It has some surprises and bonus waves to add some variety. A few more cleanups and a little polish is needed to make this releasable.

I worked with Judy Haber at a Boston Game Jam event to create this game over a weekend. She did the art, and I did the programming. The theme of the jam was "Dawn." In the game two vampires compete with each other to see who could wreak the most havoc in the village before dawn. Guards try to stop them, and deer provide speed power ups if they are caught. Both players are controlled from the keyboard.

Overall, for a game jam game this came out really well. Most of the features in our design were implemented. There was one problem though. The game just isn't all that fun. It works as designed, but it is missing that special something that makes you want to keep playing.

When support for accessing camera devices was added to the browser, I really wanted to create some motion based games. I wrote a series of video filters, some of which attempted to do motion and feature detection, and others that tried to create nice looking effects based on the video input. I spent some time working on this, but I had difficulty getting the accuracy of the detection high enough for games with low quality cameras and bad lighting. I was able to reliably use a bright-blue oven mitt for tracking, but not people's hands or bodies. I think it is possible to do this with better detection algorithms, but for now those attempts are on hold.

After seeing the Liberated Pixel Cup artwork which was released under open licenses, I decided to make an orthographic renderer for the EJU Game Engine. I wrote importers for a variety of things in their tile set, and then built a world to try it out. The result looks fantastic and people always seem impressed when they see it. This renderer and the associated demo were actually very easy to write. I've written many other things that are much more complicated and interesting from the technical side, but this renderer with the LPC art serves as a reminder that non-programmers when looking at your games will find something simple with good artwork far more impressive than something complex with bad artwork.

This proof of concept was made to test how well pinball games would work on the web. Box2D is used for physics. While my level design has some flaws, the proof of concept went very well, and it behaves and feels like it should.

Leshy Pixelizer is an application that takes an image (usually a photo) and turns it into pixel art. Unlike some other similar programs that exist out there, this is done completely on the client side, and allows for real time adjustments to be made and previewed. A number of classic palettes exist as presets, and limited palettes can also be created by specifying how many colors to sample from the image. The hue, saturation, and value can be adjusted to further alter the resulting image. This needs a few fixes and some UI work, but otherwise it is almost ready for release.

A hamster inside of a ball is attempting to escape from a house. In a classic arcade style he must dodge enemies of increasing difficulty ranging from the family cat to soldiers intent on capturing him. Box2D is used for physics, and movement exerts rotational force on the ball giving the game a unique feel. A Katamari inspired bonus mode was also implemented, where the hamster can roll over objects to attach them to his ball and make it bigger.

One thing that has become very clear from working on all these projects and bringing several to release is the distinction between prototyping and making something releasable. It may be possible to create a working prototype of a simple program in just a few hours, but to make something that is polished and ready for release could often take as much if not more time than the initial development. This could be reduced to some extent by working with good tools and frameworks, but it is always an issue, and something that is often overlooked.

I think it is useful to work on many diverse projects in order to grow as a programmer and engineer, but having incomplete projects is frustrating. My new approach is to try to scope things down so that goals are attainable. It is much more rewarding to make something simple that other people can use, than to make something complicated that never gets released.

On the other hand, making complicated things does help you refine for your skills. I feel like one very notable thing that changed for me is how I structure programs. I have gotten much better at breaking down and organizing code so that even when the code base gets very large, it is still easily managed. It seems that these days in the JavaScript world a lot of people are relying on frameworks to provide rules of structure for them. There is nothing wrong with this, but I think when consistent standards are used the frameworks and their burdens are often unnecessary.

Another thing I've improved at is managing my time. I have a very limited amount of time to work on these types of projects. When I sit down to work I need to get things done and not be distracted. I can't afford to get stuck on problems either. Over the last few years I've worked on a very large number of programs outside of normal paid work time and this page only contains a small subset of them. Without properly focusing and managing my time, this amount of productivity would not be possible.

I decided to put this page together because I realized I needed to change my way of handling projects. In the past I would often get an idea and immediately begin working on it. Building a game or application is a lot of fun, but polishing and preparing them for release begins to feel more like work. Usually in that phase I'd get distracted and find myself starting on a new idea. I'd return to the old ones, but over time I found my attention getting spread very thin over too many projects.

Moving forward I am going to attempt to greatly limit how many side projects I allow myself to work on at any time. Unfortunately, this means that many of the projects on this page are on hold. In their place, I've chosen a particular game development project that I am really excited about. It is a big project, but work has begun, and when updates are available I will post about it on this blog.