2048小游戏（js）

1.先确定整体样式（4x4）（html，css）

以下为html代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="2048.css"/>
</head>
<body>
  <!--//代码补全(快捷创建方法)-->
  <!--div#gridPanel>div#c00*16 +tab-->
  <div id="gridPanel">
    <div id="c00"></div>
    <div id="c01"></div>
    <div id="c02"></div>
    <div id="c03"></div>

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

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

    <div id="c30"></div>
    <div id="c31"></div>
    <div id="c32"></div>
    <div id="c33"></div>
  </div>
<script src="2048.js"></script>
</body>
</html>

以下为相关css代码

#gridPanel{
    width:480px;height: 480px;
    margin: 0 auto ;
    border-radius: 10px;
    background: #bbada0;
}
div>div{
    width: 100px;height: 100px;
    margin-top: 16px;
    margin-left: 16px;
    float: left;
    border-radius: 6px;
    margin-top: 16px;margin-left: 16px;
    background: #ccc0b3;
    color: #fff;font-size:60px;
    text-align: center;
    line-height: 100px;
}
.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:#9c0}
.n1024{background-color:#33b5e5}
.n2048{background-color:#09c}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n2,.n4{color:#776e65}
.n1024,.n2048,.n4096,.n8192{font-size:40px}

讲解：略

2.（js）

（1）

编写游戏进行时的执行函数（其实2048这个游戏本身就是一个随按键变化的相关数组）

var RN=4,CN=4;//总行数总列数
var data;//定义变量保存空数组

a.主程序:

function start() {//启动游戏
    data=[];//创建空数组，保存在data中
    //r从0<RN结束
    for (var r=0;r<RN;r++) {
        data.push([])//向data中压入一个空数组
        // c从0<CN结束
        for (var c = 0; c < CN; c++) {
            data[r][c] = 0//将其中的值都赋为0
        }
    }
    //随机生成2个2或4
    randomNum();randomNum();
    //将data中的数据更新到页面中
    updateView();
    //为当前页面添加键盘按下时间处理函数
    document.onkeydown=function (e) {
        switch (e.keyCode) {
            case 37:moveLeft();break;
            case 38:break;
            case 39:break;
            case 40:break;
        }
    }

b.将后台数组的相关变化体现到页面中

//将data中的每个元素填写到页面对应的div中(更新页面)
function updateView(){
//遍历data
    for (var r=0;r<RN;r++){
      for (var c=0;c<RN;c++){
        //用r，c拼对应的div的id
          var id="c"+r+c;
          var div=document.getElementById(id)
          if(data[r][c]!=0) {
              div.innerHTML = data[r][c];
              div.className="n"+data[r][c];
          }
          else {
              div.innerHTML="";
              div.className="";
          }
      }
    }

在每次按键之后除去数字的合并之外，还会在数组中的随机位置生成一个2或4

//在data中一个随机位置生成2或4'
function randomNum() {
  while (true) {
      var r = parseInt(Math.random() * RN);
      var c = parseInt(Math.random() * CN);
      if (data[r][c] == 0) {
        data[r][c]=
            Math.random()<0.5?2:4;
          break
      }
          }
}

（2）

左移

先分析一个方向的移动，以向左移动为例

a.先确定向左移动一行需要的代码

RN（总行数）

CN(总列数)

r（当前行）

c(当前列)

function moveLeftInRow(r){
  //左移第r行
  //c从0开始,到<CN-1（当c到达CN-1时，nextc就不存在了）
    for (var c=0;c<CN-1;c++) {
        //找c右侧下一个不为0的位置nextc
        var nextc=getNextcInRow(r,c);
        //如果没找到，就退出循环
        if(nextc==-1){
            break
        }
        else {
            //否则
            //如果c的位置的值为0
            if(data[r][c]==0) {
                //将nextc位置的值赋值给c的位置
                data[r][c] = data[r][nextc];
                //将nextc位置的值置为0
                data[r][nextc] = 0;
                //将c-1（使c留在原地）
                c--;
            }
                //否则如果c位置的值等于nextc位置的值
            else if(data[r][c]==data[r][nextc]) {
                    //将c位置的值x2
                    data[r][c]*=2;
                    //将nextc位置的值置为0
                    data[r][nextc]=0;
                }
            }

        }
}

b.该代码中的查找nextc（c后面不为零的位置）的函数

从c的下一个坐标开始查找（c+1）到CN结束

   function getNextcInRow(r,c){
    //nextc从c+1开始,到<CN结束
        for (var nectc=c+1;nectc<CN;nectc++) {
            //如果data中r行nextc位置不等于0
            if (data[r][nectc]!=0) {
                //就返回nextc
                return nectc;
            }
        }
        //否则返回-1（即没找到不为0的位置）
        return -1;
    }

c.左移所有行

function moveLeft(){//左移所有行
  //将data转为字符串保存在before中
    var before=String(data);
  //r从0到<RN
    for (var r=0;r<RN;r++) {
        //左移第r行
        moveLeftInRow(r);
    }
        //将data转为字符串保存在after中
        var after=String(data);
        //如果本次发生了移动（如果before不等于after）
        if(before!=after){
            //随机生成一个2或4
            //更新页面
           randomNum();
           updateView();
        }
}

右移

原文链接：https://blog.csdn.net/qq_39458856/article/details/80115698