2048网页小游戏

用js写了个2048小游戏,欢迎大家参阅哟~~~

首先来个效果图吧~

是不是感觉和手机版的很像呢~~~(*^__^*) 嘻嘻……

再来给大家看一下这个文件夹的内容:

so~简洁明了

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

js代码里的每一行我都加了注释~瞄~~~

不要嫌代码多看点眼晕哈,(或者你把文字都去掉就ok啦!)只要把他们复制粘贴到相应的文档下面,run起来,你就可以看到美美哒的2048效果哦,亲们想换成自己喜欢的主题风格什么的,在css里面操作就好了.

1、2048.html









SCORE:0











































GAME OVER

SCORE:0

TRY AGAIN






2、 2048.js

var game={
RN:4,CN:4,//总行数和总列数
data:null,//保存游戏格子数据的二维数组
score:0,//保存游戏得分
state:1,//保存游戏状态
GAMEOVER:0,//表示游戏结束状态
RUNNING:1,//表示游戏运行中
start:function(){//游戏启动
//重置游戏状态为RUNNING
this.state=this.RUNNING;
this.score=0;//重置分数为0
//初始化二维数组
this.data=[];//创建空数组保存在data属性中
//r从0开始，到window
//为data拍照保存在after中
var after=String(this.data);
//如果before不等于after
if(before!=after){
this.randomNum();//随机生成数
//如果游戏结束
if(this.isGameOver()){
//修改游戏状态为GAMEOVER
this.state=this.GAMEOVER;
}
this.updateView();//更新页面
}
},
isGameOver:function(){
//遍历data中每个元素
for(var r=0;r0结束，r每次递减1
for(var r=this.RN-1;r>0;r--){
//查找r位置c列上方前一个不为0的位置prevr
var prevr=this.getPrevInCol(r,c);
//如果没找到,就退出循环
if(prevr==-1){break;}
else{//否则
//如果r位置c列的值为0
if(this.data[r][c]==0){
//将prevr位置c列的值赋值给r位置
this.data[r][c]=this.data[prevr][c];
//将prevr位置c列置为0
this.data[prevr][c]=0;
r++;//r留在原地
}else if(this.data[r][c]
==this.data[prevr][c]){
//否则，如果r位置c列的值等于prevr位置的值
this.data[r][c]*=2;//将r位置c列的值*2
//将r行c列的新值累加到score属性上
this.score+=this.data[r][c];
//将prevr位置c列置为0
this.data[prevr][c]=0;
}
}
}
},
getPrevInCol:function(r,c){
r--;//r-1
//循环，r到>=0结束，每次递减1
for(;r>=0;r--){
//如果r位置c列不等于0
if(this.data[r][c]!=0)
return r;//返回r
}//(遍历结束)
return -1;//返回-1
},
moveUp:function(){
this.move(function(){
//遍历data中每一列
for(var c=0;c0结束,c每次递减1
for(var c=this.CN-1;c>0;c--){
//调用getPrevInRow方法，查找r行c列前一个不为0的位置，保存在prevc中
var prevc=this.getPrevInRow(r,c);
//如果prevc等于-1，就退出循环
if(prevc==-1){break;}
else{//否则
//如果r行c位置的值为0
if(this.data[r][c]==0){
//将r行c位置的值替换为prevc位置的值
this.data[r][c]=this.data[r][prevc];
//将prevc位置的值置为0
this.data[r][prevc]=0;
c++;//c留在原地
}else if(this.data[r][c]
==this.data[r][prevc]){
//否则，如果r行c位置的值等于r行prevc位置的值
//将r行c位置的值*2
this.data[r][c]*=2;
//将r行c列的新值累加到score属性上
this.score+=this.data[r][c];
//将prevc位置的值置为0
this.data[r][prevc]=0;
}
}
}
},
//查找r行c列右侧下一个不为0的位置
getPrevInRow:function(r,c){
c--;//c-1
//循环,c>=0,c每次递减1
for(;c>=0;c--){
//如果c位置的值不为0
if(this.data[r][c]!=0){
return c;//返回c
}
}//(遍历结束)
return -1;//返回-1
},
moveLeft:function(){//左移所有行
this.move(function(){
//遍历data中每一行
for(var r=0;rdiv{
width:100%; height:100%;
background:#555; opacity:0.5;
}
#gameOver>p{
position:absolute; width:300px; height:200px;
/*鄙视题: 让块元素居中显示*/
top:50%; left:50%;
margin-top:-100px; margin-left:-150px;

background:#fff;
border:1px solid #edcf72; border-radius:10px;
text-align:center; line-height:2em;
}
#gameOver .btn{
background:#9f8d77; color:#fff;
padding:10px; border-radius:6px;
cursor:pointer;
}