JavaScript实现俄罗斯方块代码

最新推荐文章于 2023-06-02 11:51:32 发布
最新推荐文章于 2023-06-02 11:51:32 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： Web前端 文章标签： javascript 俄罗斯方块
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OnlyOneCoder/article/details/8266669
版权

补张图：




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head> 
<title>俄罗斯方块</title> 
<style type="text/css"> 
    body{ width:530px; background:#006030; margin:20px auto} 
    table#gameBoard{ border:1px solid black; border-collapse: collapse; float:left;} 
    table#gameBoard td{ width:30px; height:30px; border: 1px dotted #0cc;} 
    div#gameControl{ widows:160; float:right; height: 200px;; line-height: 200px;} 
    .font{
	font-family:'微软雅黑';
	font-size:18px;
	text-align:center;
	} 
    div input { width: 60px; height:25px; } 
 
</style> 
<script type="text/javascript"> 
    var T = TETRIS = { 
        aBoardGrids : [], 
        aShapes: [ 
            [0xCC00],  
            [0x8888, 0xF00],  
            [0x8C40, 0x6C00],  
            [0x4C80, 0xC600],  
            [0x44C0, 0x8E00, 0xC880, 0xE200],  
            [0x88C0, 0xE800, 0xC440, 0x2E00],  
            [0x4E00, 0x8C80, 0xE400, 0x4C40] 
        ],     
		//代表所有方块的形状数 
        init : function(){ 
            this.oDomBoard = document.getElementById("gameBoard"); 
            this.oDomScore = document.getElementById("score"); 
            this.aBoardGrids = new Array(18); 
            for (var rows = 0 ; rows < 18 ; rows++){ 
                this.aBoardGrids[rows] = new Array(10); 
                var oDomTr = this.oDomBoard.insertRow(-1); 
                for (var cols = 0 ; cols < 10 ; cols++){ 
                    this.aBoardGrids[rows][cols] = 0; 
                    oDomTr.insertCell(cols); 
                } 
            } 
 
            document.onkeydown = function(keyEvent){ 
                keyEvent = keyEvent || window.event; 
                var ikeyNum = keyEvent.which || keyEvent.keyCode; 
                switch(ikeyNum){ 
                    case 37://← 
                        T.oBlock.move("left"); 
                        break; 
                    case 38://↑  
                        T.oBlock.rotate((function (){ 
                            var vShape      = T.aShapes[T.iShapeIdx][ (++T.index)%T.aShapes[T.iShapeIdx].length]; 
                            var sShape      = vShape.toString(2);                                
                            sShape          = new Array(17 - sShape.length).join(0) + sShape;    
                            T.matrix        = sShape.match(/\d{4}/g);    
                            return T.matrix; 
                        })());  //变形 
                        break; 
                    case 39://→ 
                        T.oBlock.move("right"); 
                        break; 
                    case 40://↓ 
                        T.oBlock.move("down"); 
                        break; 
                } 
            } 
        }, 
        next : function (){ 
             
            this.iShapeIdx  = parseInt(Math.random() * this.aShapes.length); 
            this.index      = 0; 
            var vShape      = this.aShapes[this.iShapeIdx][this.index]; 
            var sShape      = vShape.toString(2);                               //将16进制转换为二进制 
            sShape          = new Array(17 - sShape.length).join(0) + sShape;   //不够16位，在前面用0补全  
            this.matrix     = sShape.match(/\d{4}/g);                           //利用正则表达式匹配 
 
            this.oBlock = new TETRIS.Block(this.matrix); 
                     
            clearInterval(T.timer); 
            //注册定时器 
            T.timer = setInterval(function (){ 
                T.oBlock.move("down"); 
            }, 1000); 
             
             
            if( !T.oBlock.checkBlock() ){ 
                alert("Game Over~"); 
                clearInterval(T.timer); 
             
            } 
             
        }, 
        updateBoard : function (){      //更新面板 
            for(var i = 0 ; i < 4 ; i++){ 
                this.aBoardGrids[T.oBlock.shape[i].y][T.oBlock.shape[i].x] = 1; 
            } 
        }, 
        eraseLines : function (){ 
            var iLines = 0; 
            for(var j = 17 ; j >= 0 ; j--){ 
                var num = 0; 
                for(var i = 0 ; i< 10 ; i++){ 
                    if(this.aBoardGrids[j][i] == 1) 
                        num ++; 
                } 
                if(num == 10){ 
                    iLines ++; 
                    for(var m = 0 ; m < i ; m++){ 
                        for(var n = j ; n > 0 ; n--){ 
                            this.aBoardGrids[n][m] = this.aBoardGrids[n-1][m]; 
                            T.oDomBoard.rows[n].cells[m].style.background = T.oDomBoard.rows[n-1].cells[m].style.background; 
                        } 
                        this.aBoardGrids[0][m] = 0; 
                    } 
                    j++; 
                } 
            } 
            return iLines; 
        }, 
        setScore : function (iLines){ 
            var iScore = parseInt(this.oDomScore.innerHTML); 
            if(iLines == 1){ 
                iScore += 100; 
            } else if(iLines == 2){ 
                iScore += 300; 
            } else if(iLines == 3){ 
                iScore += 500; 
            } else if(iLines == 4){ 
                iScore += 1000; 
            } 
            this.oDomScore.innerHTML = iScore; 
        } 
    } 
     
    TETRIS.Block = function (matrix){ 
 
        this.shape = (function(){ 
             
            var aShape = []; 
            for(var i = 0 ; i < matrix.length ; i++){ 
                var sValue = matrix[i]; 
                for(var j = 0 ; j < sValue.length ; j++){ 
                    if(sValue.charAt(j) == "1"){ 
                        aShape.push({ x : j+3 , y : i }); 
                    }   
                } 
            } 
             
            return aShape; 
             
        })(); 
        this.draw(); 
    } 
     
    TETRIS.Block.prototype.move = function (direction){//移动 
        if(this.checkBlock(this.shape,direction)){ 
            this.draw("clear"); 
            for(var i = 0 ; i < 4 ; i++){ 
                switch(direction){ 
                    case "left"://←  
                        this.shape[i].x--; 
                        break; 
                    case "right": 
                        this.shape[i].x++; 
                        break; 
                    case "down": 
                        this.shape[i].y++; 
                        break; 
                } 
            } 
            this.draw(); 
        } else { 
            if(direction == "down"){ 
                this.draw(); 
                T.updateBoard();    //更新面板 
                var iLines = T.eraseLines(); 
                 
                if(iLines > 0){ 
                 
                    T.setScore(iLines); 
                     
                } 
                 
                T.next();           //再生成一个新的方块 
            } 
        } 
         
    } 
    TETRIS.Block.prototype.rotate = function (matrix){//变形 
         
        this.shape = (function(oBlock){ 
             
            var aX = []; 
            var aY = []; 
 
            for(var i = 0 ; i < 4 ; i++){ 
                aX.push(oBlock.shape[i].x); 
                aY.push(oBlock.shape[i].y); 
            } 
            var iMinX = aX.getMin(); 
            var iMinY = aY.getMin(); 
             
             
            var aShape = []; 
            for(var i = 0 ; i < matrix.length ; i++){ 
                var sValue = matrix[i]; 
                for(var j = 0 ; j < sValue.length ; j++){ 
                    if(sValue.charAt(j) == "1"){ 
                        aShape.push({ x : j+iMinX , y : i+iMinY }); 
                    }   
                } 
            } 
            if( !( oBlock.checkBlock(aShape)) ) 
                return oBlock.shape; 
            oBlock.draw("clear"); 
            return aShape; 
             
        })(this); 
 
        this.draw(); 
    } 
 
    TETRIS.Block.prototype.draw = function (opt){//绘图 
        for(var i = 0 ; i < this.shape.length ; i++){ 
            var oShape = this.shape[i]; 
            T.oDomBoard.rows[oShape.y].cells[oShape.x].style.background = (opt==undefined?"#09F":""); 
        } 
    } 
    TETRIS.Block.prototype.checkBlock = function (shape, direction){ 
        shape = shape || this.shape; 
        for(var i = 0 ; i < 4 ; i++){ 
            if(direction == "left"){ 
                    if(shape[i].x == 0 || T.aBoardGrids[shape[i].y][shape[i].x - 1] == 1){ 
                        return false; 
                    } 
            } else if(direction == "right"){ 
                    if(shape[i].x == 9 || T.aBoardGrids[shape[i].y][shape[i].x + 1] == 1){ 
                        return false; 
                    } 
            } else if(direction == "down"){ 
                    if(shape[i].y == 17 || T.aBoardGrids[shape[i].y + 1][shape[i].x] ==1){ 
                        return false; 
                    } 
            } 
            if(shape[i].x < 0 || shape[i].x > 9 || shape[i].y < 0 || shape[i].y > 17) 
                return false; 
            if(T.aBoardGrids[shape[i].y][shape[i].x] == 1){ 
                return false; 
            } 
        } 
        return true; 
         
    } 
    Array.prototype.getMin = function (){ 
        var iMin = this[0]; 
        for(var i = 0 ; i < this.length ; i++){ 
            if(this[i] < iMin) 
                iMin = this[i]; 
        } 
        return iMin; 
    } 
    window.onload = function(){ 
     
        T.init(); 
         
        var oBtnPlay = document.getElementById("btnPlay"); 
        oBtnPlay.onclick = function(){ 
            if(this.value == "begin"){ 
                T.next(); 
                this.value = "over"; 
            } else { 
                this.value = "begin"; 
                alert("Game Over~"); 
                clearInterval(T.timer); 
            }  
         
        }    
        var oBtnPause = document.getElementById("btnPause"); 
        oBtnPause.onclick = function (){ 
            if(this.value == "pause"){ 
                clearInterval(T.timer); 
                this.value = "resume"; 
            } else { 
                T.timer = setInterval(function (){ 
                    T.oBlock.move("down"); 
                }, 1000); 
                this.value = "pause"; 
            } 
        } 
 
    } 
 
</script> 


</head> 
 
<body> 
    <table id="gameBoard"></table> 
    <div id="gameControl"> 
        Score ： <span id="score">0</span><br /> 


      <input type="button" id="btnPlay" value="begin" /> 
      <input type="button" id="btnPause" value="pause" /><br/> 


        <span>俄罗斯方块</span> 
    </div> 
</body> 
</html>


limengwe
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript写的俄罗斯方块小游戏（很简单，很详细）
编程界明世隐的博客
02-25 9308
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:320px; height:450px; position:absolute; margin:0 auto
JavaScript实现简洁的俄罗斯方块完整实例
10-22
主要介绍了JavaScript实现简洁的俄罗斯方块,以完整实例形式分析了JavaScript实现俄罗斯方块游戏的具体技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下
js实现俄罗斯方块
在路上
05-07 430
下面是实现代码 ，代码中有注释，分享给大家，仅供学习<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #gamemap { width: 360px;
JS俄罗斯方块游戏代码
05-01
JS俄罗斯方块游戏代码，《俄罗斯方块》的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。游戏注释：用键盘控制方块的下落和变形↑：变形；←：左移；↓：下移(有自定义的下落速度)；→：右移；空格：速降(会直接到达最下层)。
js 实现俄罗斯方块
weixin_39394140的博客
01-27 7946
实现思路 MVC思路。三个端分工合作。可以仔细看。整个俄罗斯方块为一个二维数组。C控制M, M控制二维数组，V只要把二维数组渲染出来就行 。 视图层 html部分 <canvas id="canvas"></canvas> js部分 // 画背景 function drawBG(){ CTX.lineWidth = 1; CTX.fil...
Javascript 俄罗斯方块 游戏代码
精选资讯文章
06-01 1299
通过设置的 Options.width, Options.height 列数与行数，以及设置的小方格宽度，初始化了一个宽：Options.width列，高为 Options.height 的表格界面出来；共7种方块，以1,2,3,4,5,6,7 索引键表示，方块是四个小块组成，每块都有各自的坐标，1-4表示组成该块的初始坐标位置，5表示旋转点；OLSFK.play 正常下落的方法，也得判断下落一格是否有被占用的格，如果没有，清除当前方块，绘制方块新位置;以及左右，向下及旋转动作判断，重新渲染方块位置；
用javascript写俄罗斯方块
最新发布
2301_78098294的博客
06-02 346
【代码】用javascript写俄罗斯方块。
使用原生JS实现俄罗斯方块
qq_40834427的博客
04-27 206
为什么忽然整了个俄罗斯方块 基本上在大学学编程，大一的期末大作业都会留一个类似于俄罗斯方块的东西。而我便是早早放弃了写代码选择了抱大腿的那位。如今五一将近。为了过一个安稳的假期公司基本没有什么任务了。为了弥补当年的遗憾（绝对不是摸鱼）就自己亲自动手写了这个作业。 代码水平一般，大伙权当看个乐子。 康康代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <ti
JavaScript实现俄罗斯方块.rar
08-26
JavaScript实现俄罗斯方块，使用浏览器打开就可以玩耍，使用键盘上下左右控制方向和旋转，唤起了儿时美好的回忆
JavaScript 俄罗斯方块游戏实现方法与代码解释
11-20
本俄罗斯方块代码采用 JavaScript 脚本代码写成，简单易懂； 全代码采用静态类及静态变量成员组成； 全脚本通过实现代码全局配置 OLSFK.Options = {...} 定义方块起始坐标及定义各自的旋转点； 从初始化俄罗斯方块
js俄罗斯方块网页游戏代码
06-11
这是一款简单的js俄罗斯方块网页游戏代码，童年的经典小游戏，分享给大家玩玩。
纯JavaScript实现俄罗斯方块（详细注释 ES6）
10-07
无框架纯JavaScript实现俄罗斯方块，使用ES6编写，附有详细注释。效果见：http://www.cnblogs.com/wenruo/p/7636242.html
60行js代码实现俄罗斯方块
12-29
这是我之前网上看到的,很牛逼的一位大神写的,一直膜拜中 <!doctype html><html><head></head><body> <div id=box xss=removed></div> [removed] var map=eval([+Array(23).join(0x801,)+0xfff]); var tatris=[[0x6600],[0x2222,
js俄罗斯方块游戏代码
06-24
js俄罗斯方块游戏代码是一款原生js制作的简单俄罗斯方块网页游戏代码。
JAVASCRIPT代码编写俄罗斯方块网页版
11-23
HTML+CSS+JS实现俄罗斯方块完整版，素材只有图片，想要的下载图片按提示名字保存，css中用的时候注意路径！！主要在JS中！JS附有详细注释 效果： 按键提示：[键盘按键] 素材：图片名字与代码里对应 　1、背景图片...
Javascript实现俄罗斯方块
qq_24293765的博客
04-07 3135
JS实现俄罗斯方块 视频教程： JavaScript开发俄罗斯方块 代码地址： Tetris-based-on-JS 1.初始化布局 我们设置Game为中介者类 你会发现我们的Game.js文件的最外层是用IIFE包裹起来的，因为我们需要知道实际工作中都是多个类进行并行开发的，由于为了上生产，会将代码进行打包部署，也就是将所有的js文件打包为个js文件，如果没有IIEF会造成作用域和命名的冲突，所以我们用IIFE隔离作用域。 (function () { window.Game = function (
用JS写一个《俄罗斯方块》小游戏
KISS
04-06 2440
最近网上上映一部名叫，想起自己学习JS时，编写《俄罗斯方块》小游戏程序作为练习，现在分享一下，看能不能蹭一下热度。: )
javascript+html做一个俄罗斯方块的小游戏
风飞飘扬的专栏
09-17 7419
上一篇里写的方块左右移动的方法有bug，已更正 方块的种类有7中，把它们写到getBlocksByType函数 //获取指定类型的方块 function getBlocksByType(type){ var tBlocks = new Object(); tBlocks.x = new Array(); tBlocks.y = new Array(); switch(typ
js实现俄罗斯方块代码
06-01
好的，以下是一个简单的 JavaScript 实现俄罗斯方块的代码，供您参考： ```html <!DOCTYPE html> <title>Tetris Game #game-board { width: 250px; height: 500px; border: 2px solid black; margin: 0 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值