Information Technology Reference
In-Depth Information
var not = (id == 0) ? 1 : 0;
var result = '';
// restart the game if game over
if($('ul').hasClass('gameover')) {
init();
$('h2').text('Which one of these fabulous tweets has more search results?!');
}
else {
if(correct[id] > correct[not]) {
//congratulate the player
result = 'Congratulations! you are a total rock star!';
$('sectionli:eq('+ id + ')').addClass('win');
}
else if(correct[id] == correct[not]) {
//if it is a tie
result = 'It is a tie! You\'re a winner by default!';
}
else {
//shame the player into playing again
result = 'Boo! You failure!';
$('sectionli:eq('+ id + ')').addClass('fail');
}
// addgameover class to page
$('ul').addClass('gameover');
$('h2').text(result + 'Tap a button to play again!');
}
});
});
Before we continue, it's worth nothing that we've placed a backslash in the “You're a
winner” line. This is because we've used an apostrophe, which JavaScript normally
interprets as the closing of a string. By placing the backslash before it, we've 'escaped'
it, telling JavaScript to use an 'alternate' meaning for the following apostrophe (in this
case, the alternate meaning is to simply treat it as part of the string).
The rest of the functions are pretty similar to what we already created, so we will skip
going over them to jump down to code that controls what happens when a button is
pressed. Here in this code, we are grabbing the index, or position in the unordered list,
of the button pressed. We then compare the value of that searchwiththe value of the
other search. If your choice is the one with the greater number, then you win, and the
blurb at the top of the page changes with a nice message congratulating you on your
accomplishment or a message of failure if you choose poorly. In our logic statement, we
also have instructions for what to do in case of a tie game and in casetwo searches have
the same exact number of votes.
Now go ahead and save your work, fire up your browser, and run your newly designed
application (see Figure 3-3)! While it is simple, I am sure you are starting to get a good
idea of how, using HTML5, CSS3, and JavaScript, you can make a pretty fun and
responsive web application in real-time!
