canvas标签应用 简单俄罗斯方块游戏的实现

最新推荐文章于 2023-12-28 10:00:00 发布
原创 最新推荐文章于 2023-12-28 10:00:00 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#游戏 #function #图形

本文介绍了一个简单的俄罗斯方块游戏实现方案，使用HTML5 Canvas绘制界面，并通过JavaScript进行逻辑处理。游戏中包括不同形状的方块下落、左右移动、旋转及消除行等功能。 
<!DOCTYPE HTML>
<body>
    <canvas id="Tetris_canvas" width="100px" height="150px" />
    <script type="text/javascript">
        function BackGround()
        {
            var init = function()
            {
                var obj = document.getElementById("Tetris_canvas");
                var cxt = obj.getContext("2d");
                cxt.fillStyle = "#E8FFFF";
                cxt.strokeStyle = "#000000";
                cxt.fillRect(0,0,obj.width,obj.height);
                cxt.strokeRect(0,0,obj.width,obj.height);
            }
            init();
        }
        function Tetris()
        {
            var self = this;
            var g_arCurPoint = new Array();
            var g_arGame = [
           /********0,1,2,3,4,5,6,7,8,9 */
           /*00*/   0,0,0,0,0,0,0,0,0,0, 
           /*01*/   0,0,0,0,0,0,0,0,0,0,
           /*02*/   0,0,0,0,0,0,0,0,0,0,
           /*03*/   0,0,0,0,0,0,0,0,0,0,
           /*04*/   0,0,0,0,0,0,0,0,0,0,
           /*05*/   0,0,0,0,0,0,0,0,0,0,
           /*06*/   0,0,0,0,0,0,0,0,0,0,
           /*07*/   0,0,0,0,0,0,0,0,0,0,
           /*08*/   0,0,0,0,0,0,0,0,0,0,
           /*09*/   0,0,0,0,0,0,0,0,0,0,
           /*10*/   0,0,0,0,0,0,0,0,0,0,
           /*11*/   0,0,0,0,0,0,0,0,0,0,
           /*12*/   0,0,0,0,0,0,0,0,0,0,
           /*13*/   0,0,0,0,0,0,0,0,0,0,
           /*14*/   0,0,0,0,0,0,0,0,0,0
            ];
            this.curGraph;
            this.makeGarph = function(){
                var n = parseInt(Math.random()*6);
                self.curGraph = n;
                var flag = 0;
                switch(n){
                case 0:{//横条 4格
                    //记录图形所占区域位置
                    if(g_arGame[3]==1 || g_arGame[4]==1 || g_arGame[5]==1 || g_arGame[6]==1 )flag=1;
                    g_arCurPoint[0] = 3;
                    g_arCurPoint[1] = 4;
                    g_arCurPoint[2] = 5;
                    g_arCurPoint[3] = 6;
                };break;
                case 1:{//一点 1格
                    if(g_arGame[5]==1)flag=1;
                    g_arCurPoint[1] = 5;
                    g_arCurPoint[0] = -1;
                    g_arCurPoint[2] = -1;
                    g_arCurPoint[3] = -1;

                };break;
                case 2:{//1+3组合(轴对称)  4格
                    if(g_arGame[5]==1 || g_arGame[14]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
                    g_arCurPoint[0] = 5;
                    g_arCurPoint[1] = 15;
                    g_arCurPoint[2] = 14;
                    g_arCurPoint[3] = 16;
                };break;
                case 3:{//1+3组合(非对称) 4格
                    if(g_arGame[4]==1 || g_arGame[14]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
                    g_arCurPoint[0] = 4;
                    g_arCurPoint[1] = 14;
                    g_arCurPoint[2] = 15;
                    g_arCurPoint[3] = 16;
                };break;
                case 4:{//1+3 (点对称)    4格
                    if(g_arGame[4]==1 || g_arGame[5]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
                    g_arCurPoint[0] = 4;
                    g_arCurPoint[1] = 5;
                    g_arCurPoint[2] = 15;
                    g_arCurPoint[3] = 16;
                };break;
                case 5:{//2+2 (点对称)    4格
                    if(g_arGame[5]==1 || g_arGame[6]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
                    g_arCurPoint[0] = 5;
                    g_arCurPoint[1] = 6;
                    g_arCurPoint[2] = 15;
                    g_arCurPoint[3] = 16;
                };break;
                }
                if(flag == 1){
                    alert("游戏结束");
                    window.clearInterval(self.id);
                }
            }
            this.moveLeft = function(){
                var minLeft = 9;
                for(var i=0;i<g_arCurPoint.length;i++){
                    var temp = parseInt(g_arCurPoint[i]%10);
                    if(temp < minLeft)minLeft = temp;
                }
                if(minLeft == 0)return;
                for(var i=0;i<4;i++){
                    if(g_arCurPoint[i] != -1)g_arCurPoint[i] = g_arCurPoint[i]-1;
                }
            }
            this.moveRight = function(){
                var maxRight = 0;
                for(var i=0;i<4;i++){
                    if(g_arCurPoint[i] != -1){
                        var temp = parseInt(g_arCurPoint[i]%10);
                        if(temp > maxRight)maxRight = temp;
                    }
                }
                if(maxRight == 9)return;
                for(var i=0;i<4;i++){
                    if(g_arCurPoint[i] != -1)g_arCurPoint[i]++;
                }
            }
            this.cnt = 1;
            this.moveDown = function(){
                //alert(self.cnt++);
                var flag = 0;
                for(var i=0;i<4;i++){
                    if(g_arCurPoint[i] != -1){
                        var nx = parseInt(g_arCurPoint[i]%10);
                        var ny = parseInt(g_arCurPoint[i]/10);
                        if(g_arGame[(ny+1)*10+nx] == 1 || ny == 14){
                            flag = 1;
                            break;
                        }
                        
                    }
                }
                if(flag == 0){//向下移动
                    for(var i=0;i<4;i++){
                        if(g_arCurPoint[i] != -1){
                            var nx = parseInt(g_arCurPoint[i]%10);
                            var ny = parseInt(g_arCurPoint[i]/10);
                            g_arCurPoint[i] = (ny+1)*10+nx;
                        }
                    }
                }else{//停止移动了
                    for(var i=0;i<4;i++){
                        if(g_arCurPoint[i] != -1){
                            g_arGame[g_arCurPoint[i]] = 1;
                        }
                    }
                    //消除已经完成的行
                    self.clear();
                    //新物体出现
                    self.makeGarph();
                }
                //绘制图形
                var obj=document.getElementById("Tetris_canvas");
                var cxt = obj.getContext("2d");
                
                for(var i=0;i<g_arGame.length;i++){
                    var x = parseInt(i%10);
                    var y = parseInt(i/10);
                    if(g_arGame[i] == 1){
                        cxt.fillStyle = "#00FF00";
                        cxt.strokeStyle = "#000000";
                    }else{
                        cxt.fillStyle = "#E8FFFF";
                        cxt.strokeStyle = "#E8FFFF";
                    }
                    cxt.fillRect(x*10,y*10,10,10);
                    cxt.strokeRect(x*10,y*10,10,10);
                    
                    cxt.strokeStyle = "#000000";
                    cxt.strokeRect(0,0,obj.width,obj.height); 
                   
                }
                for(var i=0;i<4;i++){
                    if(g_arCurPoint[i] != -1){
                        var nx = parseInt(g_arCurPoint[i]%10);
                        var ny = parseInt(g_arCurPoint[i]/10);
                        cxt.fillStyle = "#FF0000";
                        cxt.strokeStyle = "#000000";
                        cxt.fillRect(nx*10,ny*10,10,10);
                        cxt.strokeRect(nx*10,ny*10,10,10);
                    }    
                }
                window.onkeydown = function(event){
                    var code = event.keyCode;
                    switch(code){
                    case 37:self.moveLeft();break;
                    case 39:self.moveRight();break;
                    case 40:self.moveDown();break;
                    case 38:self.turn();break;
                    }
                }
            }
            this.clear = function(){
                for(var i=15;i>=1;){
                    var count = 0;
                    for(var j=0;j<10;j++){
                        if(g_arGame[i*10+j] == 1)count++;
                    }
                    if(count == 10){
                        for(var k=i;k>=1;k--){
                            for(var s=0;s<10;s++){
                                g_arGame[k*10+s] = g_arGame[(k-1)*10+s];
                            }
                        }
                    }else{
                        i--;
                    }
                }
            }
            this.turn = function(){
                var maxRight = 0;
                var minLeft = 9;
                for(var i=0;i<4;i++){
                    if(g_arCurPoint[i] != -1){
                        var temp = parseInt(g_arCurPoint[i]%10);
                        if(temp > maxRight)maxRight = temp;
                    }
                }
                for(var i=0;i<g_arCurPoint.length;i++){
                    var temp = parseInt(g_arCurPoint[i]%10);
                    if(temp < minLeft)minLeft = temp;
                }
                if(maxRight == 9 || minLeft == 0)return;
                switch(self.curGraph){
                case 0:{//横条
                    var bY = false;
                    var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
                    var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
                    if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10)bY = true;
                    if(bY){//竖向
                        if(nx < 2 || ny < 1) return;
                        for(var i=0;i<4;i++){
                            if(g_arCurPoint[i] != -1)
                                g_arGame[g_arCurPoint[i]] = 0;
                        }
                        g_arCurPoint[0] = ny*10 + nx-1;
                        g_arCurPoint[1] = ny*10 + nx;
                        g_arCurPoint[2] = ny*10 + nx+1;
                        g_arCurPoint[3] = ny*10 + nx+2;
                                                
                        g_arGame[ny*10 + nx-1] = 2;
                        g_arGame[ny*10 + nx]   = 2;
                        g_arGame[ny*10 + nx+1] = 2;
                        g_arGame[ny*10 + nx+2] = 2;
                    }else{//横向
                        for(var i=-1;i<=2;i++){
                            for(var j=-1;j<=2;j++){
                                if(g_arGame[(ny+i)*10+nx+j] == 1)return;
                            }
                        }
                        g_arCurPoint[0] = (ny-1)*10 + nx;
                        g_arCurPoint[1] = ny*10 + nx;
                        g_arCurPoint[2] = (ny+1)*10 + nx;
                        g_arCurPoint[3] = (ny+2)*10 + nx;
                                                
                    }
                     
                };break;
                case 2:{//1+3 轴对称
                    var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
                    var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
                    for(var i=-1;i<2;i++){
                        for(var j=-1;j<2;j++){
                            if(g_arGame[(ny+j)*10+(nx+i)]==1)return;
                        }
                    }
                    var x,y;
                    if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10){
                        x = nx;
                        if(g_arCurPoint[0]/10 > g_arCurPoint[1]/10)y=ny-1;
                        else y=ny+1;
                    }else{
                        y = ny;
                        if(g_arCurPoint[0]%10 > g_arCurPoint[1]%10)x=nx-1;
                        else x=nx+1;
                    }
                    
                    var temp = g_arCurPoint[0];
                    g_arCurPoint[0] = g_arCurPoint[3];
                    g_arCurPoint[1] = g_arCurPoint[1];
                    g_arCurPoint[2] = temp;
                    g_arCurPoint[3] = y*10+x;
                    
                };break;
                case 3:{//1+3 
                    var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
                    var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
                    for(var i=-2;i<=2;i++){
                        for(var j=-2;j<=2;j++){
                            if(g_arGame[(ny+j)*10+(nx+i)]==1)return;
                        }
                    }
                    var x,y,x1,y1;
                    if(g_arCurPoint[1]%10 == g_arCurPoint[0]%10){
                        x = nx;
                        x1 = nx;
                        if(g_arCurPoint[1]/10 > g_arCurPoint[0]/10){
                            y=ny+1;
                            y1 = ny+2;
                        }else{
                            y = ny-1;
                            y1 = ny-2;
                        }
                    }else{
                        y = ny;
                        y1 = ny;
                        if(g_arCurPoint[1]%10 > g_arCurPoint[0]%10){
                            x=nx+1;
                            x1 = nx+2;
                        }else{
                            x=nx-1;
                            x1 = nx-2;
                        }
                    }
                    g_arCurPoint[0] = g_arCurPoint[2];
                    g_arCurPoint[1] = g_arCurPoint[1];
                    g_arCurPoint[2] = (y*10+x);
                    g_arCurPoint[3] = (y1*10+x1);
                    
                };break;
                case 4:{
                    if(minLeft == 1)return;
                    var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
                    var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
                    for(var i=-1;i<2;i++){
                        for(var j=-1;j<2;j++){
                            if(g_arGame[(ny+j)*10+(nx+i)]==1)return;
                        }
                    }
                    var x1,y1,x2,y2,x3,y3;
                    if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10){
                        if(g_arCurPoint[1]/10 > g_arCurPoint[0]/10){
                            x1 = nx+1;
                            y1 = ny;
                            x2 = nx-1;
                            y2 = ny-1;
                            
                        }else{
                            x1 = nx-1;
                            y1 = ny;
                            x2 = nx+1;
                            y2 = ny+1;
                            
                        }
                        
                    }else{
                        if(g_arCurPoint[1]%10 > g_arCurPoint[0]%10){
                            x1 = nx;
                            x2 = nx-1;
                            y1 = ny-1;
                            y2 = ny+1;
                        }else{
                            x1 = nx;
                            x2 = nx+1;
                            y1 = ny+1;
                            y2 = ny-1;
                        }
                    }  
                    g_arCurPoint[2] = g_arCurPoint[0]
                    g_arCurPoint[0] = (y1*10+x1);
                    g_arCurPoint[1] = g_arCurPoint[1];
                    g_arCurPoint[3] = (y2*10+x2);
                };break;
                }
            }
            self.makeGarph();
            this.id = setInterval(self.moveDown,500);
        }
        var bk = new BackGround();
        var TetRis = new Tetris();
        //setInterval(TetRis.moveDown(),500);
    </script>
</body>

如何用canvas实现俄罗斯方块
weixin_51364599的博客
10-08 1万+
我的游戏系列 技术比较菜，用了要600多行代码完成，内容涉及完完全全只有canvas <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
js canvas写的游戏 俄罗斯方块
09-19
用js写的网页版的 俄罗斯方块 小游戏。使用canvas画布技术，可实现传统俄罗斯昂快基本的功能，变形，加速等。
H5 canvas实现经典俄罗斯方块小游戏
08-23
基于h5 canvas的俄罗斯方块小游戏，500行代码（原创无注释，不懂可联系qq742025211）。可以预览下一个图形，消行可得分，有历史最高分记录（清除浏览器缓存历史最高分会清0）。操作方式：↑ 变形 ，↓ 加速 ，← →移动。望对大家有帮助。
canvas版《俄罗斯方块》
andrew1989121的博客
08-31 226
试玩（没有考虑兼容低版本浏览器）： See the Pen Canvas俄罗斯方块 by 王美建 (@wangmeijian) on CodePen. ********************************************************************** 9月3日更新： 修复了隐藏的比较深的BUG 加上暂停、再来一次功能 速度随分数增...
canvas实现俄罗斯方块
weixin_30767835的博客
12-13 195
原文地址：canvas实现俄罗斯方块 好久没使用canvas了，于是通过写小游戏“俄罗斯方块”再次熟悉下canvas，如果有一定的canvas基础，要实现还是不难的。实际完成的Demo请看：canvas俄罗斯方块。 原理详解 看游戏最终界面，可知需要实现以下关键功能： 游戏面板，也就是12 * 20的方格，以及是否填充了方块信息； 运动方块，方块需要实现移动，变形的功能。 界面的实现 整个...
HTML5 Canvas实现简易版俄罗斯方块游戏
在这个俄罗斯方块项目中，<canvas>被用于实现游戏的画面显示。 3. JavaScript和定时器（timer）：JavaScript是一种在浏览器端广泛使用的脚本语言，它是实现HTML5应用动态行为的关键。在这个项目中，JavaScript被...
基于Java ME无线网络移动端的俄罗斯方块游戏的实现(文档,源代码).zip
01-27
在本项目中，我们探讨了如何使用Java ME（Micro Edition）技术实现在无线网络移动端运行的俄罗斯方块游戏。Java ME是一种轻量级的Java平台，特别适合开发移动设备和嵌入式系统的应用程序。这个项目提供了详细的文档...
基于HTML5 Canvas的彩色俄罗斯方块游戏实现
该项目以 HTML5 的 `<canvas>` 元素为核心渲染平台，结合 JavaScript 面向对象编程（OOP）范式，实现了一个视觉效果丰富、交互流畅的经典俄罗斯方块游戏。通过分析标题、描述和标签内容可以深入挖掘其背后的技术架构...
基于Canvas的JavaScript俄罗斯方块游戏实现
综上所述，Jsetris 不仅是一个简单的俄罗斯方块模仿作品，更是一个集成了 Canvas 图形绘制、JavaScript 游戏逻辑实现、前端工程实践于一体的综合性教学案例。它帮助开发者深入理解 Web 平台的游戏开发流程，掌握从零...
原生canvas实现俄罗斯方块
qq_33297737的博客
10-08 733
原生canvas实现俄罗斯方块，还没有实现旋转变换
Html5原创俄罗斯方块（基于canvas）
12-12
第一次写俄罗斯方块的时候已经是1年多前了，也是我刚刚学js不久。 为了加强对js的理解又加上对游戏的爱好，于是在没有参考他人的思路和代码下，自己用最基本的js代码写出了基于canvas的俄罗斯方块。 在大三的暑假，我又用了es6的语法进行了改进，包含了class的语法糖、箭头函数等，进一步增加自己对es6的理解，代码有400+行 想要做这个小游戏，必须先熟悉H5的canvas，js对数组的处理，键盘事件监听和处理，定时器的使用等，其他的就是基本的逻辑处理了。 游戏的规则就是核心，也是我们代码的重中之重 这里的逻辑核心是需要判断方块是否碰撞（当前运动的方块和已经定位好的方块有碰撞以致于当前的运
canvas实现俄罗斯方块的方法示例
09-22
主要介绍了canvas实现俄罗斯方块的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
08-06
NULL 博文链接：https://128kj.iteye.com/blog/2088202
js canvas实现俄罗斯方块
01-18
本文实例为大家分享了canvas实现俄罗斯方块的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document</title> </head> <body style=margin: 0;>
JS+Canvas实现的俄罗斯方块游戏完整实例
10-20
主要介绍了JS+Canvas实现的俄罗斯方块游戏,结合完整实例形式分析了Canvas技术实现俄罗斯方块游戏的步骤、技术难点与相关实现技巧,需要的朋友可以参考下
JavaScript Canvas 俄罗斯方块
allway2的博客
07-05 717
Javascript 俄罗斯方块 2011 年 10 月 10 日，星期一 我之前的游戏，蛇，需要一段时间才能发货。了解完成游戏意味着什么是一次很好的体验，但实际上，这些只是我玩一些基本游戏机制和学习一点游戏编程的副项目。如果我在每个小项目上都花那么多时间，到 2035 年我仍然会这样做…… ……考虑到这一点，我需要确保我的下一场比赛是一个短暂的、单一的周末项目，所以我选择了一个简单的项目，而且我没有花任何时间来完善它，超出了……的主要游戏机制。 俄罗斯方块 现..
基于canvas的俄罗斯方块（400行纯js）
magic_xiang的博客
03-14 1295
这个俄罗斯方块是我自己个人原创的，也没有参照过别人的思路，所以会存在一定的瑕疵，而且当时写这个小游戏的时候我的技术水平还很低，写这个游戏只是为了练练手，所以这个游戏可以给刚入门的同行进行学习参考，代码可参考 点击打开链接要想做这个小游戏，必须先熟悉H5的canvas，js对数组的处理，this指针的熟悉，以及function的应用等，其他的就是基本的逻辑处理了。创作思路：    ①用canvas中...
canvas+js从0开始撸一个俄罗斯方块
最新发布
Web面试那些事儿的博客
12-28 1262
本篇文章将分为几个模块逐步讲解:游戏玩法介绍算法思想创建游戏地图方块的创建生成不同形状方块方块下落方块碰撞方块左右移动方块变形方块向下加速消除整行游戏结束游戏虽小，功能还挺复杂，需要的就是思维和耐心。下面直接进入正题。俄罗斯方块想必大家都玩过，大体玩法简单说一下，在一个格子地图上随机下落不同形状的方块，通过←→方向键去控制方块的移动，以及↑键改变方块的形状，↓键加速其下落，当方块落下后满一行时消除该行。
canvas——俄罗斯方块小游戏
weixin_39150852的博客
12-28 237
链接：https://pan.baidu.com/s/1EMYeQEgYuwhUaQ1bWlw9Aw 提取码：ez6e
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值