Game Design: Re-usable code, part 3

To refresh your memory – this particular activity gives the player a new item – cat, duck, goat, etc. , for their farm – for every math problem answered correctly.

Obviously, this code can be re-used for any type of problem and any type of game where you collect objects, be it dragons or dresses.

The problem is laid out here in post 1

and the functions to play audio and change scene here, in post 2

Now we come to the changeScene function which is what does most of the heavy lifting in this simple little program.

Everything here is one function, so it begins with the word function, the name of the function, followed by an empty set of parentheses, since there are no parameters passed to this function in this example (many other occasions when I used it, there are), and everything is between these two brackets {} at the top and the bottom.

The first thing that happens is that I pause the audio, so it is not still playing from the previous scene. Sometimes players are impatient and press the next arrow before the audio has finished and I don’t want tow or three sound files playing at once.

Next, I increment the value of the current scene by 1, this is what curScene++ does.

The rest of this is all one statement, the switch statement. Each time the scene is changed (by clicking on the next arrow), it hides the scene text, then changes the words in the text, then fades the text back in. I do this so that it is a little more obvious the text has changed.

It also gets the element with the id of ‘sceneimg’ and changes the image, which happens to be the game character, Brinley. She turns from facing one direction to the next, or facing forward. The css in some of the cases below also moves Brinley around on the page.

After 5 “pages” – the original screen plus 4 more – the player goes on to answer the first problem.

Now, this isn’t real animation, I’ll get to that in another post. As I said, this is a pretty basic foundation.

However, what it does do is replace sound, text and images each time you click on the “next” arrow. By doing this, you can have a sort of moving graphic novel . In this case, I have five “pages” on one page. There are many more “pages” in some other places where I use this (these posts ARE on re-usable code, after all).

// Changes image, sound and text for each scene ;
function changeScene() {
// Clear the scene audio ;

audio.pause();

curScene ++ ;
switch (curScene) {
case 1:
$("#scenetext").hide() ;
$("#words").text("My Mom says I can buy a cat if it doesn't cost more than $15.") ;
$("#scenetext").fadeIn("slow");
document.getElementById("sceneimg").src = "barn_art/brinley_right.png";

$("#sceneimg").css({top: 200, left: 200, position:'absolute'});
playAudio(curScene);
break;
case 2:
$("#scenetext").hide() ;
$("#words").text("That farmer down the road, Mario, is selling three cats for $36.") ;
$("#scenetext").fadeIn("slow");
document.getElementById("sceneimg").src = "barn_art/brinley_left.png";
playAudio(curScene);
break;
case 3:

$("#scenetext").hide() ;
$("#words").text("I REALLY want a cat.") ;
$("#scenetext").slideDown("slow");
document.getElementById("sceneimg").src = "barn_art/brinley_front.png";

$("#sceneimg").css({bottom: 160, left: 160, position:'absolute'});
playAudio(curScene);
break;
case 4:
$("#scenetext").hide() ;
$("#words").text("Please help me figure out how much they cost!") ;
$("#scenetext").slideDown("slow");
document.getElementById("sceneimg").src = "barn_art/brinley_front.png";
playAudio(curScene);
break;

case 5:
window.location.href ="barnq1.html" ;
break;
}

}

Underneath this code there is just a tiny bit of css and html. I’ll save that for the next post so your brain can get a rest.

Why do it this way? Why not just make 5 pages? One reason is that we use this format A LOT (re-usable code). On the average, I’d say it saves us 5 pages. It’s easier to maintain a project with 400 pages than 2,000. That’s one reason.

—-

Forgotten Trail (where this code is included) can be yours for the paltry sum of $4.99 for a limited time only!