Numbers Up
Interactive number-guessing game
by david_i_smith
HTML
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- begin outer wrapper -->
<div id="outer-wrapper">
<!-- begin inner wrapper -->
<div id="inner-wrapper">
<!-- begin playing area -->
<div id="play">
<h1>Numbers Up</h1>
<div id="game-board">
<div id="gauges">
<div id="guess">
<span class="label">Current</span>
<span class="value">
<!-- guess -->
</span>
</div>
<div id="guess-accuracy">
<span class="label">Low/High</span>
<span class="value">
<!-- guess accuracy -->
</span>
</div>
<div id="guesses-allowed">
<span class="label">Allowed</span>
<span class="value">
<!-- guesses allowed -->
</span>
</div>
<div id="guesses-made">
<span class="label">Made</span>
<span class="value">
<!-- guesses made -->
</span>
</div>
<div id="guesses-remaining">
<span class="label">Remaining</span>
<span class="value">
<!-- guesses remaining -->
</span>
</div>
</div>
<div id="tiles">
<!-- tiles -->
</div>
</div>
<!-- end game board -->
<div class="buttons">
<a href="#splash" class="button button-red dialog">Quit</a>
</div>
</div>
<!-- end playing area -->
</div>
<!-- end inner wrapper -->
</div>
<!-- end outer wrapper -->
<!-- begin dialogs -->
<!-- begin splash -->
<div id="splash" class="dialog">
<div class="dialog-content">
<h1>Numbers Up</h1>
<ul class="margin-left-0 padding-left-4 spaced-2">
<li>Guess the secret number before you run out of guesses.</li>
<li>The secret number changes from game to game.</li>
<li>Gauge the accuracy of your guesses with the low/high indicator.</li>
<li>Customize the number of guesses per game you're allowed.</li>
<li>Limitless replays: Play until your number's up!</li>
</ul>
<div class="buttons">
<a href="#play" class="button...
CSS
/* =============================================================================
Original images courtesy of:
http://static5.depositphotos.com/1032882/415/v/950/depositphotos_4159628-Number
http://www.judepullen.com/designmodelling/files/2012/09/Copy-of-graph-paper-background.gif
http://us.123rf.com/400wm/400/400/panyanon/panyanon1204/panyanon120400036/13282591-check-mark-stickers.jpg
========================================================================== */
/* BASIC */
body {
background-color:black;
font-family:'Comic Sans MS';
font-size:0.9em;
margin:0;
padding:0;
}
h1 {
margin:0;
text-align:center;
}
/* LAYOUT */
#outer-wrapper {
height:766px;
margin:0 auto;
padding:1em;
width:600px;
}
#inner-wrapper {
background-color:#fff;
background-image:url(http://www.judepullen.com/designmodelling/files/2012/09/Copy-of-graph-paper-background.gif);
background-position:0 0;
background-repeat:repeat;
border-radius:10px;
margin:0 auto;
padding:20px;
width:500px;
}
/* PLAYING AREA */
/* game board */
#game-board {
border:1px solid #777;
border-collapse:collapse;
border-width:1px 1px 0 0;
margin-top:24px;
width:100%;
}
/* gauges */
#gauges {
float:left;
margin:0;
width:100%;
}
#gauges > div {
float:left;
text-align:center;
width:100px;
}
#gauges > div:first-child {
border:solid #777;
border-width:0 0 0 1px;
width:99px;
}
#gauges > div > span {
border-style:dotted;
display:block;
padding:6px 4px;
}
#gauges > div > span.label {
background-color:#333;
border-color:#fff;
border-width:0 1px 0 0;
color:#fff;
height:20px;
}
#gauges > div > span.value {
background-color:#bbb;
border-color:#777;
border-width:0 1px 0 0;
height:21px;
}
#gauges > div:last-child span {
border:none;
}
#gauges > div > span.low {
color:#00c;
}
#gauges > div > span.high {
color:#c00;
}
#gauges >...
JavaScript
/* GAME PROPERTIES */
function Game () {
this.guess = null;
this.guessAccuracy = null;
this.guessesAllowed = null;
this.guessesMade = 0;
this.guessesRemaining = null;
}
/* GAME METHODS (normal) */
Game.prototype.getGuess = function () {
return this.guess;
};
Game.prototype.setGuess = function (guess) {
this.guess = guess;
};
Game.prototype.getGuessAccuracy = function () {
return this.guessAccuracy;
};
Game.prototype.setGuessAccuracy = function (guessAccuracy) {
this.guessAccuracy = guessAccuracy;
};
Game.prototype.getGuessesAllowed = function () {
return this.guessesAllowed;
};
Game.prototype.setGuessesAllowed = function (guessesAllowed) {
this.guessesAllowed = guessesAllowed;
};
Game.prototype.getGuessesMade = function () {
return this.guessesMade;
};
Game.prototype.setGuessesMade = function (guessesMade) {
this.guessesMade = guessesMade;
};
Game.prototype.getGuessesRemaining = function () {
return this.guessesAllowed - this.guessesMade;
};
Game.prototype.setGuessesRemaining = function (guessesRemaining) {
this.guessesRemaining = guessesRemaining;
};
/* GAME METHODS (writing) */
Game.prototype.writeGuess = function (guess) {
$('#guess > span.value').empty().append(guess);
};
Game.prototype.writeGuessAccuracy = function (guessAccuracy) {
var target, className;
target = $('#guess-accuracy > span.value');
className = guessAccuracy.toLowerCase();
target.empty().removeClass().addClass('value ' + className).append(guessAccuracy);
};
Game.prototype.writeGuessesAllowed = function (guessesAllowed) {
$('#guesses-allowed > span.value').empty().append(guessesAllowed);
};
Game.prototype.writeGuessesMade = function (guessesMade) {
$('#guesses-made > span.value').empty().append(guessesMade);
},
Game.prototype.writeGuessesRemaining = function (guessesRemaining) {
$('#guesses-remaining > span.value')
.empty()
.append(guessesRemaining);
};
/* APP */
var nu = {
isRunning: false,
settings: {
lowTile: 1,
highTile:...