Javascript+div 呈现2048游戏

虽然现在2048游戏不是很火了，网页也有很多版本的2048游戏程序逻辑，但是我还是用五一长假中一天使用Javascript+div的形式去呈现2048游戏。

一、html部分

采用div的模式规划一个4*4的正方形矩阵。代码如下：

<div class="gameContainer">
	<div class="gameRow">
		<div id="data00" class="gameCell"></div>
		<div id="data01" class="gameCell"></div>
		<div id="data02" class="gameCell"></div>
		<div id="data03" class="gameCell"></div>
	</div>
	<div class="gameRow">
		<div id="data10" class="gameCell"></div>
		<div id="data11" class="gameCell"></div>
		<div id="data12" class="gameCell"></div>
		<div id="data13" class="gameCell"></div>
	</div>
	<div class="gameRow">
		<div id="data20" class="gameCell"></div>
		<div id="data21" class="gameCell"></div>
		<div id="data22" class="gameCell"></div>
		<div id="data23" class="gameCell"></div>
	</div>
	<div class="gameRow">
		<div id="data30" class="gameCell"></div>
		<div id="data31" class="gameCell"></div>
		<div id="data32" class="gameCell"></div>
		<div id="data33" class="gameCell"></div>
	</div>
</div>

其中class中gameContainer，gameRow，gameCell的样式如下：

.gameContainer{
	background:none repeat scroll 0 0 #bbada0;
	width:500px;
	height:500px;
	box-sizing:border-box;
	margin:10px auto 0 auto;
	position:relative;
	border-radius:10px;
}

.gameRow{
	margin-bottom:15px;
}

.gameCell{
	width:22%;
	height:110px;
	margin:1.5%;
	float:left;
	background:none repeat scroll 0 0 rgba(238, 228, 218, 0.35);
	text-align:center;
	font-size:55px;
	line-height:110px;
}

二、Javascript逻辑

总体设计思路：通过键盘上下左右键来移动界面上数字，并在移动时通过某一行或者某一列累加来检测是否要继续移动逻辑（累加和是否零，当等于0时，这是就不需操作，当不为零时，则表示该行或者列有数字，需要进一下操作）

这里检测代码为：

function CheckChang(bIsRowData, nOrder)
{
	var nSum = 0;
	var nTemp = 0;
	if (bIsRowData){
		for ( ; nTemp<4; nTemp++){
			nSum += arrayOrigData[nOrder][nTemp];
		}
	}else {
		for ( ; nTemp<4; nTemp++){
			nSum += arrayOrigData[nTemp][nOrder];
		}
	}
	return (nSum == 0) ? false:true; 
}  

其中参数bIsRowData表示是否一行的数据，true—表示行数据，false—表示列数据。参数nOrder表示第几行或者第几列。

下面是移动的代码，我这里就以向上移动为例。以后的请读者根据向上这个代码逻辑进行修改。

<pre name="code" class="javascript">function MoveUp()
{
	for (var nColumn=0; nColumn<4; nColumn++){
		var bIsChang = CheckChang(false, nColumn);
		if (bIsChang){
			for (var nRow=1; nRow<4; nRow++){
				var nFrontData = arrayOrigData[nRow-1][nColumn];
				var nCurData = arrayOrigData[nRow][nColumn];
				if (nFrontData == nCurData){
					if(nFrontData != 0){
						arrayOrigData[nRow-1][nColumn] += arrayOrigData[nRow][nColumn];
						arrayOrigData[nRow][nColumn] = 0;
						$("#data" + (nRow-1) + nColumn).text(arrayOrigData[nRow-1][nColumn]);
						$("#data" + nRow + nColumn).text("");
						bHasMove = true;
					}
				}else{
					if ((nFrontData == 0) && (nCurData !=0)){ //这里是为中间有0时移动，比如2 0 2 2，向左移动时4 2 0 0。所以才选用如下算法
						bHasMove = true;  
						//该参数主要用在移动时，是否需要创建新数字，当false表示不需要移动，所以就没有必要去创建新数字，只要用户换个方式移动就好
						arrayOrigData[nRow-1][nColumn] = arrayOrigData[nRow][nColumn];
						arrayOrigData[nRow][nColumn] = 0;
						$("#data" + (nRow-1) + nColumn).text(arrayOrigData[nRow-1][nColumn]);
						$("#data" + nRow + nColumn).text("");
						for (var nTemp=nRow-1;nTemp>0; nTemp--){
							if (arrayOrigData[nTemp-1][nColumn] == 0){
								arrayOrigData[nTemp-1][nColumn] = arrayOrigData[nTemp][nColumn];
								arrayOrigData[nTemp][nColumn] = 0;
								$("#data" + (nTemp-1) + nColumn).text(arrayOrigData[nTemp-1][nColumn]);
								$("#data" + nTemp + nColumn).text("");
							}else{
								if (arrayOrigData[nTemp-1][nColumn] == nCurData){
									arrayOrigData[nTemp-1][nColumn] +=  arrayOrigData[nTemp][nColumn];
									arrayOrigData[nTemp][nColumn] = 0;
									$("#data" + (nTemp-1) + nColumn).text(arrayOrigData[nTemp-1][nColumn]);
									$("#data" + nTemp + nColumn).text("");
								}
								break;
							}
						}
					}
				}
			}
		}
	}
}

注：1、arrayOrigData该数组就是暂时保存移动后的全局数字数组，这样提高效率，不用去网页div上获取上面数字，该数字与网页上矩阵数字是一一对应的。        2、本程序还使用JQuery框架技术，主要是方便获取div的ID，并修改上面数字，当发生变化时。

创建数字。我这里采用随机方式，但是我的创建算法有点小弊端，当空的方式只有一个时，可能耗时会比较旧，因为我将行列号都用随机来生成。代码如下：

function CreatNum()
{
	var nRandNum = (Math.random() * 100) % 20; 
	nRandNum = Math.floor(nRandNum); //这里需要使用取整，使用虽然上面取余，但是不像其他C或者C++语言一样是整数，它还是小数，所以这里需要。
	nRandNum = nRandNum>17 ? 4:2;

	var nRowTemp = (Math.random() * 10) % 4;
	nRowTemp = Math.floor(nRowTemp);
	var nColumnTemp = (Math.random() * 10) % 4;
	nColumnTemp = Math.floor(nColumnTemp);

	if (arrayOrigData[nRowTemp][nColumnTemp] == 0){
		arrayOrigData[nRowTemp][nColumnTemp] = nRandNum;
		$("#data" + nRowTemp + nColumnTemp).text(nRandNum);
	}else{
		 CreatNum();
	}
}

还有一个函数就是去判断游戏是否结束。这个函数比较简单，就是去判断该全局数组是否存在零数字，或者是否有两个相等并且相邻的数字。这里就不再细说。

整体效果如下：

声明：本文是小编【笑梦码侬生】版权所有，转载请注明来处。