2048小游戏

转载 2015年11月17日 15:47:59
<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
   <meta charset="utf-8"/>
   <link rel="stylesheet" href="2048.css"/>
   <script src="2048.js"></script>
 </HEAD>


 <BODY>
    <p>Score: <span id="score">0</span></p>
<div id="gridPanel">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>


<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>


<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>


<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>


<div id="c00" class="cell"></div>
<div id="c01" class="cell"></div>
<div id="c02" class="cell"></div>
<div id="c03" class="cell"></div>


<div id="c10" class="cell"></div>
<div id="c11" class="cell"></div>
<div id="c12" class="cell"></div>
<div id="c13" class="cell"></div>


<div id="c20" class="cell"></div>
<div id="c21" class="cell"></div>
<div id="c22" class="cell"></div>
<div id="c23" class="cell"></div>


<div id="c30" class="cell"></div>
<div id="c31" class="cell"></div>
<div id="c32" class="cell"></div>
<div id="c33" class="cell"></div>
</div>


<div id="gameOver">
<div><!--背景--></div>
<p><!--前景-->
Game Over!<br>
Score: <span id="finalScore">0</span><br>
<a class="button" id="restart"
onclick="game.start()">Try again!</a>
</p>
</div>
 </BODY>

</HTML>










css

#gridPanel{
/*宽高:480x480*/
width:480px; height:480px;
/*整体居中*/
margin:0 auto;
/*背景颜色:bbada0*/
background-color:#bbada0;
/*边角:10px*/
border-radius: 10px;
/*相对定位*/
position:relative;
}
.grid,.cell{
width:100px; height:100px;
border-radius:6px;
}
.grid{
background-color: #ccc0b3;
margin-top:16px;
margin-left:16px;
float:left;
}
.cell{
position:absolute;
text-align:center;
line-height:100px;
font-size:60px;
}
#c00,#c01,#c02,#c03{top:16px;}
#c10,#c11,#c12,#c13{top:132px;}
#c20,#c21,#c22,#c23{top:248px;}
#c30,#c31,#c32,#c33{top:364px;}


#c00,#c10,#c20,#c30{left:16px;}
#c01,#c11,#c21,#c31{left:132px;}
#c02,#c12,#c22,#c32{left:248px;}
#c03,#c13,#c23,#c33{left:364px;}


.n2{background-color:#eee4da; color:#776e65;}
.n4{background-color:#ede0c8; color:#776e65;}
.n8{background-color:#f2b179; color:#fff;}
.n16{background-color:#f59563; color:#fff;}
.n32{background-color:#f67c5f; color:#fff;}
.n64{background-color:#f65e3b; color:#fff;}
.n128{background-color:#edcf72; color:#fff;}
.n256{background-color:#edcc61; color:#fff;}
.n512{background-color:#9c0; color:#fff;}
.n1024{background-color:#33b5e5; color:#fff; font-size:40px;}
.n2048{background-color:#09c; color:#fff; font-size:40px;}
.n4096{background-color:#a6c; color:#fff; font-size:40px;}
.n8192{background-color:#93c; color:#fff; font-size:40px;}


/*分数样式*/
p{font-family: Arial; font-weight:bold;
width:480px; margin: 0 auto;
font-size:40px; padding-top:15px;
}
/*gameOver界面*/
#gameOver{display:none; position:absolute; width: 100%; height: 100%;
top: 0; left: 0;
}
#gameOver div{ width:100%; height:100%;
background-color:#555;  opacity: 0.5;
}
#gameOver p{ position:absolute;
width:300px ; height: 200px; border-radius:10px;
border:1px solid #edcf72; background-color:#fff;
top: 200px; left:35%; text-align: center; line-height: 1.6em;
}
.button{background-color:#9f8b77; border-radius:6px;
cursor:pointer; color: #fff; padding:10px;
}




js

var game={
data:[],
score:0, //保存分数
randomNum:function(){
if(!this.isFull()){//如果不满才生成随机数
//对象的方法使用对象的属性必须+this
/*在数组的随机1个位置生成一个2或4*/
while(true){
/*Step1: 随机生成一个行下标:row
             随机生成一个列下标  :  col
 下标范围:0-3*/
var row=Math.floor(Math.random()*4);
var col=Math.floor(Math.random()*4);
/*Step2: 如果当前元素==0,就在当前位置元素中放入2或4
  生成一个随机数,如果随机数<0.5,放入2
                                                  否则放入4
  退出循环
   (否则,什么也不做,继续循环)*/
if(this.data[row][col]==0){
this.data[row][col]=Math.random()<0.5?2:4;
break;
}
}
}
},
isFull:function(){/*检查当前数组是否已满*/
//将二维数组按默认格式转为字符串
//用        找       
//如果找到,返回false,否则,返回true
return this.data.toString().search(/(0,)|(,0)/)==-1;
},
start:function(){
this.data=[ [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0] ];
this.score=0;
/*对象自己的方法内,调用自己的其它方法也要加this*/
this.randomNum();  
this.randomNum();
this.updateView();
},
updateView:function(){
var span=document.getElementById("score");
span.innerHTML=this.score;
/*将当前数组每个元素设置到页面对应的div中*/
//遍历二维数组中每个元素: row col
for(var row=0;row<this.data.length;row++){
for(var col=0;col<this.data[row].length;col++){
     //Step1: 利用div的id找到和当前元素对应位置的div
//其中,id为"c"+row+col;
var div=
document.getElementById("c"+row+col);
if(this.data[row][col]!=0){//Step2: 如果当前元素!=0
         //Step 2.1: 将当前元素的值写入div中
 div.innerHTML=this.data[row][col];
 //Step 2.2: 将当前元素的className属性
 //                设置为cell n?
 div.className="cell n"+this.data[row][col];
}else{//Step3: 否则:
         //Step 3.1: 将div中的内容设置为""
 div.innerHTML="";
 //Step 3.2: 将div.className重置为"cell"
 div.className="cell";
}
}
}
this.gameOver();
var divOver=document.getElementById("gameOver");
if(this.state==this.GAMEOVER){
divOver.style.display="block";
}else{
divOver.style.display="none";
}
},
moveLeft:function(){/*左移方法*/
var start=this.data.toString();
for(var row=0;row<4;row++){
var col=1; //左移时,第一个格不用检查
var c=0; //记录当前可以合并到的位置
while(col<4){
var prev=this.data[row][col-1]; //临时存储前一个格
var curr=this.data[row][col]; //临时存储当前格
/*判断当前单元格能否向前移动*/
if(curr!=0){ this.merge(row,col,row,col-1); }
//如果前一个元素==0,且当前格!=0,
//*且col>c+1*(不能比c+1小)
//则移动后下标退一格
//其余情况下标都移动到下一格
if(curr!=0&&prev==0&&(col!=c+1)){  col--;
}else{ 
col++; 
if(curr!=0&&prev!=0&&this.data[row][c]!=0){
c++; 
}
}
}
}
var end=this.data.toString();
if(start!=end){//被移动了
//移动后,生成随机数,更新界面
this.randomNum(); this.updateView();
}
},
moveRight:function(){/*左移方法*/
var start=this.data.toString();
for(var row=0;row<4;row++){
var col=2; //右移时,第4个格不用检查
var c=3; //最右侧单元格
while(col>=0){
var prev=this.data[row][col+1]; //临时存储前一个格
var curr=this.data[row][col]; //临时存储当前格
/*判断当前单元格能否向前移动*/
if(curr!=0){ this.merge(row,col,row,col+1); }
//如果前一个元素==0,且当前格!=0时,且col>c+1时
//则移动后下标退一格
//其余情况下标都移动到下一格
if(curr!=0&&prev==0&&(col!=c-1)){  col++;
}else{ col--;
if(curr!=0&&this.data[row][c]!=0&&prev!=0){
c--;
}
}
}
}
var end=this.data.toString();
if(start!=end){//被移动了
//移动后,生成随机数,更新界面
this.randomNum(); this.updateView();
}
},
moveUp:function(){/*上移方法*/
var start=this.data.toString();
for(var col=0;col<4;col++){
var row=1; 
var r=0; 
while(row<4){
var prev=this.data[row-1][col]; 
var curr=this.data[row][col];
if(curr!=0){ this.merge(row,col,row-1,col); }
if(curr!=0&&prev==0&&(row!=r+1)){  row--;
}else{ 
row++; 
if(curr!=0&&prev!=0&&this.data[r][col]!=0){
r++; 
}
}
}
}
var end=this.data.toString();
if(start!=end){this.randomNum(); this.updateView();}
},
moveDown:function(){/*下移方法*/
var start=this.data.toString();
for(var col=0;col<4;col++){
var row=2;  var r=3; 
while(row>=0){
var prev=this.data[row+1][col];
var curr=this.data[row][col]; 
if(curr!=0){ this.merge(row,col,row+1,col); }
if(curr!=0&&prev==0&&(row!=r-1)){  row++;
}else{ row--;
if(curr!=0&&this.data[r][col]!=0&&prev!=0){
r--;
}
}
}
}
var end=this.data.toString();
if(start!=end){this.randomNum(); this.updateView();}
},
merge:function(row,col,prevRow,prevCol){
/*专门判断任意两个单元格合并的方法*/
//如果前一个单元格==0
if(this.data[prevRow][prevCol]==0){
     //用当前格替换前一个格
this.data[prevRow][prevCol]=this.data[row][col];
this.data[row][col]=0; //将当前格=0
}else if(this.data[prevRow][prevCol]==
        this.data[row][col]){
   //否则,如果当前格==前一个格,则将前一个格*=2
this.data[prevRow][prevCol]*=2;
this.score+=this.data[prevRow][prevCol];
this.data[row][col]=0; //将当前格=0
}
},
state:1,
PLAYING:1,
GAMEOVER:0,
gameOver:function(){
//如果包含8192,
if(this.has8192()){//则将游戏的state属性改为this.GAMEOVER
this.state=this.GAMEOVER;
}else if(this.isFull()&&!this.canMove()){//如果满了,且不能移动!
this.state=this.GAMEOVER;
}else{
this.state=this.PLAYING;
}
},
canMove:function(){/*现在的数组是否可移动*/
//Step1: 遍历数组的每个元素
for(var row=0;row<4;row++){
for(var col=0;col<4;col++){
      //每得到一个元素,判断该元素是否可//左,右,上,下移动
  var curr=this.data[row][col];
  //左移:如果当前元素不是最左侧元素
  if(col!=0){ //再如果当前元素左侧的值==当前元素
if(curr==this.data[row][col-1]){
return true; //返回true
}
  }
  //右移:如果当前元素不是最右侧元素
  if(col!=3){//再如果当前元素==当前元素右侧值
if(curr==this.data[row][col+1]){
return true//返回true
}
  }
   if(row!=0){ //再如果当前元素左侧的值==当前元素
if(curr==this.data[row-1][col]){
return true; //返回true
}
  }
  if(row!=3){//再如果当前元素==当前元素右侧值
if(curr==this.data[row+1][col]){
return true//返回true
}
  }
}
}
return false; //如果程序执行到此,说明无元素可移动
},
has8192:function(){//判断是否有8192
   //将当前数组转为字符串
//用search方法,检索/(8192,)|(,8192)/
//如果找到,返回true;否则,返回false
return this.data.toString().search(/(8192,)|(,8192)/)
       !=-1;
}
}
/*窗口加载后自动调用*/
/*事件:网页自动触发或人为触发的状态变化*/
/*onload: 当窗口加载完之后,自动触发的事件*/
//事件处理函数:当事件发生后自动调用的函数对象
/*事件名不符合驼峰命名,一律小写!*/
window.onload/*事件*/=function(){
game.start();
//当网页捕获到键盘按下事件时
document.onkeydown=function(/*event*/){
if(game.state==game.PLAYING){
//***事件对象:发生事件时*自动创建*,封装事件信息
                       //自动以参数形式传入事件处理函数中
var event=window.event||arguments[0];
                          //IE                 //event
                                                   //firefox...
//从事件对象中获得按键号
var code=event.keyCode;
//如果是37号,就执行moveLeft()
if(code==37){ game.moveLeft(); }
else if(code==39){ game.moveRight(); }
else if(code==38){ game.moveUp(); }
else if(code==40){ game.moveDown(); }
}
}
}

相关文章推荐

2048小游戏(Java)源码解析及源代码打包

数据结构课程设计写的2048小游戏,答辩完了就开源了,因为这次的技术文档任性地写成了傻瓜式教程了,就干脆也放出来了,供参考,源代码打包在最后面会附上。 一 实现方案 二 具体代码及程序框图分析 三 参...

java小游戏2048实现

上课的时候见一女童鞋在玩一个叫2048的游戏,其实我是觉得玩游戏挺无聊的, 上去对她说:“这有什么好玩的咯!,太幼稚了,我都能写一个”  谁知道她来一句:“好啊,你写一个我就玩你的不玩这个了!” 既然...
  • jackjyy
  • jackjyy
  • 2015年02月26日 13:24
  • 1993

2048小游戏部分代码,仅供参考哦

2048小游戏详细代码 GameView.java 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 ...

学Android--实现2048小游戏

1、游戏布局(activity_main.xml) 首先在xml文件中实现游戏的整体布局 (1)添加两个TextView用来显示分数 ...
  • jxl1994
  • jxl1994
  • 2017年02月04日 23:08
  • 440

jquery,2048小游戏粗制版

写然后知不足,写了一个丑丑的简简单单的2048,代码在下面。 和原版不一样的地方就是原版如果有连续能消去的不会一次消去,我的这个用递归弄得可以一步消去了,比如4个2在一行,方向键按下之后原版会变成2...

iOS swift 2048小游戏开发教程(一)

iOS开发 swift3  实战项目之 2048游戏 之前看过网上很多写小项目的文章,但大多是旧版或者不全的,这里推出swift3  项目之2048给大家分享...

Android&java的成长之路之六(2048小游戏②)

紧接着上一章,我们说到了要把卡片部署到GridLayout上。我们玩正规的2048游戏的时候,看上去是卡片移动来叠加数字,实则不然,它只是添加了动画效果,其实是之前已经全部铺满地卡片,只是能够重叠的时...

Android 小游戏2048 代码简单实现

package com.my2048;import android.content.Context; import android.graphics.Canvas; import android....

用C++语言实现小游戏2048

2048小游戏的C++实现
  • snake29
  • snake29
  • 2016年05月27日 10:05
  • 700

用原生js写2048小游戏

2048-game         #game {       display: none;       position: absolute;       left: 0px; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:2048小游戏
举报原因:
原因补充:

(最多只允许输入30个字)