Web Tutorial: Easter Egg Hunt (Part 4/4)

Hey, beautiful people! This is the final part, and we will soon be good to go!

We want the game to end when the user has collected 30 eggs, or if the number of minutes left has reached 0. In the showChoices() method, we will do just that. If either condition is met, we do not display any of the choices that would normally show, and instead display the choice to a section that either tells the users that they have run out of time, or congratulates them for winning the game.

We begin by declaring variable gameOver, and set it to false as a default.

index.html

"showChoices" : function(sectionName, links)
{
    var gameOver = false;
    $(".choices").html("");

If the timeLeft property is true and the current section is not "timeout", we set gameOver to true.
index.html

var gameOver = false;
$(".choices").html("");

if (game.timeLeft == 0 && sectionName != "timeout")
{
    gameOver = true;
}

Then we create a new button with some explanatory text, and append it to the choices div the way we would for any other choice. We then use the click event to point the user to the section "timeout".

index.html

if (game.timeLeft == 0 && sectionName != "timeout")
{
    gameOver = true;

    var div = $("<div></div>");
    var button = $("<button>Go</button>");
    div.html("You have run out of time!");
    div.append(button);
    $(".choices").append(div);

    button.click(()=> {
        game.gotoSection("timeout", 0, null);
    });    
}

Duplicate that If block.

index.html

if (game.timeLeft == 0 && sectionName != "timeout")
{
    gameOver = true;

    var div = $("<div></div>");
    var button = $("<button>Go</button>");
    div.html("You have run out of time!");
    div.append(button);
    $(".choices").append(div);

    button.click(()=> {
        game.gotoSection("timeout", 0, null);
    });    
}

if (game.timeLeft == 0 && sectionName != "timeout")
{
    gameOver = true;

    var div = $("<div></div>");
    var button = $("<button>Go</button>");
    div.html("You have run out of time!");
    div.append(button);
    $(".choices").append(div);

    button.click(()=> {
        game.gotoSection("timeout", 0, null);
    });    
}

Now make the following changes. You should see what we're trying to do here. The clause has changed to compare the value of the eggs property, and the section name is "victory". And, of course, the choice text is different.

index.html

if (game.timeLeft == 0 && sectionName != "timeout")
{
    gameOver = true;

    var div = $("<div></div>");
    var button = $("<button>Go</button>");
    div.html("You have run out of time!");
    div.append(button);
    $(".choices").append(div);

    button.click(()=> {
        game.gotoSection("timeout", 0, null);
    });    
}

if (game.eggs >= 30 && sectionName != "victory")
{
    gameOver = true;

    var div = $("<div></div>");
    var button = $("<button>Go</button>");
    div.html("Congrats! You have completed the Easter Egg Hunt!");
    div.append(button);
    $(".choices").append(div);

    button.click(()=> {
        game.gotoSection("victory", 0, null);
    });    
}

We follow up by making sure the other choices do not show up if gameOver is true.

index.html

if (!gameOver)
{
    for (let i = 0; i < links.length; i++)
    {
        var div = $("<div></div>");
        var button = $("<button>Go</button>");
        div.html(links[i].text);
        div.append(button);
        $(".choices").append(div);

        button.click(()=> {
            game.gotoSection(links[i].section, links[i].time, links[i].eggs);
        });                                
    }
}

In order to test this, we should do this at "test". This ensures that if the user chooses to "Get the Mercedes", time will go to 0 (by deducting 120) and eggs will increase by 30. Thus both conditions are met. In reality, your game should make this scenario extremely unlikely, if not impossible.

sections.js

"test" :
{
    "content" : "<p>(test)</p>",
    "flag" : false,
    "visitedChecks" : [
        { "section": "testGetMercedes", "content" : "<p>You have the Mercedes.</p>", "choices": null, "contentElse" : "<p>You see a Mercedes.</p>", "choicesElse" : { "time" : -120, "eggs" : 30, "section" : "testGetMercedes", "text" : "Get the Mercedes"} },
    ],
    "messages" : [],
    "choices" : []    
},

And there we are. The two choices are now there, and the choice that would have been there, "Go back to test", is no longer there. The "Restart" choice is still there, because we didn't (and aren't going to) mess with it.

Now add these sections, "timeout" and "victory".

sections.js

"begin" :
{
    "content" : "<p>Easter has come. The sky is bright and cheery. You are on the porch of the house you live in, facing the Easter Bunny. The Easter Bunny wiggles his little nose and tells you, &quot;<b>Happy Easter! I have hidden several Easter eggs all around the garden, outside of the house. Your mission is to find 30 eggs within 120 minutes. Good hunting!</b>&quot; With that, he hops away.</p><p><img src='img_easterbunny.jpg'></p><p>You are now seated on the steps, and the hunt is under way.</p>",
    "flag" : false,
    "visitedChecks" : null,
    "messages" : [],
    "choices" :
    [
        { "time" : -1, "eggs" : null, "section" : "test", "text" : "Begin the hunt!"}
    ]
},
"timeout" :
{
    "content" : "<p>The Easter Bunny appears. &quot;<b>Well, looks like your time is up! Better luck next Easter!</b>&quot;</p><p><img src='img_easterbunny.jpg'></p>",
    "flag" : false,
    "visitedChecks" : null,
    "messages" : [],
    "choices" : []
},
"victory" :
{
    "content" : "<p>The Easter Bunny appears, looking impressed. &quot;<b>Well, looks like you managed to complete the Easter Egg Hunt! That is great work!</b>&quot;</p><p><img src='img_easterbunny.jpg'></p>",
    "flag" : false,
    "visitedChecks" : null,
    "messages" : [],
    "choices" : []
},    
"test" :
{
    "content" : "<p>(test)</p>",
    "flag" : false,
    "visitedChecks" : [
        { "section": "testGetMercedes", "content" : "<p>You have the Mercedes.</p>", "choices": null, "contentElse" : "<p>You see a Mercedes.</p>", "choicesElse" : { "time" : -120, "eggs" : 30, "section" : "testGetMercedes", "text" : "Get the Mercedes"} },
    ],
    "messages" : [],
    "choices" : []    
},

Now try clicking through!

Final touches

This isn't the end of it, of course. All I have given you are the building blocks to create your own Easter Egg Hunt story. The entire listing of sections.js is at this repository.

And if you are using that, you should definitely make these changes to your showContent() method.

index.html

var invStr = "Eggs x " + game.eggs + "<br />";
//if (game.hasVisited("testGetMercedes")) invStr += "Mercedes x 1<br />";
if (game.hasVisited("porch_kuching")) invStr += "Cat x 1<br />";
if (game.hasVisited("porch_shedkey")) invStr += "Shed key x 1<br />";
if (game.hasVisited("shed_boltcutters")) invStr += "Bolt cutters x 1<br />";
if (game.hasVisited("neighbor_ladder")) invStr += "Ladder x 1<br />";
$(".inventory").html(invStr);

That's all!

I hope you enjoyed this web tutorial. And I hope you enjoy your Easter!

Your Easter Bunny,
T___T