使用javascript制作俄罗斯方块游戏(2)

原创 2015年02月10日 15:43:15

上一篇文章我们已经确立了具体的思路,这次就来构建代码吧!当然首先是页面,我们这样构建

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>俄罗斯方块</title>
    <style>
        .piece_I{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #990000; float: left;}
        .piece_Z{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #0000CC; float: left;}
        .piece_Zt{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #9933CC; float: left;}
        .piece_J{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #FF9900; float: left;}
        .piece_L{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #6633FF; float: left;}
        .piece_K{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #3300CC; float: left;}
        .piece_O{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #a36363; float: left;}
        .wall{width: 25px; height: 25px; background-color:#ccc; float: left;}
        .main_div{position: relative; top: -100px; left: 0}
        .main_div1{top: -100px; left: 0}
    </style>
</head>
    <body>
        <ul style="margin: 0; padding: 0; list-style-type: none">
            <li style="float: left">
                <div style="border: 1px solid black; width: 375px; height: 700px;   margin-right: 5px; overflow: hidden;">
                    <div id="mainDiv" class="main_div">
                        
                    </div>
                </div>
            </li>
            <li style="float: left">
                <div id="previewDiv" style="border: 1px solid black; width: 100px; height: 100px; background-color:#ccc; margin-bottom: 5px;"></div>
                <span id="startSpan" style="border: 1px solid black; background-color: #2f4f4f; font-weight: bold; color: #00ffff; cursor: pointer">开始游戏</span>
            </li>
            <li style="clear: both"/>
        </ul>
    </body>
</html>

其中id为mainDiv的div就是游戏区,id为previewDiv的div作为预览区,用于显示下一个将要出现的形状,id为startSpan的span用于制作按钮。

页面都很简单就不多说了,那么接下来就应该编写js代码了,我们首先来构建游戏区里面的div,代码如下:

var map = {
    row: 32,
    column: 15,
    mapColor: "wall",
    getMap: function () {
        //创建文档碎片对象
        var pieceMap = document.createDocumentFragment();
        for (var i = 0; i < this.row; i++) {
            for (var j = 0; j < this.column; j++) {
                var piece = document.createElement("div");
                piece.className = this.mapColor;
                var info = {};
                info.I = i;
                info.J = j;
                info.Val = 0;
                info.IsActive = false;
                base.setAttributeValue(piece, info);
                pieceMap.appendChild(piece);
            }
        }
        return pieceMap;
    }
};


var base = {
    //获取元素dom对象
    getE: function (elem) {
        if (elem.nodeType && elem.nodeType === 1) {
            return elem;
        } else {
            return document.getElementById(elem);
        }
    },
    //获取0-max范围的随机数
    random: function (/*随机最大值,不包含此值*/max) {
        return window.parseInt(Math.random() * max);
    },
    //设置元素中属性的值
    setAttributeValue: function (elem, obj) {
        var objString = "";
        for (var key in obj) {
            if (typeof obj[key] === "string") {
                objString += "," + key + ":'" + obj[key] + "'";
            } else {
                objString += "," + key + ":" + obj[key];
            }
        }
        elem.setAttribute("tag", "{" + objString.substring(1) + "}");
    },
    //获取属性中的值
    getAttributeValue: function (elem) {
        return eval("(" + elem.getAttribute("tag") + ")");
    },
    //获取最终样式的值
    getFinalStyle: function (elem, css) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(elem, null)[css];
        } else if (elem.currentStyle) {
            return elem.currentStyle[css];
        } else {
            return elem.style[css];
        }
    }
};

创建一个map对象和base对象,map对象中的getMap方法将返回一个文档碎片对象,其中包含已经创建好的div,每个div上设置一个自定义info属性,用于保存当前div的基本信息。

接下来再来创建游戏中的方块对象,保存游戏中每个方块的信息(及游戏中需要操作的方块)如下

var keys = ["|", "-", "Z", "N", "Zt", "Nt", "J", "Jt", "Jt1", "Jt2", "L", "Lt", "Lt1", "Lt2", "K", "Kt", "Kt1", "Kt2", "O"];

var tetrisShape = {
    "|": {
        Offset: {
            Top: 0,
            Bottom: 0,
            Left: 1,
            Right: 2
        },
        CurrentTurn: "|",
        ShapeColor: "piece_I",
        NextTurn: "-",
        Shape:
        [
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0]
        ]
    },
    "-":
    {
        Offset:
        {
            Top: 1,
            Bottom: 2,
            Left: 0,
            Right: 0
        },
        CurrentTurn: "-",
        ShapeColor: "piece_I",
        NextTurn: "|",
        Shape:
        [
            [0, 0, 0, 0],
            [1, 1, 1, 1],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ]
    },
    "Z":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 0,
            Right: 1
        },
        CurrentTurn: "Z",
        ShapeColor: "piece_Z",
        NextTurn: "N",
        Shape:
        [
            [0, 0, 0, 0],
            [1, 1, 0, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "N":
    {
        Offset:
        {
            Top: 0,
            Bottom: 1,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "N",
        ShapeColor: "piece_Z",
        NextTurn: "Z",
        Shape:
        [
            [0, 0, 1, 0],
            [0, 1, 1, 0],
            [0, 1, 0, 0],
            [0, 0, 0, 0]
        ]
    },
    "Zt":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 0,
            Right: 1
        },
        CurrentTurn: "Zt",
        ShapeColor: "piece_Zt",
        NextTurn: "Nt",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 1, 1, 0],
            [1, 1, 0, 0],
            [0, 0, 0, 0]
        ]
    },
    "Nt":
    {
        Offset:
        {
            Top: 0,
            Bottom: 1,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "Nt",
        ShapeColor: "piece_Zt",
        NextTurn: "Zt",
        Shape:
        [
            [0, 1, 0, 0],
            [0, 1, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "J":
    {
        Offset:
        {
            Top: 0,
            Bottom: 1,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "J",
        ShapeColor: "piece_J",
        NextTurn: "Jt",
        Shape:
        [
            [0, 0, 1, 0],
            [0, 0, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "Jt":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 1,
            Right: 0
        },
        CurrentTurn: "Jt",
        ShapeColor: "piece_J",
        NextTurn: "Jt1",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 1, 1],
            [0, 0, 0, 0]
        ]
    },
    "Jt1":
    {
        Offset:
        {
            Top: 1,
            Bottom: 0,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "Jt1",
        ShapeColor: "piece_J",
        NextTurn: "Jt2",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 1, 1, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0]
        ]
    },
    "Jt2":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 0,
            Right: 1
        },
        CurrentTurn: "Jt2",
        ShapeColor: "piece_J",
        NextTurn: "J",
        Shape:
        [
            [0, 0, 0, 0],
            [1, 1, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "L":
    {
        Offset:
        {
            Top: 0,
            Bottom: 1,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "L",
        ShapeColor: "piece_L",
        NextTurn: "Lt",
        Shape:
        [
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "Lt":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 1,
            Right: 0
        },
        CurrentTurn: "Lt",
        ShapeColor: "piece_L",
        NextTurn: "Lt1",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 1, 1, 1],
            [0, 1, 0, 0],
            [0, 0, 0, 0]
        ]
    },
    "Lt1":
    {
        Offset:
        {
            Top: 1,
            Bottom: 0,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "Lt1",
        ShapeColor: "piece_L",
        NextTurn: "Lt2",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 1, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 1, 0]
        ]
    },
    "Lt2":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 0,
            Right: 1
        },
        CurrentTurn: "Lt2",
        ShapeColor: "piece_L",
        NextTurn: "L",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 0, 1, 0],
            [1, 1, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "K":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 0,
            Right: 1
        },
        CurrentTurn: "K",
        ShapeColor: "piece_K",
        NextTurn: "Kt",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 1, 0, 0],
            [1, 1, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "Kt":
    {
        Offset:
        {
            Top: 0,
            Bottom: 1,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "Kt",
        ShapeColor: "piece_K",
        NextTurn: "Kt1",
        Shape:
        [
            [0, 1, 0, 0],
            [0, 1, 1, 0],
            [0, 1, 0, 0],
            [0, 0, 0, 0]
        ]
    },
    "Kt1":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 0,
            Right: 1
        },
        CurrentTurn: "Kt1",
        ShapeColor: "piece_K",
        NextTurn: "Kt2",
        Shape:
        [
            [0, 0, 0, 0],
            [1, 1, 1, 0],
            [0, 1, 0, 0],
            [0, 0, 0, 0]
        ]
    },
    "Kt2":
    {
        Offset:
        {
            Top: 0,
            Bottom: 1,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "Kt2",
        ShapeColor: "piece_K",
        NextTurn: "K",
        Shape:
        [
            [0, 0, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 0, 0]
        ]
    },
    "O":
    {
        Offset:
        {
            Top: 1,
            Bottom: 1,
            Left: 1,
            Right: 1
        },
        CurrentTurn: "O",
        ShapeColor: "piece_O",
        NextTurn: "O",
        Shape:
        [
            [0, 0, 0, 0],
            [0, 1, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0]
        ]
    }
};
每一个类代表一个方块,包含了方块的偏移量,颜色、以及通过一个二维数组来表示的形状等,这下一个基本的代码就完成,我们即将进入较为复杂的阶段,请看下一篇文章。



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

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

使用Qt开发俄罗斯方块游戏

使用Qt开发俄罗斯方块游戏,可能大家都比较感兴趣吧。那么就快看下面的详细讲解吧! 其实在Qt Creator中已经有了俄罗斯方块的例子,大家可以在帮助中搜索Tetrix进行查看。其内容如下: ...
  • imxiangzi
  • imxiangzi
  • 2016年02月15日 11:37
  • 2142

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

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

使用javascript制作俄罗斯方块游戏(3)

之前已经建立好了基本的结构,现在可以真正进入设计编码阶段,在此我们建立一个js类,专门用于控制方块的移动和反转,代码如下function MoveShape(controls) { this....
  • sq111433
  • sq111433
  • 2015年02月11日 12:37
  • 893

使用javascript制作俄罗斯方块游戏(1)

一直想用js来做个游戏,这次总算得偿所愿,做了一个俄罗斯方块,也当是对javascript的一次有益尝试,对提高自己的js水平有很大的帮助,当然我也很愿意分享一下此次制作游戏的心得,和大家共勉。 既然...
  • sq111433
  • sq111433
  • 2015年02月10日 09:48
  • 1191

<Unity3D>使用Unity来制作俄罗斯方块游戏

备注:该方法并非本人原创,我也是根据别人的代码来学习的。 1. 操作环境 Unity3D 4.1.0版本、Win 7 2. 思路分析 该方法中,只有2个脚本,一个是控制方块的(Block.cs)...
  • zuoyamin
  • zuoyamin
  • 2013年10月28日 11:33
  • 8388

使用Unity制作俄罗斯方块游戏

1. 操作环境    Unity3D 4.1.0版本、Win 7    备注:该方法并非本人原创,我也是根据别人的代码来学习的。 2. 思路分析    该方法中,只有2个脚本,一个是控制方块的...
  • xiaodiao062
  • xiaodiao062
  • 2014年06月13日 16:18
  • 1325

使用javascript开发的小游戏-俄罗斯方块

  • 2010年12月18日 14:36
  • 13KB
  • 下载

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

http://www.zuidaima.com/share/1759652641295360.htm 直接上效果图: 通过左右下控制方向,上改变形状。 gam...
  • leeo1010
  • leeo1010
  • 2014年05月30日 11:13
  • 1063

史上短小精悍的JavaScript编写的俄罗斯方块游戏

史上短小精悍的JavaScript编写的俄罗斯方块游戏 俄罗斯方块
  • zhongyi_yang
  • zhongyi_yang
  • 2016年04月14日 12:00
  • 381
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用javascript制作俄罗斯方块游戏(2)
举报原因:
原因补充:

(最多只允许输入30个字)