【javascript小案例】从0开始实现一个俄罗斯方块

写在前面得话：

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

预览地址：http://blog.cwlserver.top/demo/Tetris.html 

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的所以都用len for(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)){ //碰撞了返回 true return 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 设置为null cur = 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分钟 方块下落间隔为300ms if(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; } } 

到这里整个游戏差不多就算完了，最终的预览demo和现在的代码并某些细节不是完全一样。

作者简介：陈蔚磊（高级前端工程师）,公众号“铅笔学园”前端内容合作作者之一，目前在一培训机构任职前端工程师，掌握最前沿的前端技术。

铅笔学园：IT资源分享|知识分享，做初级程序员的指明灯