用js代码制作2048小游戏

2048小游戏（js）

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

以下为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

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

//将data中的每个元素填写到页面对应的div中(更新页面)
function updateView(){
//遍历data
    for (var r=0;r

c.

在每次按键之后除去数字的合并之外，还会在数组中的随机位置生成一个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开始,到

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

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

   function getNextcInRow(r,c){
    //nextc从c+1开始,到

c.左移所有行

function moveLeft(){//左移所有行
  //将data转为字符串保存在before中
    var before=String(data);
  //r从0到

 

 

 

 

 

右移