实验楼项目课学习笔记-jQuery翻转拼图游戏
生活随笔
收集整理的這篇文章主要介紹了
实验楼项目课学习笔记-jQuery翻转拼图游戏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
項目效果圖如下：
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();}); });詳細講解：http://www.shiyanlou.com/?實驗樓項目課里
轉載于:https://my.oschina.net/u/2256500/blog/351938
總結
以上是生活随笔為你收集整理的实验楼项目课学习笔记-jQuery翻转拼图游戏的全部內容，希望文章能夠幫你解決所遇到的問題。
