用原生JS写一个网页版的2048小游戏（兼容移动端）

这个游戏JS部分全都是用原生JS代码写的，加有少量的CSS3动画，并简单的兼容了一下移动端。

先看一下在线的demo：https://yuan-yiming.github.io/2048-online-game/

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的格子，遍历每一行的每一个格子，若为空格则不作处理，非空格则要判断其下一步（注意每次只判断一步的动作，方法howToGo()）的运动情况，即：

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 > 0if (signal > 0) {// console.log("signal:" + signal);giveNumber(2);backgroundColorToNumber();testGameOver();}// 格子移动，且得分＞0if (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,YendX = 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 {// 格子没动，返回0return 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);
}

转载于:https://www.cnblogs.com/yuanyiming/p/10480959.html

用原生JS写一个网页版的2048小游戏（兼容移动端）相关推荐

原生JS写《像素鸟》的小游戏（下落的小鸟）
相信大家都玩过<像素鸟>(又名<下落的小鸟>),今天就教大家用原生JaveScript 实现像素鸟的游戏.还在为得不到高分而苦恼吗?今天学会了,游戏难易自己控制!!! 首先明白 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
html+javascript实现的网页版飞机大战小游戏源码
html+javascript实现的网页版飞机大战小游戏源码完整代码下载地址: html+javascript实现的网页版飞机大战小游戏源码 index.html <!DOCTYPE html ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
使用Qt写一个简单的五子棋单机小游戏
使用Qt写一个简单的五子棋单机小游戏刚学,不够专业请勿喷,有不对的地方还请指出,我渴望进步!现在贴出这个游戏我原创的所有代码.希望可以帮到有需要的人. 游戏界面: 因为后面添加了.wav的音频文件, ...
JS与HTML、CSS实现2048小游戏（一）
JS与HTML.CSS实现2048小游戏(一) 引言知识储备编译器推荐游戏框架构建游戏的基础页面后续文章引言这是大一刚结束的时候做的东西,之前也写了文章做记录,最近想发一下博客,就重新整 ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
写一个简单的实时互动小游戏
在写之前,我们先回顾上一篇文章,从需求.架构.设计.开发上讲述并演示了搭建一个实时通信客户端的过程,并附了图片与视频. 写这篇文章的之前,第一个互动的游戏DEMO已经写好了,先附上截图很奇怪的一张图 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

用原生JS写一个网页版的2048小游戏（兼容移动端）

用原生JS写一个网页版的2048小游戏（兼容移动端）相关推荐

最新文章

热门文章