2048游戏项目第二天
在上次的讲解中完成了游戏的总体界面的设计，本次将主要讲解游戏的实现逻辑和代码的实现。
在开始之前先完成一个上次遗漏的小小的界面–GameOver界面。
完成界面如下：
界面分析：
代码如下：
<!--HTML代码-->
<!--GameOver界面-->
<div id="gameOver">
<div id="gameover"></div><!--灰色半透明背景-->
<!--分数窗口-->
<p>Game Over!<br/>
Score:<span id="finalScore"></span><br/>
<a class="button" id="restart" style="font-size:30px;" onclick="game.start">爱心 Try again!</a>
</p>
</div>/*GameOver界面CSS样式*/
#gameOver{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#gameOver div{
width:100%;
height: 100%;
background-color: #555;
opacity: 0.5;
}
#gameOver p{
position: absolute;
border-radius: 10px;
top: 200px;
left: 40%;
width: 300px;
height: 200px;
border:1px solid #edcf72;
line-height: 1.6em;
text-align: center;
background-color: #fff;
}
.button{
padding: 10px;
background-color: #9f8d77;
border-radius: 6px;
color: #fff;
cursor: pointer;
}接下来，开始JS程序的开发。
首先，理清楚整个2048游戏的思路。每移动一次如果界面中满的话会随机产生2或4（运用Math.random()设计randomNum()函数），说明我们应该判断界面是否满了（设计isFull()函数）。
初始设计：randrom()函数和isFull()函数
整个2048游戏其实玩的就是一个4*4的二维数组，我定义初始游戏时二维数组全为0。data：[]//单元格中的所有数字
判断是否已满显然采用for循环遍历整个二维数组。
data:[],//单元格中的所有数字
isFull:function(){
for(var row=0;row<4;row++){
for(var col=0;col<4;col++){
if(this.data[row][col]==0){//遍历整个data，有0说明有空格，没满，返回false
return false;
}
}
}
return true;
}灵活使用Math.random()函数生成随机数。
randomNum:function(){//在随机位置处产生2或4
if(isFull()){
return;//满了才会进入，这显然无法产生数字了，直接退出
}else{
//没有满则进入
/*
产生2或4的过程：
随机在0-3行中选择row,随机在0-3列中选择col
确定产生位置后，若Math.random()<0.5,产生2，否则产生4.
*/
while(1){//一直循环，直到产生2或4为止
var row=Math.floor(Math.random()*(3-0+1)+0);
//随机生成0-3整数
if(data[row][col]==0){
//只有位置为空才能进入，进行赋值
this.data[row][col]=Math.random()<0.5?2:4;
break;//产生2或4成功，退出循环
}
}
}
}现在我们可以实现数字的产生了，显然接下来我们应该考虑如何实现移动了。
我以向左移为例子，其他方向同理。
代码贴上：
/*canLeft()函数：*/
canLeft:function(){
/*遍历每一个元素只要发现任意位置==0或者当前值==左侧值说明可以左移，如果循环正常结束说明不可左移
*/
for(var row=0;row<4;row++){
for(var col=0;col<4;col++){
if(this.data[row][col]!=0){
if(this.data[row][col-1]==0||this.data[row][col-1]==this.data[row][col]){
return true;
}
}
}
}
return false;
}moveLeft:function(){
/*实现整个二维数组左移，方法：首先判断数组中能否左移，然后调用moveLeftInRow()函数实现左移*/
if(canLeft()){
//进入则说明可以左移
for(var row=0;row<4;row++){
this.moveLeftInRow(row);//每一行左移操作
}
game.randomNum();
game.updateView();//每次移动完应该产生随机数，更新界面
}
}
moveLeftInRow:function(row){
/*从0位置开始到2结束遍历row行中的每个元素 获得一个下一个不为0的元素的nextCol下标
如果nextCol==-1，break；
否则，判断合并
如果自己==0，用下一个元素的值替换自己，将下一个元素的值设为0，让col留在原地：col--
如果自己==下一个元素 将自己*2； 将下一个元素设为0*/
for(var col=0;col<=2;col++){
var nextCol=this.getNextRight(row,col);//获取右侧第一个不为空的位置
if(nextCol==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=this.data[row][nextCol];
this.data[row][nextCol]=0;
animation.addTask(""+row+nextCol,""+row+col);
col--;
}else if(this.data[row][col]==this.data[row][nextCol]){
this.data[row][col]*=2;
this.score+=this.data[row][col];
this.data[row][nextCol]=0;
animation.addTask(""+row+nextCol,""+row+col);
}
}
}
},
getNextRight:function(row,col){//获得当前行中，指定位置右侧第一个不为0的数，返回下一个为0的数的位置
/*遍历当前位置右侧每个元素 只要返现！=0的，就返回其位置下标nextCol 退出循环，返回-1*/
for(var i=col+1;i<4;i++){
if(this.data[row][i]!=0){
return i;
}
}
return -1;
},以上就是完整的左移思想的代码，其他方向的算法雷同，在这也就不贴代码了。
设计完移动的部分，下面考虑如何更新整个界面。
设计updateView()函数：
- step1.遍历二维数组中的每个元素；
- step2：找到当前元素对应的div
拼div的id：c+row+col。 var div=document.getElementById(id)；
- step3：将当前元素的值放入div中
如果当前值==0，就放入“”，div.innerHTML=“”
否则放入当前值；
- step4：根据当前元素值修改div样式类
div.className=”类名”;
如果当前值==0，className=“cell”；
否则className=“cell n”+当前值。
/*将游戏数据整体更新到页面上*/
updateView:function(){
/*step1.遍历二维数组中的每个元素
step2：找到当前元素对应的div
拼div的id：c+row+col
var div=document.getElementById(id)；
step3：将当前元素的值放入div中
如果当前值==0，就放入“”，div.innerHTML=?
否则放入当前值
step4：根据当前元素值修改div样式类
div.className="类名";
如果当前值==0，className=“cell”；
否则className=“cell n”+当前值*/
for(var row=0;row<4;row++){
for(var col=0;col<4;col++){
var div=document.getElementById("c"+row+col);
div.innerHTML=this.data[row][col]==0?"":this.data[row][col];
div.className=this.data[row][col]==0?"cell":"cell n"+this.data[row][col];
/*将分数放入span*/
}
}
/*将分数放入span*/
var span=document.getElementById("score");
span.innerHTML=this.score;
/*判断游戏结束
如果游戏结束，this.state=GAME_OVER
显示游戏结束div
找到gameOverdiv
修改div的style.display*/
if(this.isGameOver()){
this.state=this.GAME_OVER;
var div=document.getElementById("gameOver");
var finalSocre=document.getElementById("finalScore");
finalSocre.innerHTML=this.score;
div.style.display="block";
}
},游戏结束判断：
不满显然游戏并没有结束；
如果满了则判断数组中有无相邻的数值相等的元素。
isGameOver:function(){//判断游戏是否结束
/*能继续时返回false，否则返回true*/
if(!this.isFull()){return false;}
/*已经满了*/ /*if(this.canLeft()||this.canRight()||this.canUp()||this.canDown()){return false;}
else{return ture;}*/
for(var row=0;row<4;row++){
for(var col=0;col<4;col++){
//if(this.data[row][col==0]){return false;}
if(col<3){/*检查右侧相邻*/
if(this.data[row][col]==this.data[row][col+1]){
return false;
}
}
if(row<3){/*检查下方相邻*/
if(this.data[row][col]==this.data[row+1][col]){
return false;
}
}
}
}
return true;
}最后编写最后一部分，事件相应。
window.onload=function(){
game.start();
document.onkeydown=function(){
if(game.state==game.RUNNING){
if(event.keyCode==37){/*方向键左*/
game.moveLeft();
}else if(event.keyCode==39){
game.moveRight();
}
else if(event.keyCode==38){
game.moveUp();
}
else if(event.keyCode==40){
game.moveDown();
}
}else if(event.keyCode==13){
game.start();
}
}
}整个项目做到这也就完成了，尽情的玩耍吧！
8349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
