用原生JS写一个网页版的2048小游戏（兼容移动端）
程序员文章站
2023-10-31 18:37:04
这个游戏JS部分全都是用原生JS代码写的，加有少量的CSS3动画，并简单的兼容了一下移动端。 ......
这个游戏js部分全都是用原生js代码写的，加有少量的css3动画，并简单的兼容了一下移动端。
先看一下在线的demo：
github地址：https://github.com/yuan-yiming/2048-online-game
====================================================================
下面简单分析一下js代码：
1.游戏中包含的主要事件：
new game按钮的click事件：点击后重新开始一次新的游戏；
game over后重新开始按钮的click事件：点击后重新开始一次新的游戏；
桌面端键盘上的方向键keydown的事件：按下方向键后数字会向相应的方向移动；
移动端的touch事件：通过计算touchstart和touchend的坐标变化，判断手指在移动端屏幕的滑动方向；
2.业务逻辑
2.1 重新开始一次游戏：
需要清空游戏盘，并且随机给一个格子生成一个数字2，每次生成不同数字都会给格子配相应的背景颜色；
2.2 按下方向盘或滑动屏幕时格子移动情况（核心部分）
游戏面板有4 x 4的格子，遍历每一行的每一个格子，若为空格则不作处理，非空格则要判断其下一步（注意每次只判断一步的动作）的运动情况，即：
a：空格，不作处理
b：非空格，进一步判断下一步动作，有3种情况：
b1：若需要移动的格子前面是没有数字的空格，则格子往前移动一个，即将数字插入到前面格子内，原本格子中的数字销毁，然后从b开始循环再次判断；
b2：若需要移动的格子前面不是空格，且与前面格子包含的数字不相等，则格子无需移动，该格子运动判断完毕，进行下一个格子的运动判断；
b3：若需要移动的格子前面不是空格，且与前面格子包含的数字相等，则将前面格子内的数字 x 2，原本格子中的数字销毁，该格子运动判断完毕，进行下一个格子的运动判断；
注意：由于是每次运动都是由运动方向的最前面格子开始运动的，即b2，b3两种情况碰到前面有格子时，说明前面的格子已经完成运动，前面没有空位了，所以当前格子运动完成，继续移动后面的格子。
以下使用图片来说明格子运动的情况：
上面有两行格子，如果是向左运动，首先遍历第1行，对1~4号格子依次判断其运动情况，首先1号格子先运动，由于是1号格子靠边，可认为其前面是包含不同数字的格子，运动情况为b2，无需运动；2号格子为空格，运动情况为a；3号格子前面为空格，首先运动情况为b1，运动后3号格子的数字插到2号格子，3号格子数字销毁成为空格，然后需要对2号格子再次判断，再进行一次运动，即b3，使得1号格子数字变成4，2号格子成为空格；后面4号格子为空格不作处理。遍历第2行，对5~8号格子依次判断其运动情况，5号格子与1号格子情况相同，6、7、8号格子为空格，无需处理。
向左运动后的格子：
如果是向右运动，遍历第1行要从右边开始，4~1号格子依次运动，首先4号格子空格无需处理；然后3号格子运动情况b1，向前移动一格，数字2插入到4号格子内；2号空格无需处理；1号空格先连续进行两次b1运动，再进行一次b3运动，碰到4号格子内数字相同，最终使得4号格子内数字变成4。遍历第2行，8~5号格子依次运动，8、7、6号为空格均无需处理，5号格子连续3次b1运动，使得8号格子内数字变成2。
向右运动后的格子：
向上或者向下运动同理。
=====================================================================
下面废话不说，直接上代码。
html代码：index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>play 2048 game online!</title>
<link rel="stylesheet" type="text/css" href="desktop.css">
<link media="(max-width: 860px)" rel="stylesheet" type="text/css" href="mobile.css">
<link rel="icon" href="icon.png">
</head>
<body>
<!-- <div class="github"><a href="https://www.baidu.com"></a></div> -->
<div class="wrapper">
<div class="header">
<div class="title">
<strong>2048</strong>
</div>
<div class="slogan">
<p>play 2048 game online！</p>
</div>
<div class="score">
<span>score</span><br><span class="number">0</span><span class="score-animation">+12</span>
</div>
<div class="best">
<span>best</span><br><span class="number">1024</span><span class="best-animation">+12</span>
</div>
<div class="new-game">
<span>new game</span>
</div>
</div>
<div class="game-board">
<div class="grid grid-11 row1 col1"><span></span></div>
<div class="grid grid-12 row1 col2"><span></span></div>
<div class="grid grid-13 row1 col3"><span></span></div>
<div class="grid grid-14 row1 col4"><span></span></div>
<div class="grid grid-21 row2 col1"><span></span></div>
<div class="grid grid-22 row2 col2"><span></span></div>
<div class="grid grid-23 row2 col3"><span></span></div>
<div class="grid grid-24 row2 col4"><span></span></div>
<div class="grid grid-31 row3 col1"><span></span></div>
<div class="grid grid-32 row3 col2"><span></span></div>
<div class="grid grid-33 row3 col3"><span></span></div>
<div class="grid grid-34 row3 col4"><span></span></div>
<div class="grid grid-41 row4 col1"><span></span></div>
<div class="grid grid-42 row4 col2"><span></span></div>
<div class="grid grid-43 row4 col3"><span></span></div>
<div class="grid grid-44 row4 col4"><span></span></div>
</div>
<div class="popup">
<div class="game-over">
<p>game is over...</p>
<p class="try-again">try again?</p>
</div>
<div class="win">
<p>you win the game!! </p><p>congratulation!!</p>
<p class="try-again">try again?</p>
</div>
</div>
</div>
<script type="text/javascript" src="2048.js"></script>
</body>
</html>
css桌面版代码：desktop.css
* {
list-style: none;
color: #8f7a66;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ffffe0;
}
.wrapper {
position: relative;
width: 400px;
height: 540px;
/*border: 1px solid red;*/
margin: 0 auto;
}
/*头部*/
.header {
width: 400px;
height: 140px;
/*border: 1px solid green;*/
position: relative;
/*opacity: 0.4;*/
}
.title, .slogan, .score, .best, .new-game, .github>a {
position: absolute;
}
.title strong {
display: inline-block;
width: 260px;
height: 100px;
font-size: 78px;
line-height: 100px;
/*text-align: center;*/
padding: 0 5px;
/*border: 1px solid black;*/
}
.slogan {
padding: 0 5px;
top: 85px;
/*border: 1px solid black;*/
}
.github>a {
display: inline-block;
width: 50px;
height: 50px;
/*border: 1px solid red;*/
top: 8%;
right: 5%;
/*margin: 5px;*/
background: url("git.png") no-repeat 0 0;
border-radius: 50%;
background-size: 100%;
}
.github>span>span {
display: inline-block;
width: 100px;
height: 16px;
line-height: 16px;
position: absolute;
bottom: -24px;
left: -25px;
text-align: center;
color: #2c2c2c;
}
/*分数*/
/* 分数动画 */
.score-animation, .best-animation{
display: none;
position: absolute;
top: 25px;
left: 10px;
width: 65px;
height: 30px;
font-size: 24px;
font-weight: bold;
}
.score {
left: 220px;
}
.best {
left: 315px;
}
.score, .best {
position: absolute;
width: 85px;
height: 60px;
line-height: 28px;
top: 20px;
background-color: #bbada0;
}
.score span, .best span, .new-game span {
color: #ffffff;
}
.score, .best, .new-game, .game-board, .grid {
text-align: center;
border-radius: 5px;
}
.best .number, .score .number, .new-game {
font-size: 22px;
font-weight: bold;
}
.new-game {
width: 180px;
height: 40px;
line-height: 40px;
left: 220px;
top: 90px;
text-align: center;
background-color: #8e7963;
cursor: pointer;
}
.new-game:hover {
width: 182px;
height: 42px;
line-height: 42px;
left: 219px;
top: 89px;
font-size: 24px;
}
/*游戏主面板*/
.game-board {
width: 400px;
height: 400px;
padding: 5px 5px;
background-color: #bbada0;
/*opacity: 0.4;*/
}
.grid {
position: relative;
float: left;
width: 87.5px;
height: 87.5px;
line-height: 87.5px;
/*font-size: 48px;*/
font-weight: bold;
margin: 5px;
background-color: #b0c4de;
}
.game-board .grid span {
/*color: */
}
/*game over or win the game弹出页面*/
.popup .game-over, .popup .win {
position: absolute;
left: 60px;
text-align: center;
width: 280px;
height: 160px;
border-radius: 5px;
/*border: 1px solid red;*/
opacity: 1.0;
}
.popup p {
color: #8f7a66;
}
.popup .game-over {
display: none;
top: 230px;
font-size: 36px;
font-weight: bold;
}
.popup .win {
display: none;
top: 220px;
font-size: 28px;
font-weight: bold;
}
p.try-again {
color: #fff;
font-size: 22px;
width: 150px;
height: 50px;
line-height: 50px;
border-radius: 5px;
margin: 0 auto;
background-color: #8f7a66;
cursor: pointer;
}
.header, .game-board {
/*opacity: 0.4;*/
}
.new-grid {
background-color: #b0c4de !important;
}
/* 生成新格子动画 */
@keyframes tempgrid {
from {width: 45px; height: 45px; top: 24px;left: 24px; font-size: 18px; line-height: 45px;display: block;}
to {width: 87.5px; height: 87.5px; top: 0px;left: 0px; font-size: 48px; line-height: 87.5px;display: none;}
}
@-webkit-keyframes tempgrid {
from {width: 45px; height: 45px; top: 24px;left: 24px; font-size: 18px; line-height: 45px;display: block;}
to {width: 87.5px; height: 87.5px; top: 0px;left: 0px; font-size: 48px; line-height: 87.5px;display: none;}
}
@-moz-keyframes tempgrid {
from {width: 45px; height: 45px; top: 24px;left: 24px; font-size: 18px; line-height: 45px;display: block;}
to {width: 87.5px; height: 87.5px; top: 0px;left: 0px; font-size: 48px; line-height: 87.5px;display: none;}
}
.temp-grid {
animation: tempgrid 0.15s ease-in forwards;
-webkit-animation: tempgrid 0.15s ease-in forwards;
-ms-animation: tempgrid 0.15s ease-out forwards;
-moz-animation: tempgrid 0.15s ease-out forwards;
}
css移动端兼容代码：mobile.css
body {
background-color: #fffadd;
}
.wrapper {
width: 100%;
/*height: 540px;*/
/*border: 1px solid red;*/
/*margin: 0 auto;*/
}
/*头部*/
.header {
width: 100%;
/*height: 140px;*/
position: relative;
}
.title, .slogan, .score, .best, .new-game {
position: absolute;
float: left;
text-align: center;
}
.title, .slogan {
width: 100%;
}
.title strong {
display: inline-block;
width: 100%;
/*height: 260px;*/
font-size: 487%; /* 100% 16px */
/*line-height: 192%;*/
text-align: center;
/*padding: 0 5px;*/
/*border: 1px solid black;*/
}
.slogan {
/*margin-top: 10px;*/
top: 65%;
}
/* github */
/*.github>a {
top: 4%;
right: 6.25%;
}*/
/*分数*/
.score, .best, .new-game {
width: 25%;
/*border: 1px solid green;*/
}
/* 分数动画 */
.score-animation, .best-animation{
display: none;
/*position: absolute;*/
top: 25px;
left: 10px;
width: 65px;
height: 30px;
font-size: 24px;
font-weight: bold;
}
.score, .best {
/*position: absolute;*/
line-height: 28px;
top: 90%;
background-color: #bbada0;
}
.score {
left: 47.5%;
}
.best {
left: 75%;
}
.new-game {
width: 45%;
height: 60px;
line-height: 60px;
left: 0;
top: 90%;
text-align: center;
background-color: #8e7963;
cursor: pointer;
/*padding-bottom: 2em;*/
font-size: 28px;
}
.new-game:hover {
width: 45%;
/*height: 42px;*/
/*line-height: 42px;*/
height: 60px;
line-height: 60px;
left: 0;
top: 90%;
/*line-height: 2e;*/
font-size: 28px;
}
.score span, .best span, .new-game span {
color: #ffffff;
}
.score, .best, .new-game, .game-board, .grid {
text-align: center;
border-radius: 5px;
}
.best .number, .score .number {
font-size: 22px;
font-weight: bold;
}
/*游戏主面板*/
.game-board {
position: absolute;
/*display: none;*/
width: 100%;
height: auto;
/*height: 400px;*/
/*padding: 10px 10px;*/
background-color: #bbada0;
/*opacity: 0.4;*/
top: 36%;
}
.grid {
/*position: relative;*/
float: left;
width: 22%;
/*height: */
/*padding-bottom: 21.95%;*/
/*height: 100%;*/
line-height: 80px;
/*font-size: 48px;*/
font-weight: bold;
/*padding-bottom: 410px;*/
padding: 1.5%;
background-color: #b0c4de;
}
/* 生成新格子动画 */
@keyframes tempgrid {
from {width: 50%; height: 50%; top: 25%;left: 25%; font-size: 24px; line-height: 192%;display: block;}
to {width: 100%; height: 100%; top: 0px;left: 0px; font-size: 48px; line-height: 192%;display: none;}
}
@-webkit-keyframes tempgrid {
from {width: 50%; height: 50%; top: 25%;left: 25%; font-size: 24px; line-height: 192%;display: block;}
to {width: 100%; height: 100%; top: 0px;left: 0px; font-size: 48px; line-height: 192%;display: none;}
}
@-moz-keyframes tempgrid {
from {width: 50%; height: 50%; top: 25%;left: 25%; font-size: 24px; line-height: 192%;display: block;}
to {width: 100%; height: 100%; top: 0px;left: 0px; font-size: 48px; line-height: 192%;display: none;}
}
js代码：2048.js
// 页面加载时
window.onload = function () {
// var temp = tempgrid(2);
givenumber(2);
newgamebotton();
getready();
backgroundcolortonumber();
scalewidth();
touch();
}
// 在移动端使得格子宽高比例1:1
function scalewidth() {
// 获取格子的宽度
var grid = document.getelementsbyclassname("grid"),
width = window.getcomputedstyle(grid[0], null)["width"];
// width = grid[0].style.width;
//给格子高度赋值
for (var i = 0; i < 16; i++) {
grid[i].style.height = width;
}
}
// 创建一个临时的格子
function createtempgrid(num) {
var temp = document.createelement("div");
temp.innerhtml = "<span>" + num + "</span>";
temp.style.position = "absolute";
temp.style.backgroundcolor = "#fff8dc";
temp.style.width = "87.5px";
temp.style.height = "87.5px";
temp.style.lineheight = "87.5px";
temp.style.fontweight = "bold";
temp.style.fontsize = "48px";
temp.style.borderradius = "5px";
temp.style.top = "0";
temp.style.left = "0";
// temp.style.display = "none";
// console.log(temp);
temp.classlist.add("temp-grid");
return temp;
};
// 删除临时格子
function deletetempgrid() {
var temp = document.getelementsbyclassname("temp-grid");
for (var i = 0; i < temp.length; i ++) {
temp[i].remove();
}
var newgrid = document.getelementsbyclassname("new-grid");
// console.log(newgrid);
if (newgrid) {
// console.log(newgrid.length);
for (var i = 0; i < newgrid.length; i ++) {
newgrid[i].classlist.remove("new-grid");
// console.log(newgrid.length);
}
}
}
// givenumber：随机生成一个空格子，每个空格子里面放一个数字num
function givenumber(num) {
// console.log("give!!!!");
var x, y, newgrid, tempgrid;
tempgrid = createtempgrid(num);
while (true) {
// if (tempgrid && tempgrid.parentelement) {
// tempgrid.parentelement.removechild(tempgrid);
// }
x = math.floor(math.random() * 4) + 1;
y = math.floor(math.random() * 4) + 1;
newgrid = document.getelementsbyclassname("grid-" + x + y)[0];
// newgrid.style.backgroundcolor = "#b0c4de";
if (newgrid.innerhtml == "<span></span>") {
newgrid.classlist.add("new-grid");
newgrid.innerhtml = "<span>" + num + "</span>";
newgrid.appendchild(tempgrid);
break;
}
}
// return blankgrid;
}
// cleargrid：清空格子及分数归零
function cleargrid() {
var grid = document.getelementsbyclassname("grid"),
score = document.getelementsbyclassname("score")[0].children[2];
score.innertext = "0";
for (var i = 0; i < grid.length; i ++) {
grid[i].innerhtml = "<span></span>";
// grid[i].style.backgroundcolor = "#b0c4de";
}
backgroundcolortonumber();
}
// 重新开始一次游戏
function newgame() {
cleargrid();
givenumber(2);
backgroundcolortonumber();
return true;
}
// 触发新一次游戏的按钮
function newgamebotton() {
var newgamebtn = document.getelementsbyclassname("new-game")[0];
newgamebtn.addeventlistener("click", function () {
newgame();
}, false);
newgamebtn.addeventlistener("touchend", function () {
newgame();
}, false);
}
// backgroundcolortonumber：数字跟背景颜色/数字大小对应
function backgroundcolortonumber() {
var gridnum,
// child,
grid = document.getelementsbyclassname("grid");
for (var i = 0; i < grid.length; i ++) {
gridnum = getgridnum(grid[i]);
// child = grid[i].children[0];
grid[i].style.fontsize = "48px";
// if ((" " + grid[i].classname + " ").indexof(" " + "new-grid" + " ") == -1) {
switch (gridnum) {
case 2:
grid[i].style.backgroundcolor = "#fff8dc";
// grid[i].children[0].style.color = "#fff"; // 这句代码会使得页面瘫痪！！
break;
case 4:
grid[i].style.backgroundcolor = "#e9967a";
// grid[i].children[0].style.color = "#8f7a66";
break;
case 8:
grid[i].style.backgroundcolor = "#ffa07a";
break;
case 16:
grid[i].style.backgroundcolor = "#f4a460";
break;
case 32:
grid[i].style.backgroundcolor = "#fa8072";
break;
case 64:
grid[i].style.backgroundcolor = "#ff7f50";
break;
case 128:
grid[i].style.backgroundcolor = "#ff6347";
grid[i].style.fontsize = "40px";
break;
case 256:
grid[i].style.backgroundcolor = "#ff8800";
grid[i].style.fontsize = "40px";
break;
case 512:
grid[i].style.backgroundcolor = "#ff6600";
grid[i].style.fontsize = "40px";
break;
case 1024:
grid[i].style.backgroundcolor = "#f53";
grid[i].style.fontsize = "32px";
break;
case 2048:
grid[i].style.backgroundcolor = "#f40";
grid[i].style.fontsize = "32px";
break;
default:
grid[i].style.backgroundcolor = "#b0c4de";
// grid[i].children[0].style.color = "#fff";
}
// }
}
}
// 游戏主入口
function getready() {
window.onkeydown = function(e) {
deletetempgrid(); // 在其他位置
keydown(e.keycode);
// backgroundcolortonumber();
}
}
// getgridnum(ele)：传入div元素，返回格子里面的数字
function getgridnum(ele) {
return parseint(ele.children[0].innertext); // 空格返回nan
}
// 各个方向的prevgrid，即所对应方向的前一个格子
function getprevgrid(ele, direction) {
var prevele,
count = 0;
// 各个方向
if (direction == "left") {
return ele.previouselementsibling || null;
} else if (direction == "right") {
return ele.nextelementsibling || null;
} else if (direction == "up") {
for (var i = 0; i < 4; i ++) {
ele = ele.previouselementsibling;
if (!ele) {
return null;
}
}
return ele;
} else if (direction == 'down') {
for (var i = 0; i < 4; i ++) {
ele = ele.nextelementsibling;
if (!ele) {
return null;
}
}
return ele;
}
}
// #滑块移动#
// 桌面版通过监听方向键来控制滑块移动方向
function keydown(keycode) {
var dir,
arr,
go,
count = 0, // 用于叠加每次运动得到的分数
signal = 0; // 用于判断格子是否运动
switch (keycode) {
case 37:
dir = "left";
break;
case 38:
dir = "up";
break;
case 39:
dir = "right";
break;
case 40:
dir = "down";
break;
}
for (var i = 1; i < 5; i ++) {
if (dir == "up" || dir == "down") {
arr = document.getelementsbyclassname("col" + i);
}else if (dir == "left" || dir == "right") {
arr = document.getelementsbyclassname("row" + i);
}
if (dir == "up" || dir == "left") {
for (var j = 1; j <= 3; j ++) {
// console.log(col[j]);
max = j;
go = howtogo(arr[j], dir, max); // 叠加返回得分
// console.log("go2:" + go);
signal += go;
if (go > 1) {
count += go; // 累计每一次运动的得分
}
}
} else if (dir == "down" || dir == "right") {
for (var j = 2; j >= 0; j --) {
max = 3 - j;
go = howtogo(arr[j], dir, max);
// gridmove(arr[j], dir, 1);
// console.log("go:" + go);
signal += go;
if (go > 1) {
count += go; // 累计每一次运动的得分
}
}
}
}
// 格子有运动signal > 0
if (signal > 0) {
// console.log("signal:" + signal);
givenumber(2);
backgroundcolortonumber();
testgameover();
}
// 格子移动，且得分＞0
if (count > 0) {
addscore(count);
}
return count;
}
// 移动端使用touch事件来监听滑块移动
function touch() {
var gameboard = document.getelementsbyclassname("game-board")[0];
gameboard.addeventlistener("touchstart",function (e) {
// e.preventdefault();
startx = e.changedtouches[0].pagex;
starty = e.changedtouches[0].pagey;
},false);
gameboard.addeventlistener('touchend',function(e){
e.preventdefault(); // 阻止浏览器的默认行为，例如滚动、跳转等!!
//获取滑动屏幕时的x,y
endx = e.changedtouches[0].pagex,
endy = e.changedtouches[0].pagey;
//获取滑动距离
distancex = endx-startx;
distancey = endy-starty;
//判断滑动方向，滑动角度大于15°
if(math.abs(distancex) / math.abs(distancey) > 1.73 && distancex > 0){
deletetempgrid();
keydown(39);
}else if(math.abs(distancex) / math.abs(distancey) > 1.73 && distancex < 0){
deletetempgrid();
keydown(37);
}else if(math.abs(distancey) / math.abs(distancex) > 1.73 && distancey < 0){
deletetempgrid();
keydown(38);
}else if(math.abs(distancey) / math.abs(distancex) > 1.73 && distancey > 0){
deletetempgrid();
keydown(40);
}else{
// console.log('点击未滑动');
}
});
}
// 3.记录分数，分数会增加，
function addscore(score) {
var span = document.getelementsbyclassname("number"),
currentscore = parseint(span[0].innertext),
bestscore = parseint(span[1].innertext);
span[0].innertext = score + currentscore;
scoreupanimaton("score", score);
if (span[0].innertext > bestscore) {
scoreupanimaton("best", score);
span[1].innertext = span[0].innertext;
}
}
// howtogoleft(ele, direction, max)：该函数判断单个格子怎么移动
function howtogo(ele, direction, max, testmode) {
var prevgrid,
prevgridnum,
gridnum = 0,
go,
addnum,
numlen,
doublenumgrid;
// console.log(prevgrid);
// 各个方向
prevgrid = getprevgrid(ele, direction);
gridnum = getgridnum(ele);
if (prevgrid) {
prevgridnum = getgridnum(prevgrid);
} else {
prevgridnum = "null";
}
// 前面是空格，要继续判断。。。。。。。。。。。。。。。。。。。。。
if (gridnum && !prevgridnum) {
prevgrid.innerhtml = ele.innerhtml;
ele.children[0].innertext = "";
max -= 1;
// gridmove(ele, direction, 1);
if (max) {
go = howtogo(prevgrid, direction, max);
// 0、double、continue
}
// 返回1
// console.log("go:" + (go || 1));
// if (max == 0) {
// console.log("before:" + typeof(go));
// go = 1;
// console.log("after" + typeof(go));
// }
return go || 1;
// 若go = 0，返回1；go = double，返回double，go = underfied，返回1
// 和前面数字相同
} else if (gridnum == prevgridnum) {
if (!testmode) {
gridnum *= 2;
// addscore(gridnum);
// gridmove(ele, direction, 1);
prevgrid.children[0].innertext = gridnum + "";
// 在这里添加数字变大的动画：
// numlen = (gridnum + "").length;
ele.children[0].innertext = "";
// console.log('gridnum：' + gridnum)
if (gridnum == 2048) {
popup("win");
}
// 如果数字叠加，就返回得分，且得分≥4
}
// console.log("gridnum: " + gridnum);
return gridnum;
} else {
// 格子没动，返回0
return 0;
}
}
// 4.怎么判断game over，或者达到2048为winner
// test geme over
function testgameover() {
var content,
lefttest,
righttest,
uptest,
downtest,
count = 0;
grid = document.getelementsbyclassname("grid");
for (var i = 0; i < grid.length; i ++) {
content = grid[i].innerhtml;
if (content != "<span></span>") {
count += 1;
}
}
// console.log("count：" + count);
if (count == 16) {
if (getgridnum(grid[3]) == getgridnum(grid[4])) {
count -= 2;
}
if (getgridnum(grid[7]) == getgridnum(grid[8])) {
count -= 2;
}
if (getgridnum(grid[11]) == getgridnum(grid[12])) {
count -= 2;
}
for (var i = 0; i < grid.length; i ++) {
if(!howtogo(grid[i], "left", 1, true) && !howtogo(grid[i], "right", 1, true) && !howtogo(grid[i], "up", 1, true) && !howtogo(grid[i], "down", 1, true)) {
count --;
if (count == 0) {
popup("game-over");
return true;
}
}
}
}
return false;
}
// game over 后弹出
function popup(poptype) {
var num,
tryagainele,
ele = document.getelementsbyclassname(poptype)[0],
headerele = document.getelementsbyclassname("header")[0],
gameboardele = document.getelementsbyclassname("game-board")[0];
ele.style.display = "block";
headerele.style.opacity = "0.4";
gameboardele.style.opacity = "0.4";
// tryagain(num);
if (poptype == "game-over") {
num = 0;
}
if (poptype == "win") {
num = 1;
}
tryagainele = document.getelementsbyclassname("try-again")[num];
tryagainele.addeventlistener("click", function () {
tryagain(ele, headerele, gameboardele);
}, false);
tryagainele.addeventlistener("touchend", function () {
tryagain(ele, headerele, gameboardele);
}, false);
}
// 再来一次
function tryagain(ele, headerele, gameboardele) {
ele.style.display = "none";
headerele.style.opacity = "1.0";
gameboardele.style.opacity = "1.0";
newgame();
}
// 5.测试
function test() {
var randomint,
timer;
timer = setinterval(function() {
randomint = math.floor(math.random() * 4) + 37;
keydown(randomint);
// console.log(randomint);
if (testgameover()) {
clearinterval(timer);
}
}, 300);
}
// 分数增加的动画
function scoreupanimaton(type, score) {
var ele,
score,
timer,
count = 0;
if (type == "score") {
ele = document.getelementsbyclassname("score-animation")[0];
} else if (type == "best") {
ele = document.getelementsbyclassname("best-animation")[0];
}
score = "+" + score;
ele.innertext = score;
ele.style.top = "25px";
ele.style.color = "#8f7a66";
ele.style.opacity = "1.0"
timer = setinterval(function() {
count ++;
ele.style.display = "inline-block";
ele.style.top = parseint(ele.style.top) - 8 + "px";
ele.style.opacity = parsefloat(ele.style.opacity) - 0.1;
if (count == 6) {
clearinterval(timer);
ele.style.display = "none";
}
}, 80);
}