2048网页版源代码

& lt; !DOCTYPE html>

& lt; html>

, & lt; head>

,& lt; title> 2048 & lt;/title>

,& lt;元charset=" utf - 8 "/祝辞

,& lt; style> # gridPanel {

宽度:480 px;身高:480 px;

保证金:0汽车;

background - color: # bbada0;

border - radius: 10 px;

位置:相对;

}

.grid, .cell {

宽度:100 px;身高:100 px;

border - radius: 6 px;

}

。网格{

,,浮动:左;

保证金:16 px 0 0 16 px;

,,背景颜色:# ccc0b3;

}

.cell {

text-align:中心;

行高:100 px;

颜色:# 776 e65;

字体大小:60 px;

位置:绝对的,

}

/*每行拥有相同的顶级*/

/*每列拥有相同的左*/

# c00, c01 #, # co2, # c03 {: 16 px;,}

# c00, # c10, #甜,# c30{左:16 px;}

# c10, # c11、c12 # # c13 {: 132 px;}

c01 #, # c11, # c21, # c31{左:132 px;}

#甜,# c21, # c22, # c23 {: 248 px;}

#二氧化碳,# c12 # c22, # c32{左:248 px;}

# c30, # c31, # c32, # c33 {: 364 px;}

# c03, # c13, # c23, # c33{左:364 px;}

.n2 {background - color: # eee3da}

.n4 {background - color: # ede0c8}

.n8 {background - color: # f2b179}

.n16 {background - color: # f59563}

.n32 {background - color: # f67c5f}

.n64 {background - color: # f65e3b}

.n128 {background - color: # edcf72}

.n256 {background - color: # edcc61}

.n512 {background - color: # 9 c0}

.n1024 {background - color: # 33 b5e5}

.n2048 {background - color: # 09 c}

.n4096 {background - color: # a6c}

.n8192 {background - color: # 93 c}

.n8, .n16, .n32, .n64, .n128, .n256, .n512, .n1024, .n2048, .n4096, .n8192{颜色:# fff}

.n1024, .n2048, .n4096, .n8192{字体大小:40 px}

/*显示分数的p元素*/

,,p{宽度:480 px;保证金:0汽车;

字体类型:Arial;粗细:大胆的;

字体大小:40像素;padding-top: 15 px;

}

/*败阵界面样式*/

#败阵{显示:没有;

宽度:100%;高度:100%;

位置:绝对;上图:0 px;左:0 px;

}

#败阵div{宽度:100%;高度:100%;

background - color: # 555;透明度:0.5;

}

#败阵p {border - radius: 10 px;

位置:绝对的,最高:200 px;左:35%;

宽度:300 px;身高:200 px;

边界:1 px固体# edcf72;

行高:1.6 em;

text-align:中心;

background - color: # fff;

}

.button{填充:10 px;border - radius: 6 px;

background - color: # 9 f8b77;

颜色:# fff;光标:指针;

}

,& lt;/style>

,& lt; script>

功能任务(obj, topStep leftStep) {

this.obj=obj;

this.topStep=topStep;

this.leftStep=leftStep;

}

//moveStep方法将当前元素对象移动一步

Task.prototype.moveStep=function () {

var=getComputedStyle风格(this.obj, null);

var=大方法(style.top);左

var=方法(style.left);

this.obj.style.top=最高+ this.topStep +“px”;

this.obj.style.left=左+ this.leftStep +“px”;

}

//清楚元素对象的样式,使其返回原地

Task.prototype.clear=function () {

this.obj.style.left=" ";

this.obj.style.top=" ";

}

var动画={

: 10//每个动画10步完成

区间:10//200毫秒迈一步

计时器:null,//保存定时器id的属性

任务:[],//保存每次需要移动的任务

addTask:函数(源、目标){

,,,,,//00,,,02年

console.log(源+”、“+目标);

var sourceDiv=

. getelementbyid (“c”+源),

,,,

var targetDiv=

. getelementbyid (“c”+目标);

var sourceStyle=getComputedStyle (sourceDiv);

var targetStyle=getComputedStyle (targetDiv);

var topStep=(方法(targetStyle.top)

,,方法(sourceStyle.top))/this.times;

var leftStep=(方法(targetStyle.left)

,,方法(sourceStyle.left))/this.times;

var任务=新任务(sourceDiv, topStep leftStep);

this.tasks.push(任务);

},

开始:函数(){

this.timer=setInterval(函数(){

(var i=0; i< animation.tasks.length;我+ +){

animation.tasks[我].moveStep ();}

animation.times,

如果(animation.times==0) {

(var i=0; i< animation.tasks.length;我+ +){

animation.tasks[我].clear ();}

clearInterval (animation.timer);

animation.timer=零;

animation.tasks=[];

animation.times=10;

}

}, this.interval);}

}

,& lt;/script>

,& lt; script>

游戏var={

数据:[],

得分:0,

状态:1,

运行:1,

2048网页版源代码