引言:做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;
}
注:转载请注明出处