欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 21:48:22
写在前面得话: 这篇文章主要记录了我是怎么一步一步写出俄罗斯方块,整个代码用的函数编程,主要是为了让一些不熟悉es6, 面向对象写法得 新手能更容易看明白,全部得代码中都是一些js的基础知识,很容易理解。要说有点麻烦的,那就是游戏过程中的各种检测。但是只要你多思考,你就能理解代码为什么要那样写,你也 ......

写在前面得话:

这篇文章主要记录了我是怎么一步一步写出俄罗斯方块,整个代码用的函数编程,主要是为了让一些不熟悉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资源分享|知识分享,做初级程序员的指明灯
【javascript小案例】从0开始实现一个俄罗斯方块