最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。（文末给出相关代码）
游戏相关截图：
主要实现的功能：
1.初始化时随机生成两个数字为2或4的格子
2.方块的移动和合并。 根据移动后的值,改变方块的颜色和位置
3.判断在某个方向上是否可以移动。
4.在随机生成数字的时候判断16宫格中是否还有空间，有则生成下一块。
5.判输。 需要满足条件 1.16宫格中没有空间生成新的格子。2.上下左右四个方向上无法移动 同时满足两项条件则判输。
6.分数。任意两个格子合并后，新增分数为合并后格子的值。
7.比较重要的算法是判断每个格子移动到什么位置，应不应该合并。
使用的方法是：（以向左移动为例）先判断判断格子是否能够向左移动，如果可以，循环每一个格子。如果这个格子的值不为0，遍历格子左侧的元素，判断落脚的位置是否为空以及落脚位置的数字是否和本来的数字相等 。如果落脚的位置为空 && 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子的值，原格子值设为空。如果落脚位置的数字和本来的数字相等&& 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子值与落脚位置格子值相加后的值，原格子值设为空。
如果这样写的话有个问题是如果出现类似4 4 8 0 移动后会为16 0 0 0，我的解决办法是设定一个一样的4x4数组，每个格子初始值赋为0，相加过的格子赋值为1，合并的时候判断相应位置的数组值是否为0，若为0则合并，否则不合并，每次判断时每个格子值赋为0。
上面一堆话可能看着有点晕，下面我们具体来使用html/css/javascript实现2048
该项目的主要结构如下：
首先我们观察2048游戏的界面可以看到是有4X4的格子，我们很容易就想到用数组实现，不涉及功能，我们可以先把前端页面写出来，具体的细节我就不讲了，一看就懂的。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网页版2048</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript"
src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/support2048.js"></script>
<script type="text/javascript" src="js/showanimation2048.js"></script>
<script type="text/javascript" src="js/main2048.js"></script>
</head>
<body>
<header>
<h1>2048</h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>
score:<span id="score">0</span>
</p>
</header>
<div id="grid-container">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
<div id="gameover">
GAME OVER
</div>
</body>
</html>index.css
@CHARSET "UTF-8";
*{
padding: 0;
margin: 0;
}
header{
display:block;
margin:0 auto;
width:500px;
text-align:center;
}
header h1{
font-family:Arial, Helvetica, sans-serif;
font-size:60px;
font-weight:bold;
margin-top: 20px;
margin-bottom: 20px;
}
header #newgamebutton{
width:100px;
padding:10px;
background:#8f7a66;
font-family:Arial, Helvetica, sans-serif;
color:white;
border-radius:10px;
text-decoration:none;
}
header #newgamebutton:hover{
background:#9f8b77;
}
header p{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
margin:20px auto;
}
#grid-container{
width:460px;
height:460px;
padding:20px;
margin:40px auto;
background:#bbada0;
border-radius:10px;
position:relative;
}
.grid-cell{
width:100px;
height:100px;
border-radius:6px;
background:#ccc0b3;
position:absolute;
}
.number-cell{
width:100px;
height:100px;
border-radius:6px;
line-height:100px;
font:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:bold;
text-align: center;
position:absolute;
}
#gameover{
background-color:black;
color: white;
font-family:Arial, Helvetica, sans-serif;
font-size:60px;
position: absolute;
top:45%;
left:42%;
width:250px;
text-align:center;
display: none;
}其中grid-cell是底部的无数字的白块，number-cell是后面移动的格子，gameover是游戏结束的提示，number-cell在后面初始化等操作中覆盖掉到grid-cell，gameover在游戏结束后显示。
写好了前端界面，主要的就是javascript的逻辑。
完成初始化的代码，生成随机数，确定样式等
var board = new Array();
var added = new Array();
var score = 0;
var top = 240;
$(document).ready(function(e){
newgame();
});
function newgame(){
//初始化棋盘格
init();
//在随机两个各自生成的数字
generateOneNumber();
generateOneNumber();
}
function init(){
score=0;
document.getElementById("score").innerHTML=score;
$("#gameover").css('display','none');
for(var i = 0;i<4;i++){
for(var j = 0;j<4;j++){
var gridCell = $("#grid-cell-"+i+"-"+j);
gridCell.css("top",getPosTop(i,j));
gridCell.css("left",getPosLeft(i,j));
}
}
for(var i = 0; i<4;i++){//初始化格子数组
board[i] = new Array();
for(var j = 0;j<4;j++){
board[i][j] = 0;
}
}
for(var i = 0; i<4;i++){//初始化判定合并的数组
added[i] = new Array();
for(var j = 0;j<4;j++){
added[i][j] = 0;
}
}
updateBoardView();//通知前端对board二位数组进行设定。
}
function updateBoardView(){//更新数组的前端样式
$(".number-cell").remove();
for(var i = 0;i<4;i++){
for ( var j = 0; j < 4; j++) {
$("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');
var theNumberCell = $('#number-cell-'+i+'-'+j);
if(board[i][j] == 0){
theNumberCell.css('width','0px');
theNumberCell.css('height','0px');
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
}else{
theNumberCell.css('width','100px');
theNumberCell.css('hegiht','100px');
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
//NumberCell覆盖
theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));//返回背景色
theNumberCell.css('color',getNumberColor(board[i][j]));//返回前景色
theNumberCell.text(board[i][j]);
}
}
}
}
function generateOneNumber(){//生成随机的格子
if (nospace(board))
return false;
//随机一个位置
var randx = parseInt(Math.floor(Math.random()*4));
var randy = parseInt(Math.floor(Math.random()*4));
while(true){
if (board[randx][randy] == 0)
break;
randx = parseInt(Math.floor(Math.random()*4));
randy = parseInt(Math.floor(Math.random()*4));
}
//随机一个数字
var randNumber = Math.random()<0.5 ? 2 : 4;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
return true;
}function showNumberWithAnimation(i, j, randNumber) {//实现随机数字的样式变动
var numberCell = $('#number-cell-' + i + '-' + j);
numberCell.css("background-color", getNumberBackgroundColor(randNumber));
numberCell.css("color", getNumberColor(randNumber));
numberCell.text(randNumber);
numberCell.animate({
width : "100px",
height : "100px",
top : getPosTop(i, j),
left : getPosLeft(i, j)
}, 50);
}
根据不同的值获取不同的样式
function getPosTop(i, j) {
return 20 + i * 120;
}
function getPosLeft(i, j) {
return 20 + j * 120;
}
function getNumberBackgroundColor(number) {
switch (number) {
case 2:
return "#eee4da";
break;
case 4:
return "#eee4da";
break;
case 8:
return "#f26179";
break;
case 16:
return "#f59563";
break;
case 32:
return "#f67c5f";
break;
case 64:
return "#f65e36";
break;
case 128:
return "#edcf72";
break;
case 256:
return "#edcc61";
break;
case 512:
return "#9c0";
break;
case 1024:
return "#3365a5";
break;
case 2048:
return "#09c";
break;
case 4096:
return "#a6bc";
break;
case 8192:
return "#93c";
break;
}
return "black";
}
function getNumberColor(number) {
if (number <= 4){
return "#776e65";
}
return "white";
}主要的移动函数（以向左移动为例）：开头讲过
先判断判断格子是否能够向左移动，如果可以，循环每一个格子。如果这个格子的值不为0，遍历格子左侧的元素，判断落脚的位置是否为空以及落脚位置的数字是否和本来的数字相等 。如果落脚的位置为空 && 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子的值，原格子值设为空。如果落脚位置的数字和本来的数字相等&& 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子值与落脚位置格子值相加后的值，原格子值设为空。
如果这样写的话有个问题是如果出现类似4 4 8 0 移动后会为16 0 0 0，我的解决办法是设定一个一样的4x4数组，将每个格子初始值赋为0，相加过的格子赋值为1，合并的时候判断相应位置的数组值是否为0，若为0则合并，为1则证明已经完成了一遍相加不合并，每次判断时每个格子值赋为0。
function isaddedArray(){//将判断能否合并的数组值置为0
for(var i = 0;i<4;i++){
for(var j = 0;j<4;j++){
added[i][j] = 0;
}
}
}
function canMoveLeft( board ){ //判断能否左移
for(var i = 0;i<4;i++)
for(var j = 0;j<4;j++)
if( board[i][j] !=0 && j != 0)
if( board[i][j-1] == 0 || board[i][j-1] == board[i][j])
return true;
return false;
}
//在随机生成数字的时候判断16宫格中是否还有空间
function nospace(board) {
for ( var i = 0; i < 4; i++)
for ( var j = 0; j < 4; j++)
if (board[i][j] == 0)
return false;
return true;
}
//判断水平方向是否有障碍物
function noBlockHorizontal(row, col1, col2, board){
for(var i = col1 + 1; i<col2; i++)
if(board[row][i]!=0)
return false;
return true;
}
//判断竖直方向是否有障碍物
function noBlockVertical(col, row1, row2, board){
for(var i = row1 + 1; i<row2; i++)
if(board[i][col]!=0)
return false;
return true;
}
//实现移动格子的样式变动
function showMoveAnimation(fromx, fromy, tox, toy){
var numberCell = $('#number-cell-'+fromx +'-'+fromy);
numberCell.animate({top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)},200);
}
function moveLeft(){
//判断格子是否能够向左移动
if( !canMoveLeft(board))
return false;
isaddedArray();//每次循环判断前调用
//真正的moveLeft函数//标准
for(var i = 0;i<4;i++)
for(var j = 1;j<4;j++){//第一列的数字不可能向左移动
if(board[i][j] !=0){
//(i,j)左侧的元素
for(var k = 0;k<j;k++){
//落脚位置的是否为空 && 中间没有障碍物
if(board[i][k] == 0 && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
//落脚位置的数字和本来的数字相等 && 中间没有障碍物
else if(board[i][k] == board[i][j] && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
//add
if(added[i][k]!=0){//目标落脚点是否完成过合并
board[i][k+1] = board[i][j];
board[i][j] = 0;
}
else{
board[i][k] += board[i][j];
board[i][j] = 0;
added[i][k] = 1;
score +=board[i][k];//分数变更
}
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
//事件响应循环
$(document).keydown(function(event){
switch (event.keyCode) {
case 37://left
if(moveLeft()){
//setTimeout("generateOneNumber()",210);
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);//300毫秒
}
break;
case 38://up
if(moveUp()){
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);
}
break;
case 39://right
if(moveRight()){
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);
}
break;
case 40://down
if(moveDown()){
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);
}
break;
}
});
function getScore(){
document.getElementById("score").innerHTML=score;
}
//在随机生成数字的时候判断16宫格中是否还有空间
function nospace(board) {
for ( var i = 0; i < 4; i++)
for ( var j = 0; j < 4; j++)
if (board[i][j] == 0)
return false;
return true;
}
//最后收尾
function nomove(board){
if(canMoveLeft(board)|| canMoveRight(board)||canMoveUp(board)||canMoveDown(board))
return false;
return true;
}
function isgameover(){
if(nospace(board)&&nomove(board))
gameover();
}
function gameover(){
$("#gameover").css('display','block');
}完整的javascript代码(index.html index.css 在文章前面已经给出)
main2048.js
var board = new Array();
var added = new Array();
var score = 0;
var top = 240;
$(document).ready(function(e){
newgame();
});
function newgame(){
//初始化棋盘格
init();
//在随机两个各自声称的数字
generateOneNumber();
generateOneNumber();
}
function init(){
score=0;
document.getElementById("score").innerHTML=score;
$("#gameover").css('display','none');
for(var i = 0;i<4;i++){
for(var j = 0;j<4;j++){
var gridCell = $("#grid-cell-"+i+"-"+j);
gridCell.css("top",getPosTop(i,j));
gridCell.css("left",getPosLeft(i,j));
}
}
for(var i = 0; i<4;i++){//初始化格子数组
board[i] = new Array();
for(var j = 0;j<4;j++){
board[i][j] = 0;
}
}
for(var i = 0; i<4;i++){//初始化判定合并的数组
added[i] = new Array();
for(var j = 0;j<4;j++){
added[i][j] = 0;
}
}
updateBoardView();//通知前端对board二位数组进行设定。
}
function updateBoardView(){//更新数组的前端样式
$(".number-cell").remove();
for(var i = 0;i<4;i++){
for ( var j = 0; j < 4; j++) {
$("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');
var theNumberCell = $('#number-cell-'+i+'-'+j);
if(board[i][j] == 0){
theNumberCell.css('width','0px');
theNumberCell.css('height','0px');
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
}else{
theNumberCell.css('width','100px');
theNumberCell.css('hegiht','100px');
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
//NumberCell覆盖
theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));//返回背景色
theNumberCell.css('color',getNumberColor(board[i][j]));//返回前景色
theNumberCell.text(board[i][j]);
}
}
}
}
function generateOneNumber(){//生成随机的格子
if (nospace(board))
return false;
//随机一个位置
var randx = parseInt(Math.floor(Math.random()*4));
var randy = parseInt(Math.floor(Math.random()*4));
while(true){
if (board[randx][randy] == 0)
break;
randx = parseInt(Math.floor(Math.random()*4));
randy = parseInt(Math.floor(Math.random()*4));
}
//随机一个数字
var randNumber = Math.random()<0.5 ? 2 : 4;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
return true;
}
//事件响应循环
$(document).keydown(function(event){
switch (event.keyCode) {
case 37://left
if(moveLeft()){
//setTimeout("generateOneNumber()",210);
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);//300毫秒
}
break;
case 38://up
if(moveUp()){
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);
}
break;
case 39://right
if(moveRight()){
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);
}
break;
case 40://down
if(moveDown()){
getScore();
generateOneNumber();//每次新增一个数字就可能出现游戏结束
setTimeout("isgameover()",400);
}
break;
}
});
function isgameover(){
if(nospace(board)&&nomove(board))
gameover();
}
function gameover(){
$("#gameover").css('display','block');
}
function isaddedArray(){//将判断能否合并的数组值置为0
for(var i = 0;i<4;i++){
for(var j = 0;j<4;j++){
added[i][j] = 0;
}
}
}
function moveLeft(){//更多地细节信息
//判断格子是否能够向左移动
if( !canMoveLeft(board))
return false;
isaddedArray();
//真正的moveLeft函数//标准
for(var i = 0;i<4;i++)
for(var j = 1;j<4;j++){//第一列的数字不可能向左移动
if(board[i][j] !=0){
//(i,j)左侧的元素
for(var k = 0;k<j;k++){
//落脚位置的是否为空 && 中间没有障碍物
if(board[i][k] == 0 && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
//落脚位置的数字和本来的数字相等 && 中间没有障碍物
else if(board[i][k] == board[i][j] && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
//add
if(added[i][k]!=0){//目标落脚点是否完成过合并
board[i][k+1] = board[i][j];
board[i][j] = 0;
}
else{
board[i][k] += board[i][j];
board[i][j] = 0;
added[i][k] = 1;
score +=board[i][k];
}
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveRight(){//更多地细节信息
//判断格子是否能够向右移动
if( !canMoveRight(board))
return false;
isaddedArray();
//真正的moveRight函数//标准
for(var i = 0;i<4;i++)
for(var j = 2;j>=0;j--){//最后一列的数字不可能向右移动
if(board[i][j] !=0){
//(i,j)右侧的元素
for(var k = 3;k>j;k--){
//落脚位置的是否为空 && 中间没有障碍物
if(board[i][k] == 0 && noBlockHorizontal(i , j, k, board)){
//move
showMoveAnimation(i, j,i,k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
//落脚位置的数字和本来的数字相等 && 中间没有障碍物
else if(board[i][k] == board[i][j] && noBlockHorizontal(i , j, k, board)){
//move
showMoveAnimation(i, j,i,k);
//add
if(added[i][k]!=0){
board[i][k-1] = board[i][j];
board[i][j] = 0;
}
else{
board[i][k] += board[i][j];
board[i][j] = 0;
added[i][k] = 1;
score +=board[i][k];
}
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveUp(){//更多地细节信息
//判断格子是否能够向上移动
if( !canMoveUp(board))
return false;
isaddedArray();
//真正的moveUp函数//标准
for(var j = 0;j<4;j++)
for(var i = 1;i<4;i++){//第一行的数字不可能向上移动
if(board[i][j] !=0){
//(i,j)上面的元素
for(var k = 0;k<i;k++){
//落脚位置的是否为空 && 中间没有障碍物
if(board[k][j] == 0 && noBlockVertical(j , k, i, board)){
//move
showMoveAnimation(i, j,k,j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
//落脚位置的数字和本来的数字相等 && 中间没有障碍物
else if(board[k][j] == board[i][j] && noBlockVertical(j , k, i, board)){
//move
showMoveAnimation(i, j,k,j);
//add
if(added[k][j]!=0){
board[k+1][j] = board[i][j];
board[i][j] = 0;
}
else{
board[k][j] += board[i][j];
board[i][j] = 0;
added[k][j] = 1;
score +=board[k][j];
}
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveDown(){//更多地细节信息
//判断格子是否能够向下移动
if( !canMoveDown(board))
return false;
isaddedArray();
//真正的moveDown函数//标准
for(var j = 0;j<4;j++)
for(var i = 2;i>=0;i--){//最后一行的数字不可能向下移动
if(board[i][j] !=0){
//(i,j)上面的元素
for(var k = 3;k>i;k--){
//落脚位置的是否为空 && 中间没有障碍物
if(board[k][j] == 0 && noBlockVertical(j , i, k, board)){
//move
showMoveAnimation(i, j,k,j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
//落脚位置的数字和本来的数字相等 && 中间没有障碍物
else if(board[k][j] == board[i][j] && noBlockVertical(j , i, k, board)){
//move
showMoveAnimation(i, j,k,j);
//add
if(added[k][j]!=0){
board[k-1][j] = board[i][j];
board[i][j] = 0;
}
else{
board[k][j] += board[i][j];
board[i][j] = 0;
added[k][j] = 1;
score +=board[k][j];
}
continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}support2048.js
function getPosTop(i, j) {
return 20 + i * 120;
}
function getPosLeft(i, j) {
return 20 + j * 120;
}
function getNumberBackgroundColor(number) {
switch (number) {
case 2:
return "#eee4da";
break;
case 4:
return "#eee4da";
break;
case 8:
return "#f26179";
break;
case 16:
return "#f59563";
break;
case 32:
return "#f67c5f";
break;
case 64:
return "#f65e36";
break;
case 128:
return "#edcf72";
break;
case 256:
return "#edcc61";
break;
case 512:
return "#9c0";
break;
case 1024:
return "#3365a5";
break;
case 2048:
return "#09c";
break;
case 4096:
return "#a6bc";
break;
case 8192:
return "#93c";
break;
}
return "black";
}
function getNumberColor(number) {
if (number <= 4){
return "#776e65";
}
return "white";
}
function getScore(){
document.getElementById("score").innerHTML=score;
}
//在随机生成数字的时候判断16宫格中是否还有空间
function nospace(board) {
for ( var i = 0; i < 4; i++)
for ( var j = 0; j < 4; j++)
if (board[i][j] == 0)
return false;
return true;
}
//实现功能判断
function canMoveLeft( board ){
for(var i = 0;i<4;i++)
for(var j = 0;j<4;j++)
if( board[i][j] !=0 && j != 0)
if( board[i][j-1] == 0 || board[i][j-1] == board[i][j])
return true;
return false;
}
function canMoveRight( board ){
for(var i = 0;i<4;i++)
for(var j = 0;j<4;j++)
if( board[i][j] !=0 && j != 3)
if( board[i][j+1] == 0 || board[i][j+1] == board[i][j])
return true;
return false;
}
function canMoveUp( board ){
for(var i = 0;i<4;i++)
for(var j = 0;j<4;j++)
if( board[i][j] !=0 && i != 0)
if( board[i-1][j] == 0 || board[i-1][j] == board[i][j])
return true;
return false;
}
function canMoveDown( board ){
for(var i = 0;i<4;i++)
for(var j = 0;j<4;j++)
if( board[i][j] !=0 && i != 3)
if( board[i+1][j] == 0 || board[i+1][j] == board[i][j])
return true;
return false;
}
//判断水平方向是否有障碍物
function noBlockHorizontal(row, col1, col2, board){
for(var i = col1 + 1; i<col2; i++)
if(board[row][i]!=0)
return false;
return true;
}
//判断竖直方向是否有障碍物
function noBlockVertical(col, row1, row2, board){
for(var i = row1 + 1; i<row2; i++)
if(board[i][col]!=0)
return false;
return true;
}
//最后收尾
function nomove(board){
if(canMoveLeft(board)|| canMoveRight(board)||canMoveUp(board)||canMoveDown(board))
return false;
return true;
}showanimation2048.js
function showNumberWithAnimation(i, j, randNumber) {//实现随机数字的样式变动
var numberCell = $('#number-cell-' + i + '-' + j);
numberCell.css("background-color", getNumberBackgroundColor(randNumber));
numberCell.css("color", getNumberColor(randNumber));
numberCell.text(randNumber);
numberCell.animate({
width : "100px",
height : "100px",
top : getPosTop(i, j),
left : getPosLeft(i, j)
}, 50);
}
function showMoveAnimation(fromx, fromy, tox, toy){//实现移动格子的样式变动
var numberCell = $('#number-cell-'+fromx +'-'+fromy);
numberCell.animate({top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)},200);
}本文参考了 用javascript实现2048的小游戏- 零度coder - 博客园，在此表示感谢。
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
