JQuery翻转拼图游戏是通过jQuery
和Bootstrap 3
实现,UI主要使用了Bootstrap
的Modal
弹窗,对其他模块涉及较少,所以不需要特别熟悉Bootstrap,游戏逻辑通过jQuery
和JavaScript
实现。
新兴网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。成都创新互联公司自2013年创立以来到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
项目效果图如下:
game/index.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("当前级别: " + this.level + ""); } 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 += ""; for (var i = 0; i <= this.wide; i++) { s += ""; } s += ""; } $('.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(); }); });