js 俄罗斯方块

最新推荐文章于 2021-06-02 19:40:52 发布
最新推荐文章于 2021-06-02 19:40:52 发布
阅读量909 收藏
点赞数
分类专栏： html javascript 文章标签： function table border float 游戏 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanpengs/article/details/7589097
版权 
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title></title>  
    <style>  
    #table {float:left}  
    #table tr{height:20px;}  
    #table tr td{width:20px;}  
    #yl {float:left;margin-left:10px;}  
    #yl tr{height:20px;}  
    #yl tr td{width:20px;}  
    </style>  
    </head>  
    <body οnkeydοwn="zhuan()" style="text-align: center">  
    <div style="width:350px;margin:0 auto;">  
        <table border="1" id="table" cellspacing="0">  
        </table>  
        <table border="1" id="yl" cellspacing="0">  
            <tr>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
            </tr>  
            <tr>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
            </tr>  
            <tr>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
            </tr>  
            <tr>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
                <td> </td>  
            </tr>  
        </table>  
        <table border="1" id="f" cellspacing="0" style="float:left;margin-left:10px;">  
            <tr>  
                <td> </td>  
            </tr>  
        </table>  
    </div>  
      
    <script type="text/javascript" charset="utf-8">  
    var fangkuai=new Array();  
    var a=new Array();  
    var map=new Array();  
    var tempmap=new Array();  
    var zhong;  
    var xzhong;  
    var xdx=4;  
    var xdy=0;  
    var fkg=0;  
    var fkk=0;  
    var fenshu=0;  
    var dingshiqi;  
      
    els();  
    function els()  
    {  
        init();  
        kuai();  
        zaofangkuai();  
        kuaitotemp();  
        xianshi();  
        xianshiyl();  
        dingSi();  
    }  
      
    //构造表格  
    function init()  
    {  
        var newtable=getId("table");  
        var ntbody=document.createElement ("tbody");   
        newtable.appendChild (ntbody);   
        for(var i=0;i<15;i++){  
            var row=document.createElement ("tr");   
            for(var j=0;j<10;j++){  
                var cell=document.createElement ("td");   
                cell.appendChild(document.createTextNode (" "));  
                row.appendChild (cell);   
            }  
        ntbody.appendChild (row);   
        }  
      
        for(h=0;h<newtable.rows.length;h++)  
        {  
            map[h]=new Array();  
            for(l=0;l<10;l++)  
            {  
                map[h][l]=0;  
            }  
        }  
        tempmap=newtempmap();  
        fen();  
    }  
      
    //造方块  
    function zaofangkuai()  
    {  
        zhong=xzhong;  
        xzhong=Math.floor(Math.random()*a.length);  
        fangkuai=a[zhong];  
      
        xianshiyl();  
        getfkc(fangkuai);  
    }  
      
    //定义几种方块  
    function kuai()  
    {  
        a[0]=new Array([1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]);  
        a[1]=new Array([1,1,0,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]);  
        a[2]=new Array([1,1,1,0],[0,1,0,0],[0,0,0,0],[0,0,0,0]);  
        a[3]=new Array([0,1,1,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]);  
        a[4]=new Array([1,0,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]);  
        a[5]=new Array([0,0,1,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]);  
        zhong=Math.floor(Math.random()*a.length);  
        xzhong=Math.floor(Math.random()*a.length);  
    }  
      
    //键盘事件  
    function zhuan()  
    {  
        document.documentElement.onkeydown = function(e){  
            e = e||window.event;var ec = e.which||e.keyCode;  
            switch(ec){  
                case 38:shang();break;  
                case 37:zuo();break;  
                case 39:you();break;  
                case 40:xia();break;  
                default:break  
            }  
        };    
    }  
    //键盘上  
    function shang()  
    {  
            tempkuai=new Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);  
            tempkuai=fangkuai;  
            tempkuai=xuanzhuan(tempkuai);  
            tempkuai=dingwei(tempkuai);  
            getfkc(tempkuai);  
            if(chujie(tempkuai) && chongdie(xdx,xdy,tempkuai))  
            {  
                fangkuai=tempkuai;  
            }  
            getfkc(fangkuai);  
            kuaitotemp();  
            xianshi();  
    }  
    function zuo()  
    {  
        if(xdx-1>=0 && chongdie(xdx-1,xdy,fangkuai))  
        {xdx--;}  
        kuaitotemp();  
        xianshi();  
    }  
    function you()  
    {  
        if(xdx+fkk<10 && chongdie(xdx+1,xdy,fangkuai))  
        {xdx++;}  
        kuaitotemp();  
        xianshi();  
    }  
    function xia()  
    {  
        gaodu=getId("table");  
        if(xdy+fkg<gaodu.rows.length && chongdie(xdx,xdy+1,fangkuai))  
        {  
            xdy++;  
        }else{  
            luoshi();  
            xiaokuai();  
            xdy=0;  
            xdx=4;  
            zaofangkuai();  
        }  
            kuaitotemp();  
            xianshi();  
    }  
      
      
    //旋转函数  
    function xuanzhuan(kuais)  
    {  
        tempkuai=new Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                tempkuai[h][l]=kuais[3-l][h];  
            }  
        }  
        return tempkuai;  
    }  
      
    //旋转重定位  
    function dingwei(kuai)  
    {  
        tempkuai=new Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);  
        minx=4;  
        miny=4;  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(kuai[h][l]==1)  
                {  
                    if(h<miny)  
                    {  
                        miny=h;  
                    }  
                    if(l<minx)  
                    {  
                        minx=l;  
                    }  
                }  
            }  
        }  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(kuai[h+miny][l+minx]=="")  
                {  
                    tempkuai[h][l]=0;  
                }else  
                {  
                    tempkuai[h][l]=kuai[h+miny][l+minx];  
                }  
            }  
        }  
        return tempkuai;  
    }  
    //将生成的块装入移动数组  
    function kuaitotemp()  
    {  
        tempmap=newtempmap();  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(fangkuai[h][l]==1)  
                {  
                    tempmap[h+xdy][l+xdx]=fangkuai[h][l];  
                }  
            }  
        }  
    }  
    //落实  
    function luoshi()  
    {  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(fangkuai[h][l]==1)  
                {  
                    map[h+xdy][l+xdx]=fangkuai[h][l];  
                  
                }  
            }  
        }  
    }  
    //出界判断  
    function chujie(s)  
    {  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(s[h][l]==1)  
                {  
                    if(l+xdx>=10)  
                    {return false;}  
                }  
            }  
        }  
        return true;  
    }  
      
    //重叠判断  
    function chongdie(x,y,f)  
    {  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(f[h][l]==1 &&  map[h+y][l+x]==1)  
                return false;         
            }  
        }  
        return true;  
    }  
    //定时移动  
    function yidong()  
    {  
        gaodu=getId("table");  
        tempmap=newtempmap();  
        if(xdy+fkg<gaodu.rows.length && chongdie(xdx,xdy+1,fangkuai))  
        {  
            xdy++;  
        }else{  
            luoshi();  
            xiaokuai();  
            xdy=0;  
            xdx=4;  
            zaofangkuai();  
        }  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(fangkuai[h][l]==1)  
                tempmap[h+xdy][l+xdx]=fangkuai[h][l];         
            }  
        }  
        xianshi();  
    }  
    //消除方块  
    function xiaokuai()  
    {  
        gaodu=getId("table");  
        h=gaodu.rows.length-1;  
        while(h>=0)  
        {  
            zongshu=0;  
            for(l=0;l<10;l++)  
            {  
                if(map[h][l]==1)  
                {  
                    zongshu++;  
                }  
            }  
            if(zongshu==10)  
            {  
                fenshu=fenshu+10;  
                fen()  
                for(xh=h;xh>=0;xh--)  
                {  
                    if(xh==0)  
                    {  
                        for(l=0;l<10;l++)  
                        {  
                            map[xh][l]=0;  
                        }  
                    }else{  
                        for(l=0;l<10;l++)  
                        {  
                            map[xh][l]=map[xh-1][l];  
                        }  
                    }  
                }  
                h=gaodu.rows.length-1;  
            }else{  
                h--;  
            }  
        }  
    }  
    //得到方块长度.宽度  
    function getfkc(f)  
    {  
        fkg=0;  
        fkk=0;  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(f[h][l]==1)  
                {  
                    if(h>=fkg)  
                    {  
                        fkg=h+1;  
                    }  
                    if(l>=fkk)  
                    {  
                        fkk=l+1;  
                    }  
                }  
            }  
        }  
    }  
      
    //刷新移动数组  
    function newtempmap()  
    {  
        newmap=new Array();  
        gaodu=getId("table");  
        for(h=0;h<gaodu.rows.length;h++)  
        {  
            newmap[h]=new Array()  
            for(l=0;l<10;l++)  
            {  
                newmap[h][l]=0;  
            }  
        }  
        return newmap;  
    }  
    //显示预览框方块  
    function xianshiyl()  
    {  
        gaodu=getId("yl");  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(a[xzhong][h][l]==1)  
                {  
                    gaodu.rows[h].cells[l].style.background="#FF0000";  
                }else  
                {  
                    gaodu.rows[h].cells[l].style.background="#FFFFFF";                
                }  
            }  
        }  
    }  
    //显示游戏  
    function xianshi()  
    {  
        gaodu=getId("table");  
        for(h=0;h<gaodu.rows.length;h++)  
        {  
            for(l=0;l<10;l++)  
            {  
                if(map[h][l]==1 || tempmap[h][l]==1)  
                {  
                    gaodu.rows[h].cells[l].style.background="#FF0000";  
                }else  
                {  
                    gaodu.rows[h].cells[l].style.background="#FFFFFF";                
                }  
            }  
        }  
    }  
    //判断游戏失败  
    function shibai()  
    {  
        for(h=0;h<4;h++)  
        {  
            for(l=0;l<4;l++)  
            {  
                if(fangkuai[h][l]==1 &&  map[h+xdy][l+xdx]==1)  
                return true;          
            }  
        }  
        return false;     
    }  
      
    //显示分数  
    function fen()  
    {  
        s=getId("f");  
        s.rows[0].cells[0].innerHTML="得分："+fenshu;  
    }  
      
    function getId(a)   
    {  
        return document.getElementById(a);  
    }  
      
    function dingSi()   
    {  
        dingshiqi=setInterval("yidong()",700);  
    }  
      
    </script>  
    </body>  
    </html>


袁先生的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端 js写的俄罗斯方块
翟浩浩Android专栏
08-30 2260
效果图： 代码： html： html> html> head lang="en"> meta charset="UTF-8"> title>俄罗斯方块title> script src="js01Dia.js">script> head> body> body> html> js: /** * Created by hao on 2015/8/29
js写俄罗斯方块
A-Select °
03-25 302
效果： 方块定位原理通过16宫格定位坐标，把坐标存到数组中去 [ [[2,0],[2,1],[2,2],[1,2]],//L [[1,1],[2,1],[2,2],[2,3]], //左L [[2,0],[2,1],[2,2],[1,1]],//凸 [[2,0],[2,1],[3,0],[3,1]],//田 [[2,0],[2,1],[2,2],[2,3]],//一 [[2,0],[2,1],[...
js版俄罗斯方块（二）
斌斌(Java)
03-27 2280
之前曾发过一个js版的俄罗斯方块，界面比较简单，Bug也不少。抽空重构了一下，加入了javaScript面向对象的知识，修复了一些明显的BUG。 斌斌 (给我写信) 原创博文（http://blog.csdn.net/binbinxyz），转载请注明出处！ 源码（下载：http://download.csdn.net/detail/binbinxyz/5186774）公开如下：
B站学习---js面向对象应用（俄罗斯方块游戏的实现）
belle_mei的博客
01-04 457
这是本人在B站学习上跟着老师做的一个小游戏—俄罗斯方块，里面的内容跟老师的视频几乎一样。 视频来源 https://www.bilibili.com/video/BV1Rv41147GP?p=10 采用的技术主要是JavaScript。 全部代码，本人也放在了gitee上了，这是国内的GitHub，速度比较快。 仓库地址，此地址短期内有效 https://gitee.com/jjm1/tetris 1.1 初始化布局 代码 //采用这样的形式是为了防止全局污染 (function () { wi
Javascript实现俄罗斯方块
qq_24293765的博客
04-07 3384
JS实现俄罗斯方块 视频教程： JavaScript开发俄罗斯方块 代码地址： Tetris-based-on-JS 1.初始化布局 我们设置Game为中介者类 你会发现我们的Game.js文件的最外层是用IIFE包裹起来的，因为我们需要知道实际工作中都是多个类进行并行开发的，由于为了上生产，会将代码进行打包部署，也就是将所有的js文件打包为个js文件，如果没有IIEF会造成作用域和命名的冲突，所以我们用IIFE隔离作用域。 (function () { window.Game = function (
html俄罗斯方块是实现原理,用JS实现的俄罗斯方块
weixin_29086203的博客
06-02 290
一边练习一下javascript，一边搞的稍微有趣一点。这次的界面就是个table表格。其实所有的操作只要操作tabel的class就可以了。我这里把颜色直接用 cell.style.backgroundColor 来设置内联样式的属性了。完整代码如下，预先显示下一个方块的功能没做。Game Over也没有写。俄罗斯方块p.tips {margin-top: 20px; text-align: c...
全新版vue.js俄罗斯方块
03-07
在这个"全新版vue.js俄罗斯方块"项目中，开发者利用Vue.js的强大功能，结合算法，创建了一个完整的俄罗斯方块游戏。让我们深入探讨这个项目中的关键知识点。 1. **Vue.js组件化开发**： - Vue.js的核心理念是组件...
js俄罗斯方块游戏代码
06-24
【js俄罗斯方块游戏代码】是一款使用纯JavaScript语言编写的简单网页版俄罗斯方块游戏。在这款游戏中，开发者充分利用了JavaScript的DOM操作、事件监听和定时器等特性，实现了方块的生成、移动、旋转、消除以及得分...
js俄罗斯方块网页游戏代码
06-11
【标题】"js俄罗斯方块网页游戏代码"所涉及的知识点主要集中在JavaScript编程语言和网页游戏开发上。JavaScript，简称JS，是一种轻量级的解释型编程语言，主要用于客户端的网页脚本，使得用户与网页交互更加动态和...
javascript俄罗斯方块.zip
09-15
【JavaScript俄罗斯方块游戏开发详解】 在编程世界中，JavaScript是一种广泛应用的脚本语言，尤其在Web开发领域，它扮演着至关重要的角色。利用JavaScript，我们可以实现许多有趣的交互功能，其中之一就是开发游戏...
JS 俄罗斯方块完美注释版代码
10-30
俄罗斯方块（Tetris）是一款经典的电子游戏，在这里我们讨论的是用JavaScript（JS）实现的版本。这是一款基于网页的游戏，通过编写和解释JS代码实现，代码中包含了详细注释，方便理解每个部分的功能和编程思路。...
HTML+Javascript俄罗斯方块
05-29
本文介绍了用HTML+JavaScript技术制作俄罗斯方块的demo，包含了核心的板块，比较详细易懂，记分功能和闯关功能有兴趣的可以尝试 我还有这方面的代码可以分享
JS俄罗斯方块游戏代码
05-01
JS俄罗斯方块游戏代码，《俄罗斯方块》的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。游戏注释：用键盘控制方块的下落和变形↑：变形；←：左移；↓：下移(有...
javascript 做的俄罗斯方块
12-24 402
俄罗斯方块BODY {BACKGROUND: black; MARGIN: 0px}TD {COLOR: #ffffff; FONT-FAMILY: 宋体; FONT-SIZE: 9pt; HEIGHT: 20px; WIDTH: 20px}#block_div {POSITION: absolute; WIDTH: 80px; Z-INDEX: 1}#table_div {POSITION: a
用JS实现的俄罗斯方块
weixin_33813128的博客
06-13 96
一边练习一下javascript，一边搞的稍微有趣一点。这次的界面就是个table表格。其实所有的操作只要操作tabel的class就可以了。我这里把颜色直接用 cell.style.backgroundColor 来设置内联样式的属性了。完整代码如下，预先显示下一个方块的功能没做。Game Over也没有写。 <!DOCTYPE html> <html lang="en"&gt...
纯js实现俄罗斯方块[效率待优化]
想飞的鱼
12-28 806
var mapObject=null;var baseShapObject=null;var timeInterval=null;$(document).ready(function(){ mapObject=new MapClass(); mapObject.createMap();   createTable(mapObject);  baseShapObject=new BaseShapCl
JS实现的简单俄罗斯方块
LOHAS的博客
09-16 432
写了个简单的俄罗斯方块儿游戏，算个笔记吧 关于在边界的图形转换还存在一些问题，待优化。 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>俄罗斯方块</title> <script type="text/javascri...
JavaScript 俄罗斯方块
最新发布
04-01
JavaScript 俄罗斯方块是一种在 Web 网页上运行的俄罗斯方块游戏。它利用了 JavaScript 语言的特性和 HTML、CSS 技术，实现了一个简单的游戏界面和游戏逻辑。 在 JavaScript 俄罗斯方块游戏中，玩家需要控制一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值