Game Design: Reusable Code, Part 2 1

Well, it’s been a minute. Months ago, I started writing about reusable code and was then interrupted by flying around the country to present game results, getting an alpha version of our Aztech game to testers, getting Forgotten Trail ready for release FRIDAY (!!!) etc.

You can read Part 1 here where I laid out the problem of creating a game where students answer questions and earn an item for each correct answer.

They start with a barnyard and get a cat, then a bowl for the cat, then some ducks and so on.

On to part 2 … let’s look at the functions that change the scene. These accomplish two things:

1.  These get around the refusal of iOS to autoplay audio and video. This design does make sense because Apple doesn’t want irate customers contacting them when they get charged for downloading data they didn’t want.
2. The code is broken down into a few pages rather than dozens, making it easier to maintain. (In a later post, I will show how a game like this is made into a single page.)

THE CODE

First of all, note that this uses jQuery. We use our locally hosted version of jQuery and not the Google hosted one. The reason why is a discussion for another day. Whichever you decide, this application requires jQuery

<link rel="stylesheet" href="../jquery/jquery-ui/jquery-ui.min.css" />
<script type="text/javascript" src="../jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui/jquery-ui.min.js"></script>

Since you have jQuery, the

$(function() {
}) ;

is short hand for

$(document).ready(function() {
});

Which means that the code inside the brackets should not be executed until the document is ready. This is useful because otherwise you may get an error when you try to, say, apply a function to the element with the ID of next and that element hasn’t been loaded on the page yet. If interested, you can read more about it here.

$(function () {

    $("#next").on("click", function (evt) {
        changeScene();
    });

  playAudio(0) ;

});

So … when the element with the ID of ‘next’ is clicked, the changeScene function will be executed.

Also, when the document is ready, I want the playAudio function to be executed, and I am passing it a value of 0.

As you might imagine, the playAudio function plays the audio (duh!).  I want it to do two things when the next arrow is clicked:

1. Pause the current audio
2. Change the source file for the audio1 element to be the sound file for the next “page”
3. Play the updated audio

First, though, let’s set the current scene to 0 and create an audio element.

var curScene = 0 ;

var audio = new Audio('') ;

Now, on to the audio function

function playAudio(scene){

 $('#audio1').attr('data-src', "sounds/barn1_" + scene + ".mp3");
 audio.src = $('#audio1').attr('data-src');
 audio.play();
}

First, I assign to the element with the id of audio1 a data attribute with the value of “sounds/barn1_” + whatever the scene is  + “.mp3” ;

In the sounds directory, the audio for scene 1 on page one is named barn1_1 , for scene 2, barn1_2  and so on.

Second, I assign the src file of the audio element to be whatever that data value is.

Third, I play the audio.

The audio function is called when the page first loads and every time the scene changes.

The changeScene function does most of the work and that is the topic for my next Code Talk post, which will not take another two months, I promise. In fact, it is right here.