js实现2048

HTML：

<div id="score">
  0
</div>
<div id="game">
</div>
<a href="javascript:history.go(0);" id="reset">
  重新开始
</a>

JavaScript：

$(function() {

  //初始化
  function reset() {
    _start = 0;
    _score = 0;
    Garr = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
    Narr = [2, 4, 8];
    addArr = [];
    fixarr(5);
  }

  //多维数组判断是否存在某值
  function ifArrVal(arr, value) {
    for (var i = 0; i < arr.length; i++) {
      for (var x = 0; x < arr[i].length; x++) {
        if (arr[i][x] == value) {
          addArr.push(i + "," + x)
        }
      }
    }
    return;
  }

  //判断游戏结束
  function isGameOver(data) {
    for (var r = 0; r < data.length; r++) {
      for (var c = 0; c < data[r].length; c++) {
        if (data[r][c] == 0) {
          return false;
        } else if (c < data[r].length - 1 && data[r][c] == data[r][c + 1]) {
          return false;
        } else if (r < data.length - 1 && data[r][c] == data[r + 1][c]) {
          return false;
        }
      }
    }
    return true;
  }

  //更改,添加
  function fixarr(x) {
    if (_start == 0) {
      for (var i = 0; i < x; i++) {
        num = parseInt(3 * Math.random());
        num2 = parseInt(4 * Math.random());
        num3 = parseInt(4 * Math.random());
        Garr[num3].splice(num2, 1, Narr[num])
      }
      _start = 1;
    } else {
      if (isGameOver(Garr) == true) {
        if (confirm("游戏结束, 分数：" + _score + "。 是否重新开始？")) {
          history.go(0);
        }
      } else {
        for (var i = 0; i < x; i++) {
          addArr = [];
          ifArrVal(Garr, 0);
          if (addArr.length != 0) {
            num = parseInt(3 * Math.random());
            num2 = parseInt(addArr.length * Math.random());
            var str = addArr[num2];
            var arr = str.split(",");
            Garr[arr[0]].splice(arr[1], 1, Narr[num])
          }
        }
      }
    }
    upload();
  }

  //输出画面
  function upload() {
    $("#score").html(_score);
    $("#game").html("");
    for (x in Garr) {
      for (y in Garr[x]) {
        if (Garr[x][y] == 0) {
          $("#game").append("<span></span>");
        } else if (Garr[x][y] == 2) {
          $("#game").append("<span class='tile--2'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 4) {
          $("#game").append("<span class='tile--4'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 8) {
          $("#game").append("<span class='tile--8'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 16) {
          $("#game").append("<span class='tile--16'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 32) {
          $("#game").append("<span class='tile--32'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 64) {
          $("#game").append("<span class='tile--64'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 128) {
          $("#game").append("<span class='tile--128'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 256) {
          $("#game").append("<span class='tile--256'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 512) {
          $("#game").append("<span class='tile--512'>" + Garr[x][y] + "</span>");
        } else if (Garr[x][y] == 1024) {
          $("#game").append("<span class='tile--1024'>" + Garr[x][y] + "</span>");
        }
      }
    }
  };

  //键盘事件
  $(document).keydown(function(event) {
    var e = event || window.event;
    var k = e.keyCode || e.which;
    switch (k) {
    case 37:
      for (i = 0; i < 4; i++) {
        getData(Garr[i]);
      }
      break;
    case 38:
      getData2(Garr);
      break;
    case 39:
      for (i = 0; i < 4; i++) {
        getData3(Garr[i]);
      }
      break;
    case 40:
      getData4(Garr);
      break;
    };
    fixarr(2); //添加两个数字
    upload();
  });
  //左
  var getData = function(arr) {
    var i, nextI, len, m;
    len = arr.length;
    for (i = 0; i < len; i += 1) {
      nextI = -1;
      for (m = i + 1; m < len; m++) {
        if (arr[m] !== 0) {
          nextI = m;
          break;
        }
      }

      if (nextI !== -1) {
        if (arr[i] === 0) {
          arr[i] = arr[nextI];
          arr[nextI] = 0;
          i -= 1;
        } else if (arr[i] === arr[nextI]) {
          arr[i] = arr[i] * 2;
          arr[nextI] = 0;
          _score++;
        }
      }
    }
    return arr;
  };
  //右
  var getData3 = function(arr) {
    var i, nextI, len, m;
    len = arr.length - 1;
    for (i = len; i > -1; i -= 1) {
      nextI = -1;
      for (m = i - 1; m > -1; m--) {
        if (arr[m] !== 0) {
          nextI = m;
          break;
        }
      }
      if (nextI !== -1) {
        if (arr[i] === 0) {
          arr[i] = arr[nextI];
          arr[nextI] = 0;
          i += 1;
        } else if (arr[i] === arr[nextI]) {
          arr[i] = arr[i] * 2;
          arr[nextI] = 0;
          _score++;
        }
      }
    }
    return arr;
  };
  //上
  var getData2 = function(arr) {
    var i, nextI, len, m, x;
    len = arr.length;
    for (x = 0; x < len; x += 1) {
      for (i = 0; i < len; i++) {
        nextI = -1;
        for (m = i + 1; m < len; m++) {
          if (arr[m][x] !== 0) {
            nextI = m;
            break;
          }
        }
        if (nextI !== -1) {
          if (arr[i][x] === 0) {
            arr[i][x] = arr[nextI][x];
            arr[nextI][x] = 0;
            i -= 1;
          } else if (arr[i][x] === arr[nextI][x]) {
            arr[i][x] = arr[i][x] * 2;
            arr[nextI][x] = 0;
            _score++;
          }
        }
      }
    }
    return arr;
  };
  //下
  var getData4 = function(arr) {
    var i, nextI, len, m, x;
    len = arr.length - 1;
    for (x = len; x > -1; x -= 1) {
      for (i = len; i > -1; i--) {
        nextI = -1;
        for (m = i - 1; m > -1; m--) {
          if (arr[m][x] !== 0) {
            nextI = m;
            break;
          }
        }
        if (nextI !== -1) {
          if (arr[i][x] === 0) {
            arr[i][x] = arr[nextI][x];
            arr[nextI][x] = 0;
            i += 1;
          } else if (arr[i][x] === arr[nextI][x]) {
            arr[i][x] = arr[i][x] * 2;
            arr[nextI][x] = 0;
            _score++;
          }
        }
      }
    }
    return arr;
  };

  //初始化
  reset();

});

CSS：

* {
  margin: 0;
  padding: 0;
}

body {
  background: #3E3E3E;
}

#game {
  width: 400px;
  height: 400px;
  margin: 10px auto;
  border-left: #EDEDED 1px solid;
  border-top: #EDEDED 1px solid;
}

#game span {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: block;
  float: left;
  font-size: 40px;
  color: #666;
  border-right: #EDEDED 1px solid;
  border-bottom: #EDEDED 1px solid;
  box-sizing: border-box;
}

#game span.tile--2 {
  background: #FFC43D;
  color: #F8FFE5;
}

#game span.tile--4 {
  background: #EF476F;
  color: #F8FFE5;
}

#game span.tile--8 {
  background: #1B9AAA;
  color: #F8FFE5;
}

#game span.tile--16 {
  background: #06D6A0;
  color: #F8FFE5;
}

#game span.tile--32 {
  background: #f37694;
  color: #F8FFE5;
}

#game span.tile--64 {
  background: #22c2d6;
  color: #F8FFE5;
}

#game span.tile--128 {
  background: #17f8be;
  color: #F8FFE5;
}

#game span.tile--256 {
  background: #ffd470;
  color: #F8FFE5;
}

#game span.tile--512 {
  background: #eb184a;
  color: #F8FFE5;
}

#game span.tile--1024 {
  background: #14727e;
  color: #F8FFE5;
}

#game span.tile--2048 {
  background: #05a47b;
  color: #F8FFE5;
}

#score {
  display: block;
  margin: 20px auto;
  text-align: center;
  color: #68868C;
  font-size: 80px;
}

#reset {
  width: 120px;
  height: 50px;
  line-height: 50px;
  display: block;
  margin: 30px auto;
  text-align: center;
  background: #405559;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
}