Game Development And Prototyping In JavaScript

In my previous post I talked about why JavaScript is such a great language for newcomers to the programming world due to it's ability to get up and running within seconds without the sometimes complex steps that come with setting up a development environment. You don't need a fancy IDE and/or plugins to develop in JavaScript. You just open up notepad and you start typing. That same logic can also be applied to video game development. You could spend weeks or months learning all of the intricacies that come with a new game engine, such as Unity or Android Studio, or you can get your idea from concept to production in a couple of hours. A while back I wanted to learn to make games for mobile devices to further improve my skills and maybe make the next big hit that allows me to retire in my 20's. I purchase a few books on Android development. These to be exact:

Good books. They cover the basic game principles pretty well, which can used in any language and framework. They covered timing and sprites and menus and basic game principles that can be applied in any programming language. Good stuff. And then came the actual development process. I downloaded and installed Android Studio and began to get acquainted with all of its many features. This step tends to take a while, as IDE's nowadays are GB's large and have hundreds of functions built in. Already this step was a bit off putting. Just trying to get a simple 'Hello World' application to run can take hours upon hours.

You might have a really cool idea for a game and have all of your sprites drawn up by professionals and such, but if you're new to a game engine, then it's going to be a while before you can upload that puppy to an app market. Game engines take a big chunk of the work out for you, mainly the tedious work such as collision detection and physics and all of the small intricacies that have to do with images and audio but they do come at a hefty price. That price is the sometimes hefty learning curve.

A great game to look at for inspiration is madalin stunt cars 3, with great graphics and follow through it is something to look at and even play if you are on a break.

For professional quality games, you're probably going to want to go a different route than notepad and a few images you grabbed from the web. But then again there are quite a few games that were written solely in JavaScript that have taken the gaming market by surprise. Such games include: A Dark Room and Candy Box. Both awesome games in their own rites written solely in JavaScript.

These games offer the many basic game features such as timers and score systems and full RPG elements and they do so with the most minimal of design. The creators had more time to come with interesting concepts because they weren't busy worrying about configuration issues and app market permissions. They just had a really good concept and they wanted to get it out. Kudos to them.

With JavaScript's timing events you could create background sprites and move them accordingly based on certain triggers. You could for example have a character drawn onto your screen and based on that characters currently position and speed move the background sprite to show that the character is in motion.

The previous scene isn't too complicated to render. When you click start an interval is created with runs every 20 milliseconds and changes the position of the background sprite. When you hit stop the interval is cleared. Pretty basic stuff and just took minutes to get up and running. If we wanted to however do something a little more complicated, such as let's say have an object detect when it comes into contact with another object which is very common in video games, then we would have a good amount of code to write.

The example above shows a tiny bit of collision detection. On start the small particle will continue right until it hits a specified point, then it will come back to the beginning and start the process over again. It's considerably a few more lines of code than the previous background scrolling and it brings me to my next point. Most game related functions will need to be recreated by you. There are a few JavaScript game engines out now that you can use such as craftyjs that will take care of collisions and menu's and such, but we don't yet have something as big as Unity for example to work with.

There are however awesome people out there working daily on tons of new JavaScript libraries that can be easily implemented into your games. There are physics engines, and MVC frameworks, and 3D engines built in JavaScript ready for your implementing pleasure.

This just goes to show how versatile JavaScript is in the coding world. With just notepad and a browser you can make entire websites or entire games, or even both with just a few free tools. In the past few months I've probably spent more time playing games on my browser than I have on a console. And what I've seen in that time is incredibly impressive. In the upcoming months I hope to make a fully fledged JavaScript game and to document the entire process here on my blog for everyone's learning pleasure.

You can probably build any game ever in any language that you want and it would play roughly the same. First Person Shooters running in HTML5 exist, though they don't play that well on a browser just yet. The biggest benefit in doing so in JavaScript is the speed at which you can get an application up and running. The following is written in less than 100 lines of JavaScript and 1 single DOM element.

And because I'm no physics major, the credit for this goes to Burak Kanber and his awesome write up on Physics in JavaScript. Less than 100 lines! How awesome is that.

Just to reiterate some of the important parts about game development in Javascript. You don't need any fancy IDE's that take time to learn, you don't need to pay any licensing fees to develop using JavaScript and your code will run on any modern browser. If you just want to get to the point and have a game up and running ASAP, then JavaScript is a good route to take.