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