js实现俄罗斯方块

最新推荐文章于 2025-05-22 16:55:05 发布
原创 最新推荐文章于 2025-05-22 16:55:05 发布 · 475 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#俄罗斯方块 #javascript

下面是实现代码 ，代码中有注释，分享给大家，仅供学习

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #gamemap {
            width: 360px;
            height: 600px;
            background: #F4F4F4;
        }

        .kuai {
            width: 28px;
            height: 28px;
            margin: 1px;
            float: left;
        }
    </style>
    <script type="text/javascript">
    <--! 
    gamemap二维数组，绘制地图， 0 代表 空白  ，1  代表墙  ，如果是  2  代表正在下落的 方块， 3 代表已经下沉的方块
    -->
        var gamemap = new Array();
        gamemap[0] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[1] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[2] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[3] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[5] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[6] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[7] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[8] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[9] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[10] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[11] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[12] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[13] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[14] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[15] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[16] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[17] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[18] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
        gamemap[19] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
        var level = 0;
        var r = 0;
        var c = 5;
        //装有图形的数组
        var mshape;
        //随机产生的形状，从0-6，分别对应I,T,L,J,S,Z,O
        var shape;
        //方向键
        var dirkey;
        var quick = 1;
        var timer;
        <--!
            每个数字代表一种图形，获得图形
            -->
        function getshape(shapeid, r, c) {
            var shapes = new Array();
            switch (shapeid) {
                case 0:
                    shapes[0] = new Array(r, c - 1);
                    shapes[1] = new Array(r, c);
                    shapes[2] = new Array(r, c + 1);
                    shapes[3] = new Array(r, c + 2);
                    break;
                case 1:
                    shapes[0] = new Array(r, c - 1);
                    shapes[1] = new Array(r, c);
                    shapes[2] = new Array(r, c + 1);
                    shapes[3] = new Array(r + 1, c);
                    break;
                case 2:
                    shapes[0] = new Array(r, c - 1);
                    shapes[1] = new Array(r, c);
                    shapes[2] = new Array(r, c + 1);
                    shapes[3] = new Array(r + 1, c - 1);
                    break;
                case 3:
                    shapes[0] = new Array(r, c - 1);
                    shapes[1] = new Array(r, c);
                    shapes[2] = new Array(r, c + 1);
                    shapes[3] = new Array(r + 1, c + 1);
                    break;
                case 4:
                    shapes[0] = new Array(r, c + 1);
                    shapes[1] = new Array(r, c);
                    shapes[2] = new Array(r + 1, c - 1);
                    shapes[3] = new Array(r + 1, c);
                    break;
                case 5:
                    shapes[0] = new Array(r, c - 1);
                    shapes[1] = new Array(r, c);
                    shapes[2] = new Array(r + 1, c);
                    shapes[3] = new Array(r + 1, c + 1);
                    break;
                case 6:
                    shapes[0] = new Array(r, c);
                    shapes[1] = new Array(r, c + 1);
                    shapes[2] = new Array(r + 1, c);
                    shapes[3] = new Array(r + 1, c + 1);
                    break;
                default:
                    break;
            }
            return shapes;
        }
        <--!
            初始化地图
            -->
        function initmap() {
            var divmap = document.getElementById("gamemap");
            for (var r = 0; r < gamemap.length; r++) {
                for (var c = 0; c < gamemap[r].length; c++) {
                    var divchild = document.createElement("div");
                    divchild.id = "r" + r + "c" + c;
                    divchild.className = "kuai";
                    divmap.appendChild(divchild);
                }
            }
            shapemaker();
            paint();
            setInterval("fall()", 700);
        }
        <--!
            渲染颜色
            0 代表 空白
            1 代表边框 ，黑色
            2 代表 正在下落得方块
            3 代表 已经下沉到底部的方块 ，
            -->
        function paint() {
            for (var r = 0; r < gamemap.length; r++) {
                for (var c = 0; c < gamemap[r].length; c++) {
                    switch (gamemap[r][c]) {
                        case 0:
                            document.getElementById("r" + r + "c" + c).style.background = "white";
                            break;
                        case 1:
                            document.getElementById("r" + r + "c" + c).style.background = "black";
                            break;
                        case 2:
                            document.getElementById("r" + r + "c" + c).style.background = "gold";
                            break;
                        case 3:
                            document.getElementById("r" + r + "c" + c).style.background = "orangered";
                            break;
                        default:
                            break;
                    }
                }
            }
        }

        function shapemaker() {
            shape = parseInt(Math.random() * 7);
            <--!
            生成随机数，0-6，每个数字代表一种图形
            -->
            mshape = getshape(shape, r, c);
            if (isover()) {
                alert("恭喜你获得" + level * 100 + "分");
                location.reload();
            }
            for (var i = 0; i < mshape.length; i++) {
                gamemap[mshape[i][0]][mshape[i][1]] = 2;
            }
        }
        <--!
        下落 代码
            -->
        function fall() {
            var aftershape = new Array();
            for (var i = 0; i < mshape.length; i++) {
                aftershape[i] = new Array(mshape[i][0] + 1, mshape[i][1]);
            }
            if (iscollision(aftershape)) {
                for (var i = 0; i < mshape.length; i++) {
                    gamemap[mshape[i][0]][mshape[i][1]] = 3;
                }
                paint();
                var row = isfull();
                while (row != -1) {
                    for (var i = row; i > 0; i--) {
                        gamemap[i] = gamemap[i - 1];
                    }
            <--!  消除方块
            -->
                    gamemap[0] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
                    level++;
                    row = isfull();
                }
                r = 0;
                c = 5;
                quick = 1;
                shapemaker();
            } else {
                r++;
                drawshape(mshape, aftershape);
            }
            paint();
        }

        function isover() {
            for (var i = 0; i < mshape.length; i++) {
                if (gamemap[mshape[i][0]][mshape[i][1]] == 3) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    <--!  判断行是否满了，返回行号 -->
        function isfull() {
            for (var i = gamemap.length - 2; i >= 0; i--) {
                var samenum = 0;
                for (var j = 1; j < gamemap[i].length - 1; j++) {
                    if (gamemap[i][j] != 3) {
                        break;
                    } else {
                        samenum++;
                        if (samenum == gamemap[i].length - 2) {
                            return i;
                        }
                    }
                }
                samenum = 0;
            }
            return -1;
        }
<--! 判断是否发生碰撞 -->
        function iscollision(shapes) {
            var collision = false;
            for (var i = 0; i < shapes.length; i++) {
                var value = gamemap[shapes[i][0]][shapes[i][1]];
                if (!(value == 0 || value == 2)) {
                    collision = true;
                }
            }
            return collision;
        }
<--! 旋转图形 -->
        function rotate(shapeid, shape) {
            var shapes = new Array();
            if (shapeid >= 0 && shapeid < 6) {
                for (var i = 0; i < shape.length; i++) {
                    var square = shape[i];
                    x = square[0] - r;
                    y = square[1] - c;
                    shapes[i] = new Array((square[0] + y - x), (square[1] - x - y));
                }
            } else if (shapeid == 6) {
                shapes = shape;
            }
            return shapes;
        }
<--!
按方向键控制图形变换  ↑ 键 是旋转
-->
        function presslimit(event) {
            var aftershape = new Array();
            if (event.keyCode >= 37 && event.keyCode <= 40) {
                dirkey = event.keyCode - 37;
                switch (dirkey) {
                    case 0:
                        for (var i = 0; i < mshape.length; i++) {
                            aftershape[i] = new Array(mshape[i][0], mshape[i][1] - 1);
                        }
                        break;
                    case 1:
                        aftershape = rotate(shape, mshape);
                        break;
                    case 2:
                        for (var i = 0; i < mshape.length; i++) {
                            aftershape[i] = new Array(mshape[i][0], mshape[i][1] + 1);
                        }
                        break;
                    case 3:
                        for (var i = 0; i < mshape.length; i++) {
                            aftershape[i] = new Array(mshape[i][0] + 1, mshape[i][1]);
                        }
                        break;
                    default:
                        break;
                }
                if (!iscollision(aftershape)) {
                    drawshape(mshape, aftershape);
                    switch (dirkey) {
                        case 0:
                            c--;
                            break;
                        case 2:
                            c++;
                            break;
                        case 3:
                            r++;
                            break;
                        default:
                            break;
                    }
                }
                paint();
            } else if (event.keyCode == 13) {
                quick = 0;
            }
        }
        <--! 绘制图形 -->
        function drawshape(befor, after) {
            for (var i = 0; i < befor.length; i++) {
                gamemap[befor[i][0]][befor[i][1]] = 0;
            }
            for (var i = 0; i < after.length; i++) {
                gamemap[after[i][0]][after[i][1]] = 2;
            }
            mshape = after;
        }
        onkeydown = presslimit;
        onload = initmap;
    </script>

    <body>
        <div id="gamemap"></div>
    </body>

</html>
JavaScript ---- 使用原生 JavaScript 实现俄罗斯方块
止于至善
04-03 313
俄罗斯方块（俄语：Русская клеточная игра или Русская клеточная игра в квадрате）是一款经典的益智类游戏，其规则简单，操作简单，具有很高的趣味性。俄罗斯方块是一款2D的益智游戏，玩家控制一个方块在一个方格内自由移动，通过控制方块的旋转、下落、以及移动，来消除周围的方块，并在此过程中获得分数。方块由四个小方块组成，每个小方块都有四个角落，四条边，以及一个中心点。方块可以旋转，但不能翻转。方块只能在空白的格子上移动。
使用JS实现俄罗斯方块游戏
qq_36190858的博客
08-03 2381
使用JS实现俄罗斯方块游戏  简单的JS俄罗斯方块游戏源码   效果图：    代码如下，复制即可使用： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;使用JS实现俄罗斯方块游戏&lt;/title&gt;
JS实现——俄罗斯方块
weixin_34162228的博客
11-07 198
把以下代码保存成Tetris.html文件，使用Google或360浏览器打开 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta name="char...
用JavaScript实现经典俄罗斯方块游戏
最新发布
weixin_31974443的博客
05-22 592
构造函数是定义创建对象的蓝图的一种特殊函数。它使用new操作符在创建对象时被调用，构造函数的主要作用是初始化新创建的对象，设置对象的初始状态和行为。实例属性（Instance Properties）是绑定在类的每个实例上的属性，它们在每个对象的内存空间里是独立存在的。通过this关键字在构造函数中声明的属性即为实例属性。例如，在面向对象编程中，一个Car类可能有多个实例属性，如makemodel和year，每个Car实例将拥有自己的一套属性值。
js 实现俄罗斯方块
weixin_39394140的博客
01-27 8365
实现思路 MVC思路。三个端分工合作。可以仔细看。整个俄罗斯方块为一个二维数组。C控制M, M控制二维数组，V只要把二维数组渲染出来就行 。 视图层 html部分 <canvas id="canvas"></canvas> js部分 // 画背景 function drawBG(){ CTX.lineWidth = 1; CTX.fil...
JavaScript实现俄罗斯方块.rar
08-26
总的来说，JavaScript实现俄罗斯方块是一个很好的学习项目，它涵盖了事件处理、数组操作、定时器、DOM操作以及简单的游戏逻辑等多个JavaScript编程的关键点。通过这个项目，开发者可以深入理解JavaScript在实时交互...
JavaScript实现俄罗斯方块游戏
11-25
用H5和JS实现俄罗斯方块。 需要注意以下几点： 1.Canvas 的坐标信息与数组的维度信息恰好相反 2.在因为移动当前下落 的单元格，而更新对应坐标信息时，注意整个游戏平面的坐标信息更新 3.通过settimeout去设置按固定...
原生js实现俄罗斯方块
01-22
本文实例为大家分享了js实现俄罗斯方块的具体代码，供大家参考，具体内容如下 效果如下 html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport ...
Html5+js实现俄罗斯方块
01-14
在网页上使用HTML5和JavaScript实现俄罗斯方块是一项常见的编程挑战，它涉及到多个技术层面，包括页面布局、事件处理、动画效果以及游戏逻辑。以下是对这个项目中涉及的关键知识点的详细解释： 1. **HTML5 Canvas**...
纯JS实现俄罗斯方块
07-31
使用js代码实现俄罗斯方块的操作，基本功能均已经实现，无聊的小伙伴可以下着玩一下，也可以随意交流。不过抱歉的是，没有用写代码注释。。
js版俄罗斯方块
03-17
俄罗斯方块，一个精典又好玩的游戏。这是一个javascript版本的俄罗斯方块。多浏览器支持（兼容IE，360，火狐等）。
JS 俄罗斯方块
01-31
JS 编写的俄罗斯方块，界面可以再美化下，可以扩展模型
俄罗斯方块 JS
11-20
原本是前苏联科学家阿列克谢·帕基特诺夫所开发的教育用软件，之后开始提供授权给各个游戏公司，造成各平台上软件大量发行的现象。 Game Boy版的俄罗斯方块在日本卖出424万套，是Game Boy史上卖最好的游戏。海湾战争时，也是前线美军最常拿消磨时间的游戏之一。 由于俄罗斯方块具有的数学性、动态性与知名度，也经常拿来作为游戏程序设计的练习题材。 俄罗斯方块曾经造成的轰动与带来的经济价值，可以说是世界游戏史上的一个奇迹。它看似简单却又变化无穷，令人上瘾。相信大多数用户都还记得为它痴迷得“茶不思饭不想”的那个俄罗斯方块时代。 俄罗斯方块上手极其简单，但是要熟练地掌握其中的操作与摆放技巧，难度却不低。作为家喻户晓老少皆宜的大众游戏，其普及程度可以说是史上任何一款游戏都无法相比的。
JS代码版俄罗斯方块
11-19
俄罗斯方块 是一款风靡全球的电视游戏机和掌上游戏机游戏，它由俄罗斯人阿列克谢·帕基特诺夫发明，故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜，从而家喻户晓，风靡世界。 2014年2月22日，英国心理学家发现，减肥者通过玩俄罗斯方块，可以降低对富含脂肪的食物和零食的心理需求；尝试戒烟者的烟瘾也能得到遏制。
Js实践之俄罗斯方块
玉案轩窗的博客
02-09 1119
前言 快到春节假期了，最近工作上没什么事情，浏览技术文章的时候看见关于俄罗斯方块相关的内容，才会起意实现下俄罗斯方块，主要目的有如下几条： 回顾下Js部分的知识 学习理解俄罗斯方块游戏的具体实现思想 具体实现 实现看下具体的实现效果，实现效果如下： 本次实现是简易版的俄罗斯方块包含基本俄罗斯方块的基本功能，本次实现的俄罗斯方块的基本功能有： 形状变换 满行消除 下一个形状提示...
js俄罗斯方块
Mu_Cloud的博客
12-28 1917
@{ Layout = null; } <!DOCTYPE html> <html lang="en" class="loading"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> ...
js版俄罗斯方块（二）
斌斌(Java)
03-27 2344
之前曾发过一个js版的俄罗斯方块，界面比较简单，Bug也不少。抽空重构了一下，加入了javaScript面向对象的知识，修复了一些明显的BUG。 斌斌 (给我写信) 原创博文（http://blog.youkuaiyun.com/binbinxyz），转载请注明出处！ 源码（下载：http://download.youkuaiyun.com/detail/binbinxyz/5186774）公开如下：
JavaScript实现俄罗斯方块源码分享
通过编写JavaScript代码实现俄罗斯方块游戏，可以加深对编程语言的理解，同时提升逻辑思维和解决问题的能力。下面将详细介绍该主题下的相关知识点。 ### JavaScript基础 #### 1. 变量和数据类型 在JavaScript中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值