It’s well-known around here at 7 Generation Games that the first 10-20% of a project is going to take you 40% of the time. Progress is slow while you figure out how to do some task, but once you have that code written, you can reuse it many places. Here is an example with The Multiplication Dog. I did this in a couple of hours in my hotel room one night and it was a big hit with the classrooms that I visited the next day. Ever since I have been meaning to get back to it. The first step in making this into an actual mini-game was to write out a Game Design Document. Since this is a really simple game, this is a simple document.
CHARACTERS
The main character is your dog. Later in the game, your dog gets a dog friend.
GRAPHICS NEEDED
- Dog sprite (2 different dogs)
Background - Dog bowl
- Dog food
- Dog House
- Collar
- Howling dog for wrong answers
AUDIO NEEDED
- Dog bark
- Dog howl
STORY
The purpose of this game is to enliven the repetition of memorizing your math facts that everyone should know, like multiplication tables. Every time you get a math problem correct, you get to do something new with your dog.
- Name the dog
- Feed the dog
- Give the dog water
- Give the dog a house
- Give the dog a collar
- Get the dog a friend
I started with this:
I wanted to make several changes. These included making a background, using canvas to draw the dog image, putting an input box on the page, and animating the dog, instead of having just a single image each time. The main difference, which you can’t see here, is that this dog moves.
CSS
Let’s start with the style sheet. I created a dogs.css file and
#container {
margin-left: 50px;
width:900px ;
height: 600px;}
#canvas{width:900px ;
height:540px ;
background-image: url("../images/background.png");
}
.hidden {display:none ;}
#mathform {
margin: 50px;
}
h2 {margin-left: 100px ;}
.indent50{ margin: 50px;
}
This puts a nice image of grass in the background. It also sets my containers and canvas to fit within the game screen. This is important because this will go into an existing game with a defined screen size.
HTML
This part is super easy. This is all of the HTML there is.
<body>
<div id="container" >
<canvas id="canvas" style="z-index: 1;position:absolute;left:50px;top:60px;" height="540px" width="900"></canvas>
<canvas id="canvas2" style="z-index: 1;position:absolute;left:50px;top:60px;" height="540px" width="900"></canvas>
</div>
<audio autoplay id="audio1"><source type="audio/ogg"></audio>
<audio autoplay id="audio2"><source type="audio/mpeg"></audio>
</body>
The audio tags are deliberately left empty so that the sound files can be changed based on what is going on.
GRAPHICS AND AUDIO
The next step was to find some graphics and sound files. Since I am artistically challenged, I wandered on over to envato.com and downloaded some files. The nice thing about envato is that they have both personal and commercial licenses. So, if you are thinking about using something, you can download it and try it out for $5 or $10 and if you decide to use it in a game for sale you can go back and pay the commercial fee.
I also just put a shout out on Facebook for anyone who had a sound file of their dog they’d be willing to share and the lovely Emma Morris sent one, with video, all the way from Australia, which is now going to replace the “wrong answer” image and sound. My niece, Samantha, sent me a file of her dog, Bear, barking, which I’m currently using as a sound file for barking. I actually really need a puppy bark, so if you have a sound file of your puppy barking you’d be willing to let me use in the game, please email me at info@7generationgames.com
With my sprite sheets, audio and video prepared, for now, I’m ready to move on to the main meat of the game which is the javascript. That’s steps 2 through about 10, so I’ll cover that next.
Pingback: Making a Mini-Game Step 2: Setting it up | 7 Generation Games