I Wish I Could Make A Video Game

Fish. Shredder. Catch the People.

Yes, that is the actual name of the game I made with my 5yr old son. It’s a good name. =)

Something that I remember fondly as a child was spending hours in front of my Nintendo playing every game I could get my hands on. My classmates and I would even fantasize about making our own video game and drew out some very crude game designs to show off our great ideas. So when I was trying to brainstorm some ways to have some bonding time with my son Keaton it seemed so obvious… “We should make a video game!”. There were only 2 problems. Keaton is only 5 and can’t read yet, let alone code a game. I can make apps in Javascript but have never actually made a game before.

Disregarding all obstacles I brought up this idea with my son. I suggested that we make a video game and asked him for some input on the type of game he would like. His first idea seemed a bit boring to me, two characters that would throw a ball back and forth.

I suggested we make things a bit more exciting and work on a classic side-scroller. So we set out to make our first video game. My first step was learning how a video game was made in javascript and how to animate the whole screen at once. Up until now I had only worked on apps and websites in javascript so animation was something I had only done on single elements.

Javascript has a few different ways to accomplish animating items. The most common method is utilizing CSS. This works great when you want to manipulate DOM elements and you are only animating a few elements at a time. This doesn’t work as well when you want to animate the majority of your display most common in games.

Javascript’s Event Loop

The solution is to use an “Event Loop” when you want to animate to this degree. The basic idea is to have your code loop over and over. Each loop will execute your code and at the end of the loop will repaint to display the updated view. The simplest and beginner approach to do this would be to use the setInterval command. This command tells Javascript to execute a block of code every X milliseconds.

The problem with setInterval is that the timing isn’t actually exact to the milliseconds. Often times code execution can offset the timing just enough that your animations can look a little bit chunky. To get around this you could shorten the amount of delay between loops to essentially create a much higher frame-rate. This will work but will leave less time for code execution and it isn’t really solving the problem as much as it is just pumping up the frame-rate to fool the eye.

(more…)