<div class="container">        <div class="how-to-play">            <h1>                How to Play</h1>            <p>                数字加法游戏-- 单击左侧的数字色块相加等于右上角的数字，当相等时，这几个色块消失。            </p>            <button id="got-it">                OK, 开始!</button>        </div>        <div class="board">        </div>        <div class="right">            <span class="sum-display"></span><span class="score-display"></span>            <button id="restart">                重新开始</button>            <a href="#!" class="how-to-play">游戏攻略</a>        </div>    </div>    <div style="text-align: center; font-size: 12px;">        <br />        来源：<a href="http://www.w2bc.com/shili">w2bc.com(爱编程)</a> 作者：拎壶充    </div>

var $tCount = 64;var $totalVal = 316;var $level = 1;var $score = 0;var $targetVal = 0;var trackTotalVal = function (val) {    $totalVal -= val;    return $totalVal;};// gameboard setupvar $tiles = function () {    return [1, 1, 1, 1, 1, 1, 1, 1,                2, 2, 2, 2, 2, 2, 2,                3, 3, 3, 3, 3, 3, 3,                4, 4, 4, 4, 4, 4, 4,                5, 5, 5, 5, 5, 5, 5,                6, 6, 6, 6, 6, 6, 6,                7, 7, 7, 7, 7, 7, 7,                8, 8, 8, 8, 8, 8, 8,                9, 9, 9, 9, 9, 9, 9];};var $tilesShuffle = function (arr) {    var $newArr = [];    var $randomIndex;    var $element;    while (arr.length) {        $randomIndex = Math.floor(Math.random() * arr.length);        $element = arr.splice($randomIndex, 1);        $newArr.push($element[0]);    }    return $newArr;};var $makePieces = function (arr) {    var $pieces = [];    var $piece;    while (arr.length) {        $piece = ‘<div>‘ + arr.pop().toString() + ‘</div>‘;        $pieces.push($piece);    }    return $pieces;};var $makeBoard = function () {    var $gameTiles = $makePieces($tilesShuffle($tiles()));    while ($gameTiles.length) {        $(‘div.board‘).append($gameTiles.pop());    }};var $clearBoard = function () {    $(‘.board‘).empty();};// generates # for player to makevar $genSum = function (level) {    var $maxVal = (level * 5) + 10;    var $minVal = 10;    if ($totalVal > $maxVal && $tCount > 10) {        return Math.floor(Math.random() * ($maxVal - $minVal + 1) + $minVal);    }    else if ($tCount <= 10 && $totalVal > $maxVal) {        return $genSumFailsafe($maxVal);    }    else if ($totalVal <= $maxVal) {        return $totalVal;    }};// fixes the ‘$genSum generates # too big or not possible w/ available tiles‘ bug.var $genSumFailsafe = function (max) {    var $max = max;    var $liveTiles = [];    var $l = 0;    $(‘.board div‘).not(‘.dead‘).each(function () {        $liveTiles.push(parseInt($(this).text()));    });    $liveTiles.sort(function (a, b) {        return b - a;    });    for (i = 0; i < $liveTiles.length; i++) {        for (j = 1; j < $liveTiles.length; j++) {            $l = $liveTiles[i] + $liveTiles[j];            if ($l <= $max) {                return $l;            }        }    }};// displays expected # to playervar $displaySum = function (val) {    $(‘.sum-display‘).text(val.toString());};// checks whether player exceeded or equaled the expected sumvar $checkSum = function (val, targetVal) {    if (val === targetVal) {        return "=";    }    else if (val > targetVal) {        return ">";    }    else {        return "<";    }};// adds to and displays player‘s scorevar $displayScore = function (val) {    $score += val * 2;    $(‘.score-display‘).text($score.toString());};// set up playing boardvar $setupBoard = function () {    $clearBoard();    $makeBoard();    $tCount = 64;    $totalVal = 316;    $targetVal = $genSum($level);    $displaySum($targetVal);    $displayScore(0);};// start gamevar $initGame = function () {    $level = 1; // game initiates @ level one, score 0    $score = 0;    $setupBoard();};$(function () {    var $selectedTotal = 0;    var $r; // variable to hold value of checkSum call    var $t = 0; // variable for tracking # of live tiles    var $this;    $initGame();    $(document).on(‘click‘, ‘.board div‘, function () { // activates when player clicks piece        $this = $(this);        if (!($this.hasClass(‘dead‘))) {            $this.toggleClass(‘selected‘);            if ($this.hasClass(‘selected‘)) {                $selectedTotal += parseInt($this.text());                $r = $checkSum($selectedTotal, $targetVal);                $t++;                if ($r === "=") {                    $(‘.selected‘).empty().addClass(‘dead‘).removeClass(‘selected‘);                    $displayScore($selectedTotal);                    // tracking available tiles & pts left                    $tCount -= $t; // subtracts # of used tiles from $tCount                    $totalVal -= $selectedTotal;                    // reset and init for next move                    $t = 0;                    $selectedTotal = 0;                    // check to see whether player levels up                    if ($tCount === 0) {                        $setupBoard();                    }                    else {                        $targetVal = $genSum($level);                        $displaySum($targetVal);                    }                }                else if ($r === ">") {                    $(‘.selected‘).removeClass(‘selected‘);                    $selectedTotal = 0;                    $t = 0;                }            }            else {                $selectedTotal -= parseInt($this.html());                $tCount++;            }        }    });    $(‘#restart‘).click(function () {        $initGame();    });    $(‘a.how-to-play‘).click(function () {        $(‘div.how-to-play‘).addClass(‘displayed‘);    });    $(‘#got-it‘).click(function () {        $(‘.how-to-play‘).removeClass(‘displayed‘);    });});

body {  font-family: "Arvo";}small {  display: block;  width: 700px;  margin: 10px auto;  text-align: center;  color: #9ec7b3;}a {  color: #9ec7b3;}a:hover {  color: #5dbc8e;}span {  display: inline-block;  width: 130px;  text-align: center;  border-radius: 2px;}button {  display: inline-block;  width: 140px;  height: 40px;  margin-top: 10px;  padding: 10px;  text-align: center;  font-family: "Arvo";  font-weight: 400;  font-size: 120%;  color: #fff;  border: none;  outline: none;  border-radius: 2px;  background-color: #9ec7b3;}button:hover {  background-color: #5dbc8e;  cursor: pointer;}.container {  width: 700px;  height: 540px;  margin: 0 auto;  padding: 20px;  background-color: #dfdfdf;  border-radius: 2px;}.right {  width: 150px;  height: 528px;  float: right;  text-align: center;}.sum-display {  height: 70px;  padding: 5px;  font-weight: 700;  font-size: 3.5em;  color: #fff;  background-color: #303c36;}.score-display {  height: 40px;  margin-top: 10px;  padding: 15px 5px 0 5px;  background-color: #fff;  color: #303c36;}.score-display::before {  content: "Score: ";  font-weight: 700;}.board {  width: 528px;  height: 528px;  float: left;  padding: 5px;  background-color: #5dbc8e;  border-radius: 2px;}.board:hover {  cursor: pointer;}.board div {  display: block;  height: 40px;  width: 40px;  float: left;  margin: 2px;  padding: 15px 10px 5px 10px;  text-align: center;  font-size: 150%;  font-weight: 700;  color: #5dbc8e;  border: 1px solid #5dbc8e;  border-radius: 2px;  background-color: #fff;}.board div:hover {  background-color: #dfdfdf;}.board .selected {  background-color: #303c36;}.board .selected:hover {  background-color: #303c36;}.board .dead {  background-color: #9ec7b3;}.board .dead:hover {  cursor: default;  background-color: #9ec7b3;}div.how-to-play {  display: none;  position: absolute;  width: 700px;  height: 540px;  margin: 0 auto;  padding: 10px;  background-color: rgba(255, 255, 255, 0.8);  color: #303c36;  z-index: 2;}div.how-to-play.displayed {  display: block;}div.how-to-play p {  width: 60%;}a.how-to-play {  display: block;  margin-top: 10px;}