引言：做2048小游戏会将横纵方向的数字内容，存储在一个二维数组中，要将这个二维数组中的内容显示在页面上，就一定要用遍历算法来实现了。
| 一、二维数组存储 |
- 首先考虑用二维数组存储所有行数，列数 → var RN=4，CN=4;
- 然后再定义一个变量data 来保存这个二维数组 → var data;
- 游戏的所有主要执行程序都保存在start()函数下 → 启动游戏
- 保存存有行数，列数的二维数组到data中 关键代码 ↓
function start(){
data=[]; //创建空数组保存在data中
for(var r=0;r<RN;r++){ //r从0到<RN
data.push([]); //向data中压入一个空的子数组
for(var c=0;c<CN;c++){} //c从0到<CN结束
data[r][c]=0; //为data中r行c位置保存一个0
……
}
}
}
start(); //调用start函数，游戏启动
| 二、在二维数组中随机选一个位置生成2或4 |
- 关键函数创建 → function randomNum(){ }
- 生成横行和纵行的位置的随机数保存在r和c → 0~RN-1之间，0~CN-1之间
- 2048的游戏有一个重要特点，每移动一次数字会增加两个新的数字，并且这个数字不会覆盖掉原来的数字
- 坑：只有在随机生成的位置处无数字，即data中r行c列的值为0时，才可以给data中r行c列随机保存一个2或4
- 解决：反复执行上面的算法，直到条件满足，才保存这个随机的2或4
- 坑：需要随机，且只能在2或4这两种情况中选择
- 解决：因为Math.random()生成的随机数在0~1之间，且游戏要求又只有2种，可以依据判断生成的随机数是否<0.5来决定保存2或者是4，如果游戏要增加难度，希望其中一个数字的概率生成要大一点，那么这个0.5的数字即为出现概率控制的关键
- 坑：2048的游戏每次增加的是两个新的数字
- 解决：在调用随机生成函数randomNum()的时候，一定要调用两次，这样才可以生成两个数
- 坑：这个时候页面上没有任何效果
- 解决：因为现在还只是把数字保存在了内存中的二维数组里，还没有往页面上写，所以还需要再往页面上写，查的时候只能在控制台上查
//在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;//0.5控制2和4的出现几率
break;
}
}
}
| 三、遍历算法将数组元素填写到页面对应div |
- 关键函数创建 → function updateView(){ }
- 遍历到二维数组的元素之后，要和页面的div对应上，关键 ↓
- 页面div起名的时候，c01即表示第0行第1列的div
- 在拿到二维数组的元素后，“c”+行号+列号，就组成了对应div的id
- 拼好id之后，按id找到对应的div元素
- 遍历data的二维数组 两个for循环 → 外层循环控制行，内层循环控制列
- 将遍历到的r行c列的值保存到div的内容 → div.innerHTML = data[r][c];
- 坑：二维数组中r行c列的值可能是还未获得随机数时的 0 ，依据2048游戏的规则，这个时候是不能保存到div中的
- 解决：加判断，如果r行c列的值不为0，才将值保存到div中；否则，把r行c列的值为0的对应div中的内容清除掉，因为二维数组里的元素为0，实际上有两种情况，一种是还从未有过值，但这种情况会随着游戏的行移动次数增加，逐渐减少，更多的是，这个位置里面曾经有过一个值，并且div上也有过数字，但是经过行的移动移走了，这个时候，就要立即把对应的r行c列的div的内容也清除掉，这样才能保证页面数字的变化显示与二维数字中的变化相同。
- 给内容数值为 * 的div的class添加一个 n*，同时清除div本身的class属性 → n*为css中对应数字的特定背景颜色class
//将data中的每个元素填写到页面的对应div中
updateView(); function updataView(){
//遍历data
for(var r=0;r<this.RN;r++){
for(var c=0;c<this.CN;c++){
var id = "c"+r+c;
var div = document.getElementById(id);
if(this.data[r][c]!=0){
div.innerHTML = data[r][c];
div.className = "n"+data[r][c];
}else{
div.innerHTML = "";
div.className = "";
}
}
}
var span = document.getElementById("score");
span.innerHTML=score;
}
注：转载请注明出处