关闭

javascript(30行)+css 实现七色俄罗斯方块的操控及代码实现的说明

标签: 俄罗斯方块javascript测试
55人阅读 评论(0) 收藏 举报
分类:


说明:这个JS仅实现了俄罗斯方块的操控,最后的消层没有处理,为了测试方便自动下落也没处理

例中有两个script标签,第一个就是javascript程序,第二个是第一个复制后的说明


<!doctype html>
<html>
<head>
    <style>
        #gameBoard {
            display: inline-block;
            width: 200px;
            height: 400px;
            background: black;
            line-height: 0px;
            border: 2px solid red;
        }

        .divItem {
            color: white;
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size: 8px;
            line-height: 20px;
            box-shadow: 2px 2px 0 rgba(255,255,255,.5) inset,-2px -2px 0 rgba(0,0,0,.5) inset;
        }

            .divItem[val="0"] {
                background: black;
                box-shadow: 0px 0px 0 rgba(255,255,255,.5) inset,-0px -0px 0 rgba(0,0,0,.5) inset;
            }

            .divItem[val="1"], .divItem[val="-1"] {
                background: #ff0000;
            }

            .divItem[val="2"], .divItem[val="-2"] {
                background: #0000ff;
            }

            .divItem[val="3"], .divItem[val="-3"] {
                background: #00ff00;
            }

            .divItem[val="4"], .divItem[val="-4"] {
                background: #00ffff;
            }

            .divItem[val="5"], .divItem[val="-5"] {
                background: #ff00ff;
            }

            .divItem[val="6"], .divItem[val="-6"] {
                background: #ffff00;
            }

            .divItem[val="7"], .divItem[val="-7"] {
                background: #ffffff;
            }
    </style>
</head>
<body style="background:black">
    <div id="gameBoard"></div>
    <script>
        var items = { '1': [[0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]], '2': [[0, 0, 0, 0, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0], [0, 2, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0]], '3': [[0, 0, 0, 0, 3, 3, 3, 0, 0, 0, 3, 0, 0, 0, 0, 0], [0, 0, 3, 0, 0, 0, 3, 0, 0, 3, 3, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 3, 0, 0, 0, 3, 3, 3, 0, 0, 0, 0], [0, 0, 0, 0, 0, 3, 3, 0, 0, 3, 0, 0, 0, 3, 0, 0, ]], '4': [[0, 0, 0, 0, 4, 4, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0], [4, 4, 0, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 4, 0, 4, 4, 4, 0, 0, 0, 0, 0], [4, 0, 0, 0, 4, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, ]], '5': [[0, 5, 5, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [5, 0, 0, 0, 5, 5, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0]], '6': [[6, 6, 0, 0, 0, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 6, 0, 0, 6, 6, 0, 0, 6, 0, 0, 0, 0, 0, 0]], '7': [[0, 0, 0, 0, 7, 7, 7, 0, 0, 7, 0, 0, 0, 0, 0, 0], [0, 7, 0, 0, 7, 7, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0], [0, 7, 0, 0, 7, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 7, 0, 0, 0, 7, 7, 0, 0, 7, 0, 0, 0, 0, 0, 0]] };
        var itemsStart = { "1": items[1][0], "5": items[5][0], "6": items[6][0], '2': [2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], '3': [3, 3, 3, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0], '4': [4, 4, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], '7': [7, 7, 7, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] };
        var statue = null, divStr = '';
        for (var i = 0; i < 20; i++) for (var j = 0; j < 10; j++) divStr += '<div id="item' + (i * 15 + j + 2) + '" class="divItem" val="0"></div>';
        document.getElementById("gameBoard").innerHTML = divStr;
        function move(moveType) {
            if (moveType < -5 || moveType == 0 || moveType > 7) return;
            statue = (moveType > 0) ? { no: moveType, x: 5, y: 0, rotate: -1 } : statue;
            var boardArr = [],  canMove = true, pic = [], picBefore = [], item = null, itemBefore = null
                , tmpStatue = moveType == -1 ? { no: statue.no, x: statue.x - 1, y: statue.y, rotate: statue.rotate } : moveType == -2 ? { no: statue.no, x: statue.x, y: statue.y + 1, rotate: statue.rotate } : moveType == -3 ? { no: statue.no, x: statue.x + 1, y: statue.y, rotate: statue.rotate } : moveType == -4 ? { no: statue.no, x: statue.x, y: statue.y, rotate: (statue.rotate < 1 ? 1 : statue.rotate + 1) % items[statue.no].length } : { no: statue.no, x: statue.x, y: statue.y, rotate: statue.rotate };
            pic = tmpStatue.rotate == -1 ? itemsStart[tmpStatue.no] : items[tmpStatue.no][tmpStatue.rotate];
            picBefore = statue.rotate == -1 ? itemsStart[statue.no] : items[statue.no][statue.rotate];
            for (var i = 0; i < 4; i++) for (var j = 0; j < 4; j++) {
                boardArr.push({ b: document.getElementById("item" + ((tmpStatue.y + i) * 15 + tmpStatue.x + j)), c: document.getElementById("item" + ((statue.y + i) * 15 + statue.x + j)) });
                canMove = canMove && !((boardArr[boardArr.length - 1].b === null && pic[i * 4 + j] !== 0) || (boardArr[boardArr.length - 1].b !== null && parseInt(boardArr[boardArr.length - 1].b.getAttribute("val")) < 0 && pic[i * 4 + j] !== 0));
            }
            if (canMove) {
                boardArr.forEach(function (boardItem, index) { if (boardItem.c !== null && picBefore[index] !== 0) boardItem.c.setAttribute("val", 0); });
                boardArr.forEach(function (boardItem, index) { if (boardItem.b !== null && pic[index] !== 0) boardItem.b.setAttribute("val", pic[index]); });
                statue = { no: tmpStatue.no, x: tmpStatue.x, y: tmpStatue.y, rotate: tmpStatue.rotate };
            } else {
                if (moveType == -2) {
                    boardArr.forEach(function (boardItem, index) { if (boardItem.c !== null && picBefore[index] !== 0) boardItem.c.setAttribute("val", pic[index] * -1); });
                    move(parseInt(Math.random() * 7) + 1);
                    return;
                }
            }
        }
        document.onkeydown = function (e) {
            var k = (e ? e : event).keyCode;
            move(k == 38 ? -4 : k == 37 ? -1 : k == 39 ? -3 : k == 40 ? -2 : 0);
        };
        move(parseInt(Math.random() * 7) + 1);
    </script>
    <script>
        //这个函数未运行,且说明之用
        function aaaa() {
            var items = { '1': [[0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]], '2': [[0, 0, 0, 0, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0], [0, 2, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0]], '3': [[0, 0, 0, 0, 3, 3, 3, 0, 0, 0, 3, 0, 0, 0, 0, 0], [0, 0, 3, 0, 0, 0, 3, 0, 0, 3, 3, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 3, 0, 0, 0, 3, 3, 3, 0, 0, 0, 0], [0, 0, 0, 0, 0, 3, 3, 0, 0, 3, 0, 0, 0, 3, 0, 0, ]], '4': [[0, 0, 0, 0, 4, 4, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0], [4, 4, 0, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 4, 0, 4, 4, 4, 0, 0, 0, 0, 0], [4, 0, 0, 0, 4, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, ]], '5': [[0, 5, 5, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [5, 0, 0, 0, 5, 5, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0]], '6': [[6, 6, 0, 0, 0, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 6, 0, 0, 6, 6, 0, 0, 6, 0, 0, 0, 0, 0, 0]], '7': [[0, 0, 0, 0, 7, 7, 7, 0, 0, 7, 0, 0, 0, 0, 0, 0], [0, 7, 0, 0, 7, 7, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0], [0, 7, 0, 0, 7, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 7, 0, 0, 0, 7, 7, 0, 0, 7, 0, 0, 0, 0, 0, 0]] };
            //关于变量items说明,以字面量2说明,2代表长条,
            //字面量是一个二组数组,里面的每一个小数组都是4*4=16个变量,
            //如果以四个换行,可以看到,数字所代表的就是长条可能存在的形状
            //当旋转时,就在这形状中切换
            //'2': [[0, 0, 0, 0, 
            //       2, 2, 2, 2, 
            //       0, 0, 0, 0, 
            //       0, 0, 0, 0], 
            //    [0, 2, 0, 0, 
            //     0, 2, 0, 0, 
            //     0, 2, 0, 0, 
            //     0, 2, 0, 0]]

            var itemsStart = { "1": items[1][0], "5": items[5][0], "6": items[6][0], '2': [2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], '3': [3, 3, 3, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0], '4': [4, 4, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], '7': [7, 7, 7, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] };
            //关于itemsStart说明,同样以2说明,其和items是一个意思,但仅表示一开始取得这个条形时的16个变量
            //'2': [2, 2, 2, 2, 
            //    0, 0, 0, 0, 
            //    0, 0, 0, 0, 
            //    0, 0, 0, 0]


            var statue = null, divStr = '';
            for (var i = 0; i < 20; i++) for (var j = 0; j < 10; j++) divStr += '<div id="item' + (i * 15 + j + 2) + '" class="divItem" val="0"></div>';
            //document.getElementById("gameBoard").innerHTML = divStr;
            //关于创建的DIV,共400个,为什么不是0-399 而是用了 (i * 15 + j + 2)
            //请在脑中虚拟如下的结果,11的部可以是墙,0的部份就是空的部份
            //左边是2个1,右边是3个1的原因是,当长条形为竖形时占的左右空间最大,
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111
            //110000000000111

            //左边是2个1,右边是3个1的原因是,当长条形为竖形时占的左右空间最大,
            //当整个
            ////     0, 2, 0, 0, 
            ////     0, 2, 0, 0, 
            ////     0, 2, 0, 0, 
            ////     0, 2, 0, 0
            //移到最左始x=0时发生重叠,则不能移动,

            function move(moveType) {

                //moveType变量说明:
                //当于为1-7时即产生一个新的方块,并定义坐标
                //-1:左移
                //-2:下移
                //-3:右移
                //-4:旋转

                if (moveType < -5 || moveType == 0 || moveType > 7) return;
                statue = (moveType > 0) ? { no: moveType, x: 5, y: 0, rotate: -1 } : statue;
                var boardArr = [], canMove = true, pic = [], picBefore = [], item = null, itemBefore = null
                    , tmpStatue = moveType == -1 ? { no: statue.no, x: statue.x - 1, y: statue.y, rotate: statue.rotate } : moveType == -2 ? { no: statue.no, x: statue.x, y: statue.y + 1, rotate: statue.rotate } : moveType == -3 ? { no: statue.no, x: statue.x + 1, y: statue.y, rotate: statue.rotate } : moveType == -4 ? { no: statue.no, x: statue.x, y: statue.y, rotate: (statue.rotate < 1 ? 1 : statue.rotate + 1) % items[statue.no].length } : { no: statue.no, x: statue.x, y: statue.y, rotate: statue.rotate };
                //关于statue,tmpStatue,
                //statue为当前图案的状态包含四个变量,no:图案,x,y坐标,rotate旋转的编号
                //tmpStatue为根据按键产生新的图案,或坐标



                pic = tmpStatue.rotate == -1 ? itemsStart[tmpStatue.no] : items[tmpStatue.no][tmpStatue.rotate];
                picBefore = statue.rotate == -1 ? itemsStart[statue.no] : items[statue.no][statue.rotate];
                //取得图案,当moveType>0取得一个新方块时,是从itemsStart中读取,之后每按旋转,就会从items中依将读取

                for (var i = 0; i < 4; i++) for (var j = 0; j < 4; j++) {
                    //将当前图案statue与tmpStatue 在整个面板中对应的dom取出,
                    //之前关于创建的DIV,共400个,为什么不是0-399 而是用了 (i * 15 + j + 2),在这里就可能取到了null值,
                    boardArr.push({ b: document.getElementById("item" + ((tmpStatue.y + i) * 15 + tmpStatue.x + j)), c: document.getElementById("item" + ((statue.y + i) * 15 + statue.x + j)) });

                    //判断是否可移动,主要的判断逻辑
                    //当dom==null时,新图案对应的位置有数字,不可移动
                    //当dom!=null时,但面板中有数为负(向下固定后使用负值),不可移动
                    canMove = canMove && !((boardArr[boardArr.length - 1].b === null && pic[i * 4 + j] !== 0) || (boardArr[boardArr.length - 1].b !== null && parseInt(boardArr[boardArr.length - 1].b.getAttribute("val")) < 0 && pic[i * 4 + j] !== 0));
                }

                if (canMove) {
                    //如果可移动,当前图不为零的位置对应的dom的val设为0,
                    boardArr.forEach(function (boardItem, index) { if (boardItem.c !== null && picBefore[index] !== 0) boardItem.c.setAttribute("val", 0); });
                    //下一步图案不为零的位置对应的dom的val设为图案值(正值)
                    boardArr.forEach(function (boardItem, index) { if (boardItem.b !== null && pic[index] !== 0) boardItem.b.setAttribute("val", pic[index]); });
                    //重写statue值
                    statue = { no: tmpStatue.no, x: tmpStatue.x, y: tmpStatue.y, rotate: tmpStatue.rotate };
                } else {
                    if (moveType == -2) {
                        //向下,且不可移动时,当前图不为零的位置对应的dom的val设为图案值*-1(负值),
                        boardArr.forEach(function (boardItem, index) { if (boardItem.c !== null && picBefore[index] !== 0) boardItem.c.setAttribute("val", pic[index] * -1); });
                        //产生一个新方块
                        move(parseInt(Math.random() * 7) + 1);
                        return;
                    }
                }
            }
            //按键控制
            document.onkeydown = function (e) {
                var k = (e ? e : event).keyCode;
                move(k == 38 ? -4 : k == 37 ? -1 : k == 39 ? -3 : k == 40 ? -2 : 0);
            };
            //开始游戏
            move(parseInt(Math.random() * 7) + 1);

        }
    </script>

</body>
</html>



0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

[前端 3]纯Js制作俄罗斯方块游戏

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,...
  • u013034889
  • u013034889
  • 2016-04-10 00:08
  • 1936

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm
  • yaerfeng
  • yaerfeng
  • 2014-04-28 09:52
  • 52096

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

原创整理不易,转载请注明出处:史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码 代码下载地址:http://www.zuidaima.com/share/17596526...
  • oMingZi12345678
  • oMingZi12345678
  • 2014-05-08 13:16
  • 733

慕课网:Web前端面试题目及答案汇总

HTML/CSS部分 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元...
  • dongyang0311
  • dongyang0311
  • 2016-06-29 14:44
  • 11507

【C语言】实现俄罗斯方块

学习了C语言,写一个俄罗斯方块,代码绝对可以运行 大神勿笑,只适合初学者 本人也是菜鸟1、考虑怎么存储俄罗斯方块俄罗斯方块的形状一共有19种类型,如果拿数组来表示的话,可能会比较会浪费空间(网...
  • wenqiang1208
  • wenqiang1208
  • 2017-05-05 22:10
  • 1717

新手向!超详细!Java俄罗斯方块程序面向对象编程全记录

零、写在开始之前 新人,Java学习中,文章中遗漏错误之处,欢迎斧正 个人博客,完全原创 转载请注明出处。 项目全代码地址:GitHub 一、从面向对象的开始,将对象抽象成类面对...
  • sinat_32660629
  • sinat_32660629
  • 2016-10-22 13:43
  • 17881

VC实现俄罗斯方块的基本功能

游戏设计思路: 俄罗斯方块游戏设计的主要步骤为以下10个方面: (1)游戏界面的设计。 (2)俄罗斯方块的造型。 (3)俄罗斯方块的旋转。 (4)俄罗斯方块的运动情况(包括向左,向右和向下)。 (5)...
  • qq_26399665
  • qq_26399665
  • 2016-04-13 13:14
  • 1334

俄罗斯方块代码——c++实现

用codeblock实现不了,缺少库函数,windows的kpi。555 现在还么解决办法,不过代码挺好的,贴吧大神多。 2017-5-2#include #include #include#de...
  • qq_35781950
  • qq_35781950
  • 2017-05-02 23:59
  • 2196

Python俄罗斯方块改进版

1.加了方块预览部分 2.加了开始按钮 在公司实习抽空写的,呵呵。觉得Python还不错,以前觉得像个玩具语言。希望能够用它做更多大事吧!!!加油。 截图如下: 代码如下: #codin...
  • rongyongfeikai2
  • rongyongfeikai2
  • 2013-05-07 09:43
  • 2277

Microsoft visual Studio 2015 下的俄罗斯方块源程序以及修改过程

项目名称:贪吃蛇 项目语言:C++ 项目软件: Microsoft visual Studio 2015  错误1. 错误提要:错误使用标识符 错误定位: clrscr()  错误提示: 未定义标识符...
  • spiderxy
  • spiderxy
  • 2017-05-22 16:54
  • 368
    个人资料
    • 访问:1017次
    • 积分:225
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档