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. =)

Go play. Requires Chrome. Spacebar to fire. (Good luck)

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.

Keaton showing the game to his class.

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.

What we really need is a method for looping that has exact timing at 60 frames per second. We now have this in “requestAnimationFrame”. requestAnimationFrame is a new API method that the browser vendors have implemented to give direct access to the browser event loop. This is timed at exactly 60fps and is able to optimize any animations being performed as well as handle canvas and webGL animation.

There is a great article by Paul Irish on the subject as well as a good shim with a setInterval fallback for browsers that don’t support this new feature.

Once I figured out how to properly run an event loop for animation it was just a matter of coding the specifics of our gameplay. I had my son draw the hero of the game (a flying stick figure guy) which I scanned and enhanced the image quality a bit. Then we used a google image search to pick out some bad guys to battle. I recorded Keaton’s voice to add in as the hero character’s sound effects. An “umph” for when he get’s hit and an “ow!” for when the player gets hit enough times for game over. So now we have a hand drawn hero with custom sound effects, hand picked baddies, and the start to our game.

Keaton seemed to really enjoy being involved in the process and liked making gameplay decisions. It took some effort on my part to keep him involved because he is easily distracted by games that are already finished and waiting to be played on his computer. To keep him involved I suggested that we show his friends in pre-school the game once we get close to finishing. He had a show-and-share day coming up in just a couple weeks so it seemed like the perfect opportunity. I put in a few extra hours on the weekends added a bit of polish and had Keaton test out the game along the way. Things were looking good and he was really excited to share what we made with his friends.

I needed a way to let the kids play the game without using my laptop directly as I wanted to minimize potential accidents and make it easier on their small hands because sometimes using the arrow keys can be a bit tough. So with a little googling I cam up with a great solution involving two free utilities that allow you to use a Nintendo Wii controller as an input device on a mac. The first utility wJoy allows you to connect your Wii-mote via bluetooth and your computer will recognize it as a standard game controller. The second utility needed was Enjoy2. This is used to map joystick buttons to keyboard keys. I needed to do that because our game ran in a browser and by default web browsers don’t allow direct joystick input. With those two utilities installed and configured I easily mapped my keyboard input to a spare Wii-mote we had lying around and it worked wonderfully with our game. We were able to control our character’s movement and shoot fireballs all with a game controller most people have used. It was now ready for a group of 4-5 year olds without fear of them knocking over my laptop.

The big show-and-share day had finally arrived and Keaton was very excited, not only to show the game but because his dad was coming to school with him.  All the kids gathered around my laptop and watched Keaton play his game. They waited anxiously for their turn to play. So one by one they all took their turn with more excitement than I had anticipated. They all agreed that they wished they could make their own video game like Keaton.

The post I Wish I Could Make A Video Game appeared first on SeedCode.

Source