首页 > > 网页制作 > Javascript >

用JS实现2048小游戏

2018-06-24 01:58:02来源：未知阅读 ()

前言：

一年来一直做得是后端的东西，没有写前端代码，忘干净了，之前也只用jQuery，好歹还能做点效果。想着捡起来一点，要不然枉费了师傅的栽培。

一直在看博客，但没有属于自己的东西。this has to change.

why not start now?俗话说只要代码敲得够快，悲伤就追不上我。

此篇开博，从简单小游戏开始。目的是做出一些可以快点看到效果的东西，捡回一点程序员的信心。

先看最终效果：

1. 2048游戏功能分析：

核心是4个方向的移动的处理。

往一个方向移动，先看是否有数字的合并。一次移动，一行只允许合并一次，且从终点往起点合并。

合并完成之后，将合并后的数字和其他数字移动，贴边。

在空白位置随机生成一个数字2，移动结束。

算法实现：

考虑采用二维数组存储4*4个格子中的值，如果移动，只需要更新数组，然后用数组的值来更新dom元素即可。

（这种想法不太面向对象。要是将每个格子都理解为一个对象，不知道好不好做，等以后研究--TODO）

2. 要用到的东西

2.1 html页面布局，4*4个方块得整出来

2.2 简单css：不同的数字设置不同颜色

2.3 简单dom操作：取元素，变换显示的数字，改变class

2.4 取随机数算法

2.5 按键事件监听

2.6 一点点交互操作考虑，比如判定游戏失败结束，成功结束，返回上一步。

3. 代码结构：

较为粗糙，js几乎全部是直接用html引用了，不会其他方式。先实现功能；

几个图片是：返回上一步按钮，上下左右按钮，重新开始按钮。

js区分：

arrayHelper是操作数组的；

domOperation顾文思意，操作dom；

eventListener，处理按键事件

common：页面初始化，随机数生成等

4. 核心代码

4.1 向方向【左】移动的逻辑

评论：写的比较死，一步一步，按照规则来即可

// 向一个方向移动,更新数组（左），其他方向也是一样的
function moveLeft(arrayCopy){
    var gameSuccess = false;
    
    // 是否有合并或者移动，如果没有合并也没有移动，就是没有操作那就不要生成新的数字
    var anyChange = false;
    // 每一行，从【左】往【右】对比是否有一样的数字（排除0）--并不需要挨着！中间隔了空气也可以合并
    for (var i=0;i<4;i++){
        var firstIndex = 0;
        var secondIndex = 1;
        while (secondIndex<4){
            if (arrayCopy[i][firstIndex] == 0){
                // 第一个是0,不可能有合并，往后移动
                firstIndex++;
                secondIndex++;
                continue;
            }
            if (arrayCopy[i][secondIndex] == 0){
                // 第二个是0，第二个继续往后找，第一个不变
                secondIndex++;
                // 1. 后面找不到数字，一直往后找，结束循环
                continue;
            }            
            // 有一次一样的数字：计算得到和，放到第一个位置，这一行完了
            else if (arrayCopy[i][firstIndex] == arrayCopy[i][secondIndex]){
                arrayCopy[i][firstIndex] = arrayCopy[i][firstIndex] * 2;
                arrayCopy[i][secondIndex] = 0;
                anyChange = true;
                if (arrayCopy[i][firstIndex] >= 2048){
                    // 得到了2048，游戏结束
                    gameSuccess = true;
                }
                // 2. 后面找到数字，且可以合并，就合并，结束循环
                break;
            }
            else{
                // 3. 后面找到数字，但是不能合并，更新第一个数字为当前数字，第二个数字为下一个数字
                firstIndex = secondIndex;
                secondIndex += 1;
                continue;
            }
        }
    }
    
    // 将每一行数字向【左】挪动
    for (var i=0;i<4;i++){
        var newLine = [];//临时存储从【左】到【右】的非0数字
        var index = 0;
        for (var j=0;j<4;j++){
            if (arrayCopy[i][j] != 0){
                newLine[index] = arrayCopy[i][j];
                index++;
            }
        }
        
        // 用临时存储的数字给数组更新
        for (var m=0;m<index;m++){
            if (arrayCopy[i][m] != newLine[m]){
                anyChange = true;
            }
            arrayCopy[i][m] = newLine[m];
        }
        // 剩余的位置给0
        for (var n=index;n<4;n++){
            if (arrayCopy[i][n] != 0){
                anyChange = true;
            }
            arrayCopy[i][n] = 0;
        }
    }
    
    if (!anyChange){
        console.log("no change after this move!");
        if (!isEmptyCell(arrayCopy)){
            // 本步不能移动，且没有剩余格子，且任意相邻格子没有相同的，就结束游戏
            if (!canMerge(arrayCopy)){
                console.log("Game Over! Try again.");
                return 'fail';
            }
        }
        if (gameSuccess){
            return 'success';
        }
        // 没有移动
        return 'unmoved';
    }
    
    // 给空闲位置设置数字2
    if (isEmptyCell(arrayCopy))
    {
        initOnePosition(arrayCopy);
    }
    
    if (gameSuccess){
        return 'success';
    }
    return 'moved';
}

4.2. 通用的移动处理。

因为往一个方向移动，和往其他方向移动处理是一样的，不可能复制以上代码4次吧。

换个方向看：往左移动和往右移动对数组的操作，只是行处理相反，列处理一样；

其他方向移动类似，不值得copy整个方法。

// 通用方法
// 所有移动都转换成一个方向上的移动：例如，都想象成向左移动，只需要倒转数组即可，完成移动再倒转回来！
function move(direction){
    if (flagSuccess){
        if (confirm("You've got your 2048! Start Another One?\n已经通关！开始新游戏？")){
            gameRestart();
        }
        return;
    }
    
    // 移动之前，记录上一步的内容，移动失败之后可以恢复
    var lastStepUnchange = createNewArray();
    updateFrontArray(lastStepUnchange,lastStepArray);
    // 将上一步状态设置为当前的
    updateFrontArray(lastStepArray,arrayInit);
    
    // 将当前的去更新,更新失败则回滚上一步的状态
    // 1. 数组倒转复制
    var arrayCopy = new Array();
    if (direction == 'left'){
        arrayCopy = copyArrayLeft();
    }else if (direction == 'right'){
        arrayCopy = copyArrayRight();
    }else if (direction == 'up'){
        arrayCopy = copyArrayUp();
    }else if (direction == 'down'){
        arrayCopy = copyArrayDown();
    }
    
    // 2. 都向一个方向移动
    var moveResult = moveLeft(arrayCopy);
    if ('fail' == moveResult){
        
        updateFrontArray(lastStepArray,lastStepUnchange);
        // 移动失败，没有任何改变
        if (confirm('Game Over! Try again?\n游戏结束，再来一次？')){
            gameRestart();
            return;
        }else{
            // 最后一步了，允许回退
            clickedLastStep = false;
            return;
        }
        return;
    }
    if ('unmoved' == moveResult){
        return;
    }
    
    // 3. 从倒转的数组更新原数组
    if (direction == 'left'){
        restoreArrayLeft(arrayCopy);
    }else if (direction == 'right'){
        restoreArrayRight(arrayCopy);
    }else if (direction == 'up'){
        restoreArrayUp(arrayCopy);
    }else if (direction == 'down'){
        restoreArrayDown(arrayCopy);
    }
    
    // 4. 根据数字更新页面元素
    updatePageByArray();
    updateColor();
    
    if ('success' == moveResult){
        // 因为操作DOM不是实时的，所以要等一段事件操作完成之后再弹出确认框
        setTimeout(function(){
            // 游戏通关，是否重新开始
            if (confirm('Congragulations! Start Another Game?\n恭喜通关！是否再来一把?')){
                gameRestart();
            }else{
                flagSuccess = true;
            }
        },200);
        return;
    }
    
    // 移动完成
    clickedLastStep = false;
}

4.3 随机数的生成：

开始做的是生成一个随机数，16个位置的任意一个，如果这个位置已经有人了，就放弃，重新生成一个，直到找到空位为止。

但是到空位变少的时候，这样效率低下。

优化：只在空位中找随机位置。

// 生成随机数，转化成0-15的整数;
function getRamdom(count)
{
    // 0-1
    var r0 = Math.random();
    // 0-16
    var r1 = r0 * count;
    // 只取整数位数的数
    return Math.floor(r1);
}

// 改进：只在当前可用位置中随机找，不用找不可用的位置 
function getOneEmptyCoordinate(array)
{
    // 1. 得到当前数组
    var countEmptyCells = 0;
    var mapIndex2Coordinate = {};
    var coordinates = null;
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            if (array[i][j] == 0){
                countEmptyCells++;
                coordinates = new Array();
                coordinates.push(i);
                coordinates.push(j);
                mapIndex2Coordinate[countEmptyCells] = coordinates;
            }
        }
    }
    // 取可用位置的随机位置
    var random = getRamdom(countEmptyCells);
    return mapIndex2Coordinate[random];
}

5. 欠缺：

5.1 布局，样式的调整比较嫌麻烦，瞎调的。

5.2 js代码关系--没什么关系，忘了前端是怎么组织的了；

5.3 刷新页面多次，可能出现从初始化异常，可能是文件加载顺序问题，初始化时dom操作比较慢等原因

5.4 看看别人实现思路如何

-- http://www.cnblogs.com/-lizi/p/8431030.html 这个写的很漂亮

6. 总结：

开发时间：5天下班时间，实际投入：15个小时左右。

代码规模：js400行；

7. 完整代码粘贴

index.html

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<link href="../css/common.css" rel="stylesheet">

<body>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/eventListener.js"></script>
    <script type="text/javascript" src="../js/domOperation.js"></script>
    <div id="main">
        <div id="refreshDiv" onclick="gameRestart()">
            <span id="refreshButton">
                <img src="../resource/refreshButton.png"  alt="refresh" />
                <a>重新开始</a>
            </span>
        </div>
        <div id="mainTable">
        </div>
        <div id="explation">
            <span>
             2048游戏说明：<br>
             按上下左右方向键可以移动有数字的方块，<br>
             相邻的相同数字的方块往一个方向移动会合并成更大的数字。<br>
             当最大数字出现2048时，游戏胜利！<br>
             温馨提示：你可以使用空格键回退上一步。
            </span>
        </div>
        <div id="rights">
            <span>
                All rights reserved to S.C. Contact me at 857025773@qq.com. 
            </span>
        </div>
    </div>
    
    <!-- 操作 -->
    <div id="keys">
        <div>
            <span id="moveUpButton"onclick="move('up')">
                <img src="../resource/direction.png"  alt="direction" />
            </span>
        </div>
        <div>
            <span id="moveLeftButton"onclick="move('left')">
                <img src="../resource/direction.png"  alt="direction" />
            </span>
            <span id="moveBackButton" onclick="eventSpaceKey()">
                <img src="../resource/moveBack.png"  alt="moveBack" />
            </span>
            <span id="moveRightButton"onclick="move('right')">
                <img src="../resource/direction.png"  alt="direction" />
            </span>
        </div>
        <div>
            <span id="moveDownButton"onclick="move('down')">
                <img src="../resource/direction.png"  alt="direction" />
            </span>
        </div>
    </div>
    
    
    <script type="text/javascript">
        window.onload = function(){
                pageInit();
        }
    </script>
</body>

common.css

#main
{
    margin-left:500px;
    margin-top:100px;
    width:404px;
    heignt:400px;
    border: 0px solid gray;
    border-radius: 1px;
}

#keys
{
    margin-left:1150px;
    margin-top:-430px;
    width:303px;
    heignt:300px;
    border: 3px solid green;
    border-radius: 20px;
}


#keys div
{
    display:flex;
    height:75px;
}

#keys div span
{
    height:75px;
    width:100px;
    border: 1px solid gray;
    background:blue;
}

#moveLeftButton img
{
    height:75px;
    width:100px;
    -ms-transform:rotate(180deg); /* IE 9 */
    -moz-transform:rotate(180deg); /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
    -o-transform:rotate(180deg); /* Opera */
}
#moveRightButton img
{
    height:75px;
    width:100px;
}

#moveUpButton
{
    margin-left:100px;
}
#moveUpButton img
{
    margin-top: -13px;
    margin-left: 12px;
    height:100px;
    width:75px;
    -ms-transform:rotate(270deg); /* IE 9 */
    -moz-transform:rotate(270deg); /* Firefox */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    -o-transform:rotate(270deg); /* Opera */
}
#moveDownButton
{
    margin-left:100px;
}
#moveDownButton img
{
    margin-left: 12px;
    margin-top: -13px;
    height:100px;
    width:75px;
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}
#moveBackButton
{
    height:100px;
    width:75px;
    background:yellow !important;
}

#refreshDiv
{
    height:40px;
    width:133px;
    margin-left:140px;
    cursor: pointer;
    background:#ba3537;
    border-radius: 2px;
}

#refreshDiv span
{
    display: contents;
    font-family: '微软雅黑';
    margin-left:159px;
    font-size:20;
}
#refreshDiv span a
{
    margin-bottom: 10px;
}


#explation
{
    margin-top:30px;
}
#rights
{
    margin-top:100px;
}
#rights span
{
    font-size:10;
}

#explation span
{
    font-size:14;
}

#mainTable
{
    margin-top:20px;
    background:#f5f5f5;
    border: 2px solid #478dcd;
    border-radius: 3px;
}

#mainTable div
{
    display:flex;
    width:400px;
    heignt:100px;
}

#mainTable span
{
    height:100px;
    width:100px;
    border: 1px solid gray;
    font-size: 50;
    text-align: center;
    font-weight:bold;
    
}

.color0
{
    background:#f5f5f5;
}

.color2
{
    background:#f5c7ad;
}
.color4
{
    background:#ec9362;
}
.color8
{
    background:#e3631e;
}
.color16
{
    background:#c2fcb1;
    font-size: 45 !important;
}
.color32
{
    background:#76f850;
    font-size: 45 !important;
}
.color64
{
    background:#2dad07;
    font-size: 45 !important;
}
.color128
{
    background:#a8a6f9;
    font-size: 40 !important;
}
.color256
{
    background:#4b47f1;
    font-size: 40 !important;
}
.color512
{
    background:#110da4;
    font-size: 40 !important;
}
.color1024
{
    background:#f799ef;
    font-size: 35 !important;
}
.color2048
{
    background:#a30e98;
    font-size: 35 !important;
}

common.js

// 拼成了2048，冻结操作，不允许移动了
var flagSuccess = false;
// 刚才点击了回退，不允许重复点击，要移动之后再点击
var clickedLastStep = false;

// 记录上一步，用于回退
var lastStepArray = [
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0]
                     ];

// 数组初始化--正常初始化
var arrayInit = 
    [
     [0,0,0,0],
     [0,0,0,0],
     [0,0,0,0],
     [0,0,0,0]
   ];
//[//调试--将要success
// [0,0,0,0],
// [0,128,0,0],
// [0,0,512,1024],
// [0,0,0,1024]
//];
//[//调试--将要fail
// [1,2,3,4],
// [5,128,6,7],
// [8,9,512,1024],
// [13,22,11,11]
//];



// 页面加载初始化
function pageInit()
{
    addHelper();
    
//    initArray();
    // 页面元素初始化（单元格）
    initElements();
    
    // 初始数据
    initTwoPositions();
    
    // 根据初始数据给单元格填充值
    updatePageByArray();
    
    // 根据单元格的值给单元格设置样式
    updateColor();
}

// 重新开始
function gameRestart(){
    initArray();
    pageInit();
}

function initArray(){
    flagSuccess = false;
    arrayInit = createNewArray();
    clickedLastStep = false;
    lastStepArray = createNewArray();
}


// 给两个位置设置数字2
function initTwoPositions()
{
    initOnePosition(arrayInit);
    initOnePosition(arrayInit);
}
// 给一个位置设置数字2
function initOnePosition(array){
    // 取随机数方式1
//    var num = getRamdom(16);
//    var line = Math.floor(num/4);
//    var col = num % 4;
//    var curNum = array[line][col];
//    if (curNum == 0)
//    {
//        // 成功找到空闲位置
//        array[line][col] = 2;
//        return true;
//    }
//    else{
//        // 递归调用，必须找到一个可用位置才算完
//        return initOnePosition(array);
//    }
    
    // 取随机数方式2
    var coordinate = getOneEmptyCoordinate(array);
    array[coordinate[0]][coordinate[1]] = 2; 
}

function isEmptyCell(arrayCopy)
{
    for (var i=0;i<4;i++)
    {
        for (var j=0;j<4;j++)
        {
            if (arrayCopy[i][j] == 0)
            {
                return true;
            }
        }
    }
    return false;
}

// 生成随机数，转化成0-15的整数;
function getRamdom(count)
{
    // 0-1
    var r0 = Math.random();
    // 0-16
    var r1 = r0 * count;
    // 只取整数位数的数
    return Math.floor(r1);
}

// 改进：只在当前可用位置中随机找，不用找不可用的位置 
function getOneEmptyCoordinate(array)
{
    // 1. 得到当前数组
    var countEmptyCells = 0;
    var mapIndex2Coordinate = {};
    var coordinates = null;
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            if (array[i][j] == 0){
                countEmptyCells++;
                coordinates = new Array();
                coordinates.push(i);
                coordinates.push(j);
                mapIndex2Coordinate[countEmptyCells] = coordinates;
            }
        }
    }
    // 取可用位置的随机位置
    var random = getRamdom(countEmptyCells);
    return mapIndex2Coordinate[random];
}

eventListener,js

/**
 *  引用工具类
 */
function addHelper(){
    var newscript = document.createElement('script');  
    newscript.setAttribute('type','text/javascript');  
    newscript.setAttribute('src','../js/arrayHelper.js');  
    document.body.appendChild(newscript);  
}

//捕捉按键事件
document.onkeyup = function(event) {
    event = event || window.event;
    
    if (event.keyCode == 37){//left
        move('left');
    }else if (event.keyCode == 39){//right
        move('right');
    }else if (event.keyCode == 38){//up
        move('up');
    }else if (event.keyCode == 40){//down
        move('down');
    }else if (event.keyCode == 32){//space
        eventSpaceKey();
    }
}

function eventSpaceKey(){
    // 回退上一步
    if (clickedLastStep){
        console.log('can not move back again');
        return;
    }
    moveBack();
    flagSuccess = false;
    clickedLastStep = true;
}

// 回退上一步
function moveBack(){
    // 判断上一步全是0（刚刚初始化）
    var justStarted = true;
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            if (lastStepArray[i][j] != 0){
                justStarted =  false;
            }
        }
    }
    if(justStarted){
        return;
    }
    
    // 1. 用备份的数组给当前数组设置值
    updateFrontArray(arrayInit,lastStepArray);
    
    // 3. 更新页面
    updatePageByArray();
    updateColor();
}

// 通用方法
// 所有移动都转换成一个方向上的移动：例如，都想象成向左移动，只需要倒转数组即可，完成移动再倒转回来！
function move(direction){
    if (flagSuccess){
        if (confirm("You've got your 2048! Start Another One?\n已经通关！开始新游戏？")){
            gameRestart();
        }
        return;
    }
    
    // 移动之前，记录上一步的内容，移动失败之后可以恢复
    var lastStepUnchange = createNewArray();
    updateFrontArray(lastStepUnchange,lastStepArray);
    // 将上一步状态设置为当前的
    updateFrontArray(lastStepArray,arrayInit);
    
    // 将当前的去更新,更新失败则回滚上一步的状态
    // 1. 数组倒转复制
    var arrayCopy = new Array();
    if (direction == 'left'){
        arrayCopy = copyArrayLeft();
    }else if (direction == 'right'){
        arrayCopy = copyArrayRight();
    }else if (direction == 'up'){
        arrayCopy = copyArrayUp();
    }else if (direction == 'down'){
        arrayCopy = copyArrayDown();
    }
    
    // 2. 都向一个方向移动
    var moveResult = moveLeft(arrayCopy);
    if ('fail' == moveResult){
        
        updateFrontArray(lastStepArray,lastStepUnchange);
        // 移动失败，没有任何改变
        if (confirm('Game Over! Try again?\n游戏结束，再来一次？')){
            gameRestart();
            return;
        }else{
            // 最后一步了，允许回退
            clickedLastStep = false;
            return;
        }
        return;
    }
    if ('unmoved' == moveResult){
        return;
    }
    
    // 3. 从倒转的数组更新原数组
    if (direction == 'left'){
        restoreArrayLeft(arrayCopy);
    }else if (direction == 'right'){
        restoreArrayRight(arrayCopy);
    }else if (direction == 'up'){
        restoreArrayUp(arrayCopy);
    }else if (direction == 'down'){
        restoreArrayDown(arrayCopy);
    }
    
    // 4. 根据数字更新页面元素
    updatePageByArray();
    updateColor();
    
    if ('success' == moveResult){
        // 因为操作DOM不是实时的，所以要等一段事件操作完成之后再弹出确认框
        setTimeout(function(){
            // 游戏通关，是否重新开始
            if (confirm('Congragulations! Start Another Game?\n恭喜通关！是否再来一把?')){
                gameRestart();
            }else{
                flagSuccess = true;
            }
        },200);
        return;
    }
    
    // 移动完成
    clickedLastStep = false;
}

// 向一个方向移动,更新数组（左），其他方向也是一样的
function moveLeft(arrayCopy){
    var gameSuccess = false;
    
    // 是否有合并或者移动，如果没有合并也没有移动，就是没有操作那就不要生成新的数字
    var anyChange = false;
    // 每一行，从【左】往【右】对比是否有一样的数字（排除0）--并不需要挨着！中间隔了空气也可以合并
    for (var i=0;i<4;i++){
        var firstIndex = 0;
        var secondIndex = 1;
        while (secondIndex<4){
            if (arrayCopy[i][firstIndex] == 0){
                // 第一个是0,不可能有合并，往后移动
                firstIndex++;
                secondIndex++;
                continue;
            }
            if (arrayCopy[i][secondIndex] == 0){
                // 第二个是0，第二个继续往后找，第一个不变
                secondIndex++;
                // 1. 后面找不到数字，一直往后找，结束循环
                continue;
            }            
            // 有一次一样的数字：计算得到和，放到第一个位置，这一行完了
            else if (arrayCopy[i][firstIndex] == arrayCopy[i][secondIndex]){
                arrayCopy[i][firstIndex] = arrayCopy[i][firstIndex] * 2;
                arrayCopy[i][secondIndex] = 0;
                anyChange = true;
                if (arrayCopy[i][firstIndex] >= 2048){
                    // 得到了2048，游戏结束
                    gameSuccess = true;
                }
                // 2. 后面找到数字，且可以合并，就合并，结束循环
                break;
            }
            else{
                // 3. 后面找到数字，但是不能合并，更新第一个数字为当前数字，第二个数字为下一个数字
                firstIndex = secondIndex;
                secondIndex += 1;
                continue;
            }
        }
    }
    
    // 将每一行数字向【左】挪动
    for (var i=0;i<4;i++){
        var newLine = [];//临时存储从【左】到【右】的非0数字
        var index = 0;
        for (var j=0;j<4;j++){
            if (arrayCopy[i][j] != 0){
                newLine[index] = arrayCopy[i][j];
                index++;
            }
        }
        
        // 用临时存储的数字给数组更新
        for (var m=0;m<index;m++){
            if (arrayCopy[i][m] != newLine[m]){
                anyChange = true;
            }
            arrayCopy[i][m] = newLine[m];
        }
        // 剩余的位置给0
        for (var n=index;n<4;n++){
            if (arrayCopy[i][n] != 0){
                anyChange = true;
            }
            arrayCopy[i][n] = 0;
        }
    }
    
    if (!anyChange){
        console.log("no change after this move!");
        if (!isEmptyCell(arrayCopy)){
            // 本步不能移动，且没有剩余格子，且任意相邻格子没有相同的，就结束游戏
            if (!canMerge(arrayCopy)){
                console.log("Game Over! Try again.");
                return 'fail';
            }
        }
        if (gameSuccess){
            return 'success';
        }
        // 没有移动
        return 'unmoved';
    }
    
    // 给空闲位置设置数字2
    if (isEmptyCell(arrayCopy))
    {
        initOnePosition(arrayCopy);
    }
    
    if (gameSuccess){
        return 'success';
    }
    return 'moved';
}

// 是否有任意相邻的格子可以合并
function canMerge(arrayCopy){
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            if (j+1 < 4&& arrayCopy[i][j] == arrayCopy[i][j+1]){
                return true;
            }
            if (i+1 < 4 && arrayCopy[i][j] == arrayCopy[i+1][j]){
                return true;
            }
        }
    }
    return false;
}

arrayHelper.js

function createNewArray(){
    var newArray = [
                           [0,0,0,0],
                           [0,0,0,0],
                           [0,0,0,0],
                           [0,0,0,0]
                         ];
    return newArray;
}


// 后面的复制给前面
function updateFrontArray(arr1,arr2)
{
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            arr1[i][j] = arr2[i][j];
        }
    }
}

function copyArray(arr){
    var newArray = createNewArray();
    updateFrontArray(newArray,arr);
    return newArray;
}


//左，原方向
function copyArrayLeft(){
    var arrayCopy = copyArray(arrayInit);
    return arrayCopy;
}
function restoreArrayLeft(arrayCopy){
    updateFrontArray(arrayInit,arrayCopy);
}

//右，上下不变，左右颠倒
function copyArrayRight(){
    var arrayCopy = new Array();
    for (var i=0;i<4;i++){
        var copyOneLine = new Array();
        for (var j=0;j<4;j++){
            copyOneLine[3-j] = arrayInit[i][j];
        }
        arrayCopy[i] = copyOneLine;
    }
    return arrayCopy;
}
function restoreArrayRight(arrayCopy){
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            arrayInit[i][j] = arrayCopy[i][3-j];
        }
    }
}

//上
//从上往下变成从左往右
//从右往左变成从上往下
//(i,j) 对应：(3-j,i)
function copyArrayUp(){
    var arrayCopy = [
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0]
                     ];
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            arrayCopy[3-j][i] = arrayInit[i][j];
        }
    }
    return arrayCopy;
}
function restoreArrayUp(arrayCopy){
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            arrayInit[i][j] = arrayCopy[3-j][i];
        }
    }
}

//下
//从上往下变成从下往上
//从左往右变成从左往右
//(i,j) 对应：(j,3-i)
function copyArrayDown(){
    var arrayCopy = [
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0]
                     ];
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            arrayCopy[j][3-i] = arrayInit[i][j];
        }
    }
    return arrayCopy;
}
function restoreArrayDown(arrayCopy){
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            arrayInit[i][j] = arrayCopy[j][3-i];
        }
    }
}

domOperation.js

// 用数组给元素赋值
function updatePageByArray()
{
    var lines = document.getElementById("mainTable").children;
    var lineIndex = 0;
    
    while (lineIndex < lines.length)
    {
        var spanIndex = 0;
        while (spanIndex < lines[lineIndex].children.length)
        {
            var oneSpan = lines[lineIndex].children[spanIndex];
            oneSpan.innerHTML = arrayInit[lineIndex][spanIndex];
            spanIndex++;
        }
        lineIndex++;
    }
}

// 初始化单元格和颜色
function initElements()
{
    var mainTable = document.getElementById("mainTable");
    var str = '';
    // 创建行
    for (var i=0;i<4;i++)
    {
        str += "<div id='" +"line"+i+"'>";
        for (var j=0;j<4;j++)
        {
            var num = arrayInit[i][j];
            str += "<span id='" +"span"+i+j+"'>"
                        + num+
                    "</span>";
        }
        str += "</div>";
        mainTable.innerHTML = str;
    }
}

// 根据ID更新颜色
function updateColor(){
    for (var i=0;i<4;i++){
        for (var j=0;j<4;j++){
            var span = document.getElementById("span"+i+j);
            var value = span.innerHTML;
            if (value == '0'){
                span.innerHTML = '';
            }
            span.className = (" color" + value);
        }
    }
}