jquery开发的数字相加游戏，我在一轮中玩了632分（如下图），你能玩几分，哈哈...

我要试一试

下面贡献下这款“数字相加游戏”的开发过程。

html部分：

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

js脚本：

var $tCount = 64;
var $totalVal = 316;
var $level = 1;
var $score = 0;
var $targetVal = 0;

var trackTotalVal = function (val) {
    $totalVal -= val;
    return $totalVal;
};

// gameboard setup
var $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 make
var $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 player
var $displaySum = function (val) {
    $('.sum-display').text(val.toString());
};

// checks whether player exceeded or equaled the expected sum
var $checkSum = function (val, targetVal) {
    if (val === targetVal) {
        return "=";
    }
    else if (val > targetVal) {
        return ">";
    }
    else {
        return "<";
    }
};

// adds to and displays player's score
var $displayScore = function (val) {
    $score += val * 2;
    $('.score-display').text($score.toString());
};

// set up playing board
var $setupBoard = function () {
    $clearBoard();
    $makeBoard();
    $tCount = 64;
    $totalVal = 316;
    $targetVal = $genSum($level);
    $displaySum($targetVal);
    $displayScore(0);
};

// start game
var $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');
    });
});

css代码：

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;
}

本文为爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/4702

在线预览    源码下载