canvas实现俄罗斯方块的方法示例


Posted in HTML / CSS onDecember 13, 2018

好久没使用canvas了,于是通过写小游戏“俄罗斯方块”再次熟悉下canvas,如果有一定的canvas基础,要实现还是不难的。

原理详解

看游戏最终界面,可知需要实现以下关键功能:

  • 游戏面板,也就是12 * 20的方格,以及是否填充了方块信息;
  • 运动方块,方块需要实现移动,变形的功能。
     

 canvas实现俄罗斯方块的方法示例

界面的实现

整个面板就是以左上角(0,0)为原点的坐标系,右上角(12,0)左下角(0,20)右下角(12,20),每个点的坐标位置都可以确定。是否已经填充方块,我们可以将每个方格看成一个数组元素,0表示没有,1表示已经填充。12 * 20 的面板使用两层数组,即用20个长度为12的数组实现。

var maps = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,1,0], ...];

画出面板的代码,用最基础的canvas的api就能实现

//格子
    for(var i=0;i<12;i++){
        for(var j=0;j<20;j++){
            ctx.fillRect(i*40,j*40,40,40);
            ctx.strokeRect(i*40,j*40,40,40);
            if(this.maps[j][i]==1){//方格已经有填充内容
                ctx.save();
                ctx.lineWidth=4;
                ctx.fillStyle='hsla(200,100%,50%,.5)';
                ctx.strokeStyle='hsla(200,100%,50%,.9)';
                ctx.fillRect(i*40,j*40,40,40);
                ctx.strokeRect(i*40+2,j*40+2,38,38);
                ctx.restore();
            }
        }
    }

    //边框
    ctx.lineWidth=4;
    ctx.strokeStyle='hsla(0,100%,0%,.3)';
    ctx.moveTo(0,0);
    ctx.lineTo(0,20*40);
    ctx.lineTo(12*40,20*40);
    ctx.lineTo(12*40,0);
    ctx.stroke();
    ctx.restore();

方块的实现

游戏中用到以下 7 种图形

canvas实现俄罗斯方块的方法示例

结合上面介绍的坐标系,数组 [x1, y1, x2, y2, x3, y3, x4, y4] 就是上面图形中4个点坐标的数据表现形式,7 种图形的坐标分别如下:

var Arr = [[4,0,4,1,5,1,6,1],[4,1,5,1,6,1,6,0],[4,0,5,0,5,1,6,1],[4,1,5,0,5,1,6,0],
[5,0,4,1,5,1,6,1],[4,0,5,0,6,0,7,0],[5,0,6,0,5,1,6,1]];

方块的移动,遍历整个数组,加上位移向量就行,非常简单

class Shape {
    constructor(m){
        this.m = Object.assign([],m);
    }
    move(x,y){ // 位移
        var m = this.m,
            l = m.length;
        y = y||0;

        for (var i=0;i<l;i=i+2){
            m[i]+=x;
            m[i+1]+=y;
        }
        return this;
    }

方块的旋转,俄罗斯方块里面方块除了左右和上下运动,还会旋转,不是吗?稍微思考下就知道,这不过就是矩阵变换而已,也就是每次图形绕中心点旋转90度。我这里用数组第三个点作为图形变换的中心点,当然这样处理不够完善。

class Shape {
    transform(){//二维矩阵变换
        var m =this.m,
            l = m.length,
            c = Math.ceil(l/2),
            x = m[c],
            y = m[c+1],
            cos = Math.cos(Math.PI/180 * 90),
            sin = Math.sin(Math.PI/180 * 90);

        for (var i=0;i<l;i=i+2){
            if(i == c) continue;
            var mx = m[i]- x,
                my = m[i+1] - y,
                nx = mx*cos - my*sin,
                ny = my*cos + mx*sin;
            m[i]=x+nx;
            m[i+1]=y+ny;
        }
        return this;    
    }

边界条件

主要包括如下三个方面

  • 方块位置不能超出界面的判断;
  • 方块到达底部或放置完成的判断;
  • 游戏结束的判断。

遍历数组 (1)任意一个点y坐标为19时表示到达了底部;(2)获取该坐标的y+1位置在maps的信息,如果为1表示已经填充。这两种情况下,运动方块的周期结束,将该方块的坐标填充到maps对应的数组里面即可。

如果坐标的y+1已经有填充,同时当前坐标小于1,即已经在界面的顶部了,那么表示游戏结束。

var isEnd = false,isOver=false,x,y;
for(var i=0,sl=that.shape.m.length;i<sl;i=i+2){
    x=that.shape.m[i];
    y=that.shape.m[i+1];
    if(y >= 19){ // 到了底部
        isEnd = true;break;
    }
    if(that.maps[y+1][x]==1){ // y+1位置已经填充
        isEnd = true;
        if(y <= 1){isOver=true;} // 游戏结束
        break;
    }
}

方块运动周期结束时检测每一层是否满格,以及满格后的处理。某项数组全部元素都为1则表示已经满格,那么删除该项数组,同时列表头再压入一项每个元素都为0的数组即可。

checkPoint(){
    var that = this,
        maps = that.maps;

    for(var i=0,l=maps.length;i<l;i++){
        if(Math.min.apply(null,maps[i]) == 1){// 表示该层已经满格
            that.maps.splice(i,1);
            that.score+=10; // 增加分数
            that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]);
        }
    }
    return this;
}

绑定事件

主要就是绑定keydown事件,要注意的是左移和右移事件包括了边界判断

bindEvent(){
    var that = this;
    document.addEventListener('keydown',function(e){
        switch(e.keyCode){
            case 13:        //enter
                cancelAnimationFrame(that.timer);
                that.init().update();
            break;
            case 80:        //p
                that.pause = !that.pause;
                break;  
            case 40:        //down
                that.d = 0.5;
                break;
            case 37:        //left
                var over = false,
                    maps = that.maps,
                    shape = that.shape,
                    m = shape.m;
                for(var i=0,l=m.length;i<l;i=i+2){
                    if(m[i]<=0 || maps[m[i+1]][m[i]-1] == 1){
                        over = true;break;
                    }
                }
                if(!over) shape.move(-1,0);
                break;
            case 39:        //right
                var over = false,
                    shape = that.shape,
                    maps = that.maps,
                    m = shape.m;
                for(var i=0,l=m.length;i<l;i=i+2){
                    if(m[i]>=11 || maps[m[i+1]][m[i]+1] == 1){
                        over = true;break;
                    }
                }
                if(!over) shape.move(1,0);
                break;
            case 32:        //space
                that.shape.transform();
                break;
        }
    },false);
}

总结

这里面实现了俄罗斯方块的最基本功能,还有关卡等功能点并没有实现,同时该demo仍然有不完善的地方需要修正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 #HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 #HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 #HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 #HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 #HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 #HTML / CSS
HTML5文档结构标签
Apr 21 #HTML / CSS
You might like
PHP 柱状图实现代码
2009/12/04 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Python操作Word批量生成文章的方法
2015/07/28 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python字典排序的方法
2019/10/12 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
大学生求职自荐信
2013/12/12 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
自我反省检讨书
2014/01/23 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
员工年终考核评语
2014/12/31 职场文书
政协委员个人总结
2015/03/03 职场文书
开业典礼致辞
2015/07/29 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL