JQuery翻轉拼圖遊戲是通過jQuery和Bootstrap 3實現，UI主要使用了Bootstrap的Modal彈窗，對其他模塊涉及較少，所以不需要特別熟悉Bootstrap，遊戲邏輯通過jQuery和JavaScript實現。
項目效果圖如下：
game/index.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> 藍色拼圖 </title> <!-- 引入Bootstrap css --> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <!-- 引入自定義 css --> <link rel="stylesheet" href="css/style.css"> <!-- 引入jQuery和Bootstrap js --> <script src="js/jquery-1.11.1.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <!-- 引入遊戲主程序js --> <script src="js/game.js"></script> </head> <body> <div class="container"> <div class="heading"> <h1 class="title"> jQuery翻轉拼圖遊戲 </h1> <div class="scoresContainer"> <!-- 現實當前遊戲級別 --> <div class="currLevel"> 當前級別：<b>1</b> </div> </div> </div> <div class="aboveGame"> <!-- 遊戲按鈕 --> <a class="reset btn btn-primary" data-toggle="modal" data-target="#restartLevel">重置級別</a> <a class="newgame btn btn-primary" data-toggle="modal" data-target="#newGame">重新開始</a> <a class="instruct btn btn-primary" data-toggle="modal" data-target="#instructions">玩法說明</a> </div> <div class="board"> <!-- 遊戲區域 --> <div class="gamerow"> <div class="gamesquare coord0q0"></div> </div> </div> </div> <!-- 遊戲玩法 modal --> <div class="modal fade" id="instructions" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">遊戲玩法</h4> </div> <div class="modal-body"> <p>如何纔算贏：使拼板全部變成藍色。</p> <p>玩法：每個方塊一面橙色，一面藍色。點擊一個方塊，這個方塊的顏色會翻轉，並且，與它鄰接的方塊的顏色也會翻轉。</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">開始遊戲</button> </div> </div> </div> </div> <!-- 新遊戲 modal --> <div class="modal fade" id="newGame" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">重新開始</h4> </div> <div class="modal-body"> <p>你真的想重新開始嗎？</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="newGameConfirm" data-dismiss="modal">開始遊戲</button> </div> </div> </div> </div> <!-- 重新開始本級別遊戲 modal --> <div class="modal fade" id="restartLevel" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">重新開始本級別遊戲</h4> </div> <div class="modal-body"> <p>你真的想重新開始嗎？</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="resetLevelConfirm" data-dismiss="modal">重置</button> </div> </div> </div> </div> </body></html>
game/css/style.css：
.container { width: 600px; margin: 0 auto;}/* 遊戲級別 */.scoresContainer { float: right; text-align: right; font-size: 18px;}/* 遊戲按鈕 */.aboveGame:after { display: block; margin: 20px 0; content: ""; clear: both;}/* 遊戲區域 */.board { position: absolute; background-color: #5f5f5f; border-radius: 4px;}.gamesquare { float: left; margin-right: 15px; border-radius: 3px;}game/js/game.js
function StyleHelper() { //
// 控制遊戲區域中的塊大小
//
this.setGridSize = function(level) { var margin = this.getMargin(level);
var res = ($('.container').width() - margin * level) / (level); // 設置塊的大小和間距
$('.gamesquare').css('margin-right', margin);
$('.gamesquare').css('width', res);
$('.gamesquare').css('height', res); // 設置每行的高度、右邊距和下邊距
$('.gamerow').css('height', res);
$('.gamerow').css('margin-right', margin * (-1));
$('.gamerow').css('margin-bottom', margin); // 設置遊戲區域的內邊距
$('.board').css('padding', margin);
$('.board').css('padding-bottom', 0);
}; // 獲取邊距
this.getMargin = function(level) { if (level <= 6) return 15; if (level > 15) return 5; return 20 - level;
};
}function Game() { //
// 控制遊戲
//
var self = this; // 遊戲級別
this.level = 1; // 創建用於控制遊戲的對象
this.gb; this.sh = new StyleHelper(); this.processClick = function(w, h) { this.gb.processClick(w, h); this.updateCounts(); if (this.gb.isGameWin()) { this.gameEnd();
}
} // 開始遊戲
this.beginGame = function() {
self.setupLevel();
} // 遊戲結束
this.gameEnd = function() { this.level++; this.resetGame();
} // 遊戲過關
this.resetGame = function() {
$('#levelDescriptor').html("進入級別 " + this.level);
setTimeout(function() {
self.setupLevel();
}, 500);
} // 初始化遊戲級別
this.setupLevel = function() { this.gb = new GameBoard(this.level, this.level);
$('.board').html(""); // 清空遊戲面板
this.gb.populate(); // 重置所有圖塊爲橙色
self.gb.renderBoard(); // 渲染遊戲面板並創建圖塊
self.sh.setGridSize(this.level); // 控制遊戲區域中的塊大小
self.updateCounts(); // 更新顯示當前級別
self.applyBindings(); // 翻轉所點圖塊周圍圖塊的顏色
} // 顯示當前級別
this.updateCounts = function() {
$(".currLevel").html("當前級別: <b>" + this.level + "</b>");
} this.applyBindings = function() {
$('.gamesquare').click(function(){ // 獲取所點擊的圖塊的位置
var cname = $(this).context.className.split(" ")[1]; var coord = cname.substring(5).split("q"); var height = parseInt(coord[1]); var width = parseInt(coord[0]);
self.processClick(width, height); // 翻轉所點圖塊周圍圖塊的顏色
});
} // 開始新遊戲
this.onNewGameClick = function() { this.level = 1; this.setupLevel();
}
}function GameBoard (wd, hi) { //
// 遊戲面板
//
// 圖塊座標
this.high = hi - 1; this.wide = wd - 1; this.count = 0; // 橫向座標爲 wide，縱向座標爲 high
// 0 | 1 | 2 | 3 | ....
// - - - - - - - - - - - -
// 0 | | | |
// - - - - - - - - - - - -
// 1 | |[2][1]
// -
// 2
// :
// :
//
// 創建圖塊二維數組
this.board = new Array(wd); for (var i = 0; i <= this.wide; i++) { this.board[i] = new Array(hi);
} // 渲染遊戲面板並創建圖塊
this.renderBoard = function() { var s = ""; for (var j = 0; j <= this.high; j++) {
s += "<div class='gamerow'>"; for (var i = 0; i <= this.wide; i++) {
s += "<div class='gamesquare coord" + i + "q" + j + "'></div>";
}
s += "</div>";
}
$('.board').html(s); for (var i = 0; i <= this.wide; i++) { for (var j = 0; j <= this.high; j++) { this.processCLickView(i, j);
}
}
} this.processClick = function(w, h) { //
// 翻轉所點圖塊周圍圖塊的顏色
//
// 找到所點圖塊周圍需要翻轉顏色的圖塊
var lowx = w - 1; var highx = w + 1; var lowy = h - 1; var highy = h + 1; // 檢查被點擊的圖塊是否是邊緣圖塊
if (w == 0) lowx = 0; if (w == this.wide) highx = this.wide; if (h == 0) lowy = 0; if (h == this.high) highy = this.high; // 翻轉所點圖塊垂直方向圖塊
for (var i = lowy; i <= highy; i++) { if (this.board[w][i] == 0) { this.board[w][i] = 1; this.count++;
} else { this.board[w][i] = 0; this.count--;
} this.processCLickView(w, i);
} // 翻轉所點圖塊水平方向的圖塊
for (var i = lowx; i <= highx; i++) { if (i == w) continue; if (this.board[i][h] == 0) { this.board[i][h] = 1; this.count++;
} else { this.board[i][h] = 0; this.count--;
} this.processCLickView(i, h);
}
} // 翻轉圖塊顏色
this.processCLickView = function(w, h) { var coord = ".coord" + w + "q" + h; if (this.board[w][h] == 0) {
$(coord).css("background-color", "#e8BB39");
} else {
$(coord).css("background-color", "#6060e0");
}
} // 重置所有圖塊爲橙色
this.populate = function() { for (var i = 0; i <= this.wide; i++) { for (var j = 0; j <= this.high; j++) { this.board[i][j] = 0;
}
}
} // 遊戲勝利
this.isGameWin = function() { return this.count == (this.wide + 1) * (this.high + 1);
}
}// 初始化遊戲$(document).ready(function() { // 創建遊戲
var game = new Game(); // 開始遊戲
game.beginGame(); // 重置遊戲區域圖塊
$('#resetLevelConfirm').click(function() {
game.setupLevel();
}); // 開始新遊戲
$('#newGameConfirm').click(function() {
game.onNewGameClick();
});
});