bom实现方块移动_从0开始实现一个俄罗斯方块

写在前面得话：

这篇文章主要记录了我是怎么一步一步写出俄罗斯方块，整个代码用的函数编程，主要是为了让一些不熟悉es6, 面向对象写法得新手能更容易看明白，全部得代码中都是一些js的基础知识，很容易理解。要说有点麻烦的，那就是游戏过程中的各种检测。但是只要你多思考，你就能理解代码为什么要那样写，你也可以实现这个游戏。（当然也许你有更好的实现方法）。

预览地址：

俄罗斯方块blog.cwlserver.top

1，先理清游戏逻辑

游戏场景：场景大小为 10*18，
下落时间：初始方块每隔1秒，会下落一格。随着游戏进行时间得增加，方块下落时间间隔会缩短。
操作方法：方向键得上下左右分别控制方块得，变形，加速下落，左移，右移。
方块类型：一共7种类型得方块。每次随机出现一种, 每种方块由数个 1*1大小得小方块组成
方块下落：当方块落到底，或者下一格已经被占，方块停止下落，然后会有一个新的方块出现
方块左右移动：方块左右移动时，如果左，右是墙或者是已经被占，方块将不能移动。
方块变形：方块逆时针旋转90°，变形时需要判断方块是否可以变形。
游戏会有下一个方块得提示
消行：当一行被填满时，这一行将被消除
计分规则：消1行得2分，2行4分，3行8分，4行16分
游戏结束: 当方块下落到底，并且方块超出游戏场景时，判定游戏结束

2，分步实现游戏中得功能

html结构

    <div id="box"><canvas id="canvas" width="300" height="540"></canvas><div class="scorebox"><p>游戏已进行: <span id="game-time">00:00:00</span></p><br><p>当前得分: <span id="score">0</span></p><br><p>下一个方块：</p><br><canvas id="next" width="120" height="120"></canvas><br><p class="btns"><button id="pause">暂停</button><button id="restart">重新开始</button></p></div></div>

构建场景

因为场景大小是10x18，所以我决定用一个 10x18得二维数组来模拟场景，这样方便和方块做碰撞检测。

//定义列数
var ROW = 10;
//定义行数
var COL = 18;
//游戏得分
var SCORE = 0;
//游戏场景
var area = new Array(COL);
for(var i=0; i<area.length; i++){area[i] = new Array(ROW).fill(0);
}
/*
最终得到得area是这样得
area = [[0,0,0,0....][0,0,0,0....][0,0,0,0....]...
]
*/

构建小方块

小方块我同样使用二维数组来构建

//定义各种方块得数组, 一共7种不同得方块，数组中的1，2，3，4..这些数字主要是为了每个方块设置不同的颜色
var data = {'o':[[1, 1],[1, 1]],'s':[[2, 0, 0],[2, 2, 0],[0, 2, 0]],'5':[[0, 0, 3],[0, 3, 3],[0, 3, 0]],            'l':[[4, 0, 0],[4, 0, 0],[4, 4, 0]],'t':[[5, 5, 5],[0, 5, 0],[0, 0, 0]],'j':[[0, 0, 6],[0, 0, 6],[0, 6, 6]],'|':[[0, 7, 0, 0],[0, 7, 0, 0],[0, 7, 0, 0],[0, 7, 0, 0]]
};
//定义方块得颜色，每个数字对应一种颜色
var aColor = ['', '#fff', '#0000FF', '#00FF00', '#CC00FF', '#CCFFFF','#FFFF33','#99FFFF'];
//将data中得key放到一个字符串中 方便随机调用
var sKey = 'os5ltj|';
//定义当前方块, 当前方块默认null;
var cur = null;
//因为游戏中会有下一个方块得提示, 所以这里要提前声明一下
var next = null;
//定义一个生成方块得函数
function createBox(){//首先创建提示方块if(!next){//从skey中随机取出一个键名var rnd = Math.floor(Math.random()*sKey.length);//根据key取得方块数组var box = data[sKey[rnd]];//每一个方块都有，x, y, box 这三个属性next = {//方块初始在场景中间位置，方块左移 x--, 右移 x++;x: Math.floor((ROW-box[0].length)/2), //方块在垂直方向得位置，刚好在场景外, y++ 方块下落y: -box[0].length,//方块得数组box: box};}//当前方块不存在时， 创建当前方块if(!cur){//直接下一个方块变成当前这个cur = next;//然后再重新生成下一个next = {x: Math.floor((ROW-box[0].length)/2),y: -box[0].length,box: data[sKey[Math.floor(Math.random()*sKey.length)]]}}
}

现在想一个问题，有了场景和方块的数据之后，如何把他们联系起来？

我的处理方式是这样的，在方块下落的过程中，方块和场景是分开的，方块的位置和场景是分开刷新的。在下落的过程中我会检测方块和场景是否发生碰撞，如果发生了碰撞，将当前方块的数组合并到场景的数组中，使方块变成场景的一部分，同时生成一个新的方块。看下代码如何实现

//将当前方块合并到场景
function mergeBoxArea(){//循环当前方块for(var i=0; i<cur.box.length; i++){//这里的判断是为了当方块的一部分在场景外的时候，将那一部分跳过，只计算在场景中的部分if(i+cur.y>=0){for(var j=0; j<cur.box[i].length){//将当前方块数组中不为0的项，和 场景中当前位置为0的项合并if(cur.box[i][j] !== 0 && area[i+cur.y][j+cur.x] == 0){//合并的结果， 将场景中当前位置的值设置为方块对应位置的值area[i+cur.y][j+cur.x] = cur.box[i][j];}}}}//将方块合并入场景的同时要尝试 消行var arr = isRemove(area);if(arr.length !== 0){for(var i=0; i<arr.length; i++){area.splice(arr[i], 1)area.unshift(new Array(ROW).fill(0))}//更新得分SCORE+=Math.pow(2, arr.length)scoreEle.innerHTML = SCORE;};
}
//碰撞检测
//垂直方向的碰撞检测, 需要接受当前方块做为参数，
//作用：检测方块下落一格之后和场景的碰撞情况，如果会碰撞返回true，否则返回false;
function collide(cur){var box = cur.box;var len = box.length;var x = box.x;//因为是检测下一个位置，所以要+1；var y = box.y + 1;for(var i=0; i<len; i++){//做碰撞检测同样需要将场景外的方块部分排除掉if(i+y>=0){//方块的数组都是n*n的所以都用lenfor(var j=0; j<len; j++){//将方块为0的项不检测if(box[i][j] !== 0){//第一种碰撞情况：当i+y大于等于场景的高度时，说明方块出界//第二种碰撞情况：方块没有出界，但是场景中的这个位置，被占用了if(i+y>=area.length || (i+y<area.length && area[i+y][j+x] !== 0)){//碰撞了返回 truereturn true;}}}}}//代码执行到这里时说明没有碰撞，返回false;return false;
}
//水平方向的移动限制
//当用键盘控制方块左右移动的时候，需要检测左右是否是墙，或者方块，这里检测的也是下一个位置的碰撞情况
//如果没有墙或者方块(不碰撞)，返回true
//如果碰撞， 返回 false;
//接受参数： 当前方块:cur， 移动方向: dir -1|0|1
function bMove(cur, dir){//当前位置加上方向 就是 下一个位置var x = cur.x+dir;for(var i=0; i<cur.box.length; i++){for(var j=0; j<cur.box[i].length; j++){if(cur[i][j] !== 0){//这里发生碰撞的情况有3中//1.方块在左边出界了， 这时 j+x<0//2.方块在右边出界了， j+x>= ROW//3.方块没有出界，但是场景中的这个位置被占用 area[i+cur.y][j+x]!==0// 加上 i+cur.y>=0 && j+x>=0 && area[i+cur.y] 是为了防止报错if(j+x<0 || j+x==ROW || ( i+cur.y>=0 && j+x>=0 && area[i+cur.y] && area[i+cur.y][j+x]!==0)){return false;}}}}return true;
}

如何处理方块旋转？

方块的旋转比较容易处理，就把二维数组旋转一下就可以了。但是要注意方块旋转的时候也是需要检测旋转的合理性，可以想象一下，一个长条下落的过程中，如果他的左右两边都是方块，这种情况肯定是不能旋转的（其它方块同理）。还有一种情况就是，方块靠墙下落的时候，旋转一下之后，有一部分转到墙里面去了，这种也是不合理的，但是玩游戏的时候，这种情况也能旋转，所以出现这种情况的时候，我们需要修正一下方块的位置。下面看代码怎么写

//此函数用于检测方块是否能够旋转
/*
参数： 当前方块 cur
返回值： true        //方块可以直接旋转false        //方块不能旋转，即使是在尝试修正位置之后，就是上面说到的左右都是方块的情况cur.x        //当返回 一个数值的时候，说明 将方块水平移动到这个位置后，可以旋转， 即上面说的修正位置
*/
function bRotate(cur){//在这里复制一个旋转后的方块出来，用于检测var _cur = {x: cur.x, y:cur.y, box: rotateBox(cur.box)};//检测方块旋转之后，水平和垂直方向的碰撞情况， 如果在任意方向会发生碰撞if( collide(_cur) === true || bMove(_cur, 0) === false ){//尝试水平移动方块，移动方向是分别向左，向右移动2格for(var i=0; i<2; i++){//方块靠近左边的时候，尝试向右移动，并且检测移动的合理性if(_cur.x<4 && bMove(_cur, 1)){_cur.x++;}//靠近右侧的时候，向左移动，并且检测移动的合理性if(_cur.x>6 && bMove(_cur, -1)){_cur.x--;}//移动之后再检测是否碰撞, 如果不会发生碰撞， 返回移动后的位置if(collide(_cur) === false && bMove(_cur, 0)){return _cur.x;}}//代码执行到这里的时候说明，移动了之后仍会碰撞return false;//如果旋转之后不会发生碰撞，直接返回true;}else{return true;}
}
//旋转数组的函数
function rotateBox(arr){var res = [];for(var i=0; i<arr.length; i++){res.push([]);}//旋转for(var i=0; i<arr.length; i++){for(var j=0; j<arr[i].length; j++){res[arr.length-1-y][x] = arr[x][y];}}return res;
}

现在开始处理游戏的刷新，计算游戏的时间

游戏用 requestAnimationFrame 更新

var timer = null;
//记录一个旧的时间，这里用于辅助计算, 每次刷新的间隔时间
var oldTime = Date.now();
//n 用于累加 raf 的间隔时间
var n = 0;
//游戏运行时间 单位 毫秒
var gameTime = 0;
//方块下落的间隔时间
var step = 1000;
//游戏是否暂停
var bPause = false;
//获取dom元素
//主场景canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//提示下一个方块 canvas
var nextCanvas = document.getElementById('next');
var nextctx = nextCanvas.getContext('2d');
//游戏得分
var scoreEle = document.getElementById('score');
//暂停按钮
var pauseEle = document.getElementById('pause');
//重新开始按钮
var restartEle = document.getElementById('restart')
//显示游戏时间
var gameTimeEle = document.getElementById('game-time');
//开启主循环
timer = requestAnimationFrame(animate);
//主循环函数
function animate(){//累加 raf 的间隔时间n+=Date.now()-oldTime;//累加游戏运行时间gameTime+=Date.now()-oldTime;oldTime = Date.now();//方块要开始下落了if(n>=step){n = 0;//每秒钟更新一次游戏时间updateGameTime()//根据游戏进行时间提高游戏难度changeDifficulty();//方块下落之前要先检测是否会发生碰撞//会发生碰撞if(collide(cur)){//会碰撞，并且此时，如果方块有一部分在外面，说明游戏结束if(cur.y<0){gameover()//正常的碰撞}else{//将方块合并入游戏场景mergeBoxArea()//并将cur 设置为nullcur = null;//产生一个新的方块createBox()}//不会碰撞}else{cur.y++;}}//更新游戏场景drawArea();//画提示方块drawNextBox();    timer = requestAnimationFrame(animate);
}
//更新游戏场景
function drawArea(){ctx.clearRect(0, 0, 300, 540)ctx.save()ctx.scale(30, 30)//ctx.fillStyle = '#fff';//画游戏场景drawcube(ctx, area)    //画当前方块drawcube(ctx, cur.box, cur.x, cur.y)                ctx.restore();
} 
//更新提示
function drawNextBox(){nextctx.clearRect(0, 0, 120, 120)nextctx.save()nextctx.scale(30, 30)//画下一个方块next&&drawcube(nextctx, next.box)    nextctx.restore();        
}
//画方块，接受一个ctx对象，一个数组， 数组的偏移值
function drawcube(ctx, arr, x, y){x = x || 0;y = y || 0;for(var i=0; i<arr.length; i++){for(var j=0; j<arr[i].length; j++){if(arr[i][j] !== 0){//设置方块的颜色ctx.fillStyle = aColor[arr[i][j]];ctx.fillRect(j+x, i+y, 1, 1)}}}    
}

监听键盘事件，移动方块

//监听键盘事件
document.addEventListener('keydown', function(ev){if(bPause || !cur){return false;}var keycode = ev.keyCode;switch(keycode){//左case 37://是否能向左移动if(bMove(cur, -1)){cur.x--;}break;//右case 39://是否能向右移动if(bMove(cur, 1)){cur.x++;}break;//下case 40://如果触底或者落到其它方块上面if(collide(cur)){if(cur.y<0){gameover()}else{mergeBoxArea()cur = null;createBox()}}else{cur.y++;}break;//上case 38://是否能旋转 当n为true时可以直接旋转，当n为数值时需要将方块x位置移动到此处才能旋转var rotateRes = bRotate(cur);//可以直接旋转if(rotateRes === true){cur.box = rotateBox(cur.box);//不能旋转}else if(rotateRes === false){console.log('不能旋转')//需要移动之后才能旋转}else{cur.x = rotateRes;cur.box = rotateBox(cur.box);}break;}
})

处理游戏结束，游戏暂停，游戏重新开始，消行，更新游戏得分，更新游戏运行时间等等

//点击暂停按钮
pauseEle.addEventListener('click', function(){var html = this.innerHTML;if(html === '暂停'){pause();this.innerHTML = '继续';}else{start();this.innerHTML = '暂停';}
})
//点击重新开始
restartEle.addEventListener('click', function(){restart();
})
//暂停游戏
function pause(){cancelAnimationFrame(timer);bPause = true;
}
//继续
function start(){timer = requestAnimationFrame(animate);bPause = false;
}
//重新开始
function restart(){//重置场景for(var i=0; i<area.length; i++){for(var j=0; j<area[i].length; j++){area[i][j] = 0;}}cancelAnimationFrame(timer);timer = requestAnimationFrame(animate);bPause = false;pauseEle.innerHTML = '暂停';//重置游戏时间gameTime = 0;//更新游戏时间updateGameTime();cur = null;//创建第一个方块createBox();
}
//游戏结束
function gameover(){    cancelAnimationFrame(timer);alert('游戏结束， 您一共获得:'+SCORE+"分")restart()
}
//检测是否可以消行，并将可以消除得行 加入结果数组返回出去
function isRemove(area){var arr = [];for(var i=0; i<area.length; i++){var remove = true;//如果数组的一行的每一项都不为0说明可以消除for(var j=0; j<area[i].length; j++){if(area[i][j] == 0){remove = false;}}//储存消除行的索引if(remove){arr.push(i)}}return arr;
}
//更新游戏运行时间
function updateGameTime(){var n = gameTime/1000;var h = Math.floor(n/(60*60));n%=60*60;var m = Math.floor(n/60);n%=60;var s = Math.floor(n);h = h<9?'0'+h:''+h;m = m<9?'0'+m:''+m;s = s<9?'0'+s:''+s;gameTimeEle.innerHTML = h+':'+m+':'+s;
}
//根据游戏时间修改难度（方块下落间隔时间）
function changeDifficulty(){//游戏进行5分钟 方块下落间隔为300msif(gameTime>=1000*60*5){step = 300;//游戏运行3分钟 方块下落间隔500ms}else if(gameTime>=1000*60*3){step = 500;//游戏运行2分钟 方块下落间隔700ms}else if(gameTime>=1000*60*2){step = 700;}
}