Numbers Up

Interactive number-guessing game

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...

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 > div > span.match {
  color:...

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: 100,
...