实验楼项目课学习笔记-jQuery翻转拼图游戏

2024-11-20 技术教程

JQuery翻转拼图游戏是通过jQuery和Bootstrap 3实现，UI主要使用了Bootstrap的Modal弹窗，对其他模块涉及较少，所以不需要特别熟悉Bootstrap，游戏逻辑通过jQuery和JavaScript实现。

项目效果图如下：

game/index.html

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>蓝色拼图</title><linkrel="stylesheet"href="bootstrap/css/bootstrap.css"><linkrel="stylesheet"href="css/style.css"><scriptsrc="js/jquery-1.11.1.js"></script><scriptsrc="bootstrap/js/bootstrap.js"></script><scriptsrc="js/game.js"></script></head><body><divclass="container"><divclass="heading"><h2class="title">jQuery翻转拼图游戏</h2><divclass="scoresContainer"><divclass="currLevel">当前级别：<b>1</b></div></div></div><divclass="aboveGame"><aclass="resetbtnbtn-primary"data-toggle="modal"data-target="#restartLevel">重置级别</a><aclass="newgamebtnbtn-primary"data-toggle="modal"data-target="#newGame">重新开始</a><aclass="instructbtnbtn-primary"data-toggle="modal"data-target="#instructions">玩法说明</a></div><divclass="board"><divclass="gamerow"><divclass="gamesquarecoord0q0"></div></div></div></div><divclass="modalfade"id="instructions"tabindex="-1"role="dialog"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title">游戏玩法</h5></div><divclass="modal-body"><p>如何才算赢：使拼板全部变成蓝色。</p><p>玩法：每个方块一面橙色，一面蓝色。点击一个方块，这个方块的颜色会翻转，并且，与它邻接的方块的颜色也会翻转。</p></div><divclass="modal-footer"><buttontype="button"class="btnbtn-primary"data-dismiss="modal">开始游戏</button></div></div></div></div><divclass="modalfade"id="newGame"tabindex="-1"role="dialog"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title">重新开始</h5></div><divclass="modal-body"><p>你真的想重新开始吗？</p></div><divclass="modal-footer"><buttontype="button"class="btnbtn-primary"id="newGameConfirm"data-dismiss="modal">开始游戏</button></div></div></div></div><divclass="modalfade"id="restartLevel"tabindex="-1"role="dialog"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title">重新开始本级别游戏</h5></div><divclass="modal-body"><p>你真的想重新开始吗？</p></div><divclass="modal-footer"><buttontype="button"class="btnbtn-primary"id="resetLevelConfirm"data-dismiss="modal">重置</button></div></div></div></div></body></html>

game/css/style.css：

.container{width:600px;margin:0auto;}/*游戏级别*/.scoresContainer{float:right;text-align:right;font-size:18px;}/*游戏按钮*/.aboveGame:after{display:block;margin:20px0;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

functionStyleHelper(){////控制游戏区域中的块大小//this.setGridSize=function(level){varmargin=this.getMargin(level);varres=($('.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)return15;if(level>15)return5;return20-level;};}functionGame(){////控制游戏//varself=this;//游戏级别this.level=1;//创建用于控制游戏的对象this.gb;this.sh=newStyleHelper();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=newGameBoard(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(){//获取所点击的图块的位置varcname=$(this).context.className.split("")[1];varcoord=cname.substring(5).split("q");varheight=parseInt(coord[1]);varwidth=parseInt(coord[0]);self.processClick(width,height);//翻转所点图块周围图块的颜色});}//开始新游戏this.onNewGameClick=function(){this.level=1;this.setupLevel();}}functionGameBoard(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=newArray(wd);for(vari=0;i<=this.wide;i++){this.board[i]=newArray(hi);}//渲染游戏面板并创建图块this.renderBoard=function(){vars="";for(varj=0;j<=this.high;j++){s+="<divclass='gamerow'>";for(vari=0;i<=this.wide;i++){s+="<divclass='gamesquarecoord"+i+"q"+j+"'></div>";}s+="</div>";}$('.board').html(s);for(vari=0;i<=this.wide;i++){for(varj=0;j<=this.high;j++){this.processCLickView(i,j);}}}this.processClick=function(w,h){////翻转所点图块周围图块的颜色////找到所点图块周围需要翻转颜色的图块varlowx=w-1;varhighx=w+1;varlowy=h-1;varhighy=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(vari=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(vari=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){varcoord=".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(vari=0;i<=this.wide;i++){for(varj=0;j<=this.high;j++){this.board[i][j]=0;}}}//游戏胜利this.isGameWin=function(){returnthis.count==(this.wide+1)*(this.high+1);}}//初始化游戏$(document).ready(function(){//创建游戏vargame=newGame();//开始游戏game.beginGame();//重置游戏区域图块$('#resetLevelConfirm').click(function(){game.setupLevel();});//开始新游戏$('#newGameConfirm').click(function(){game.onNewGameClick();});});