坦克大战中的js(01)—js生成伪随机数应用-优快云博客

本文介绍了一种使用JavaScript实现的随机砖墙样式生成方法。通过点击按钮，可以在页面上随机展示15种不同的砖墙样式之一，每种样式对应一个四位二进制数。该方法运用了Math.random()函数来生成随机数，并将其转换为二进制表示。

背景说明：

按照《90坦克大战》，方格砖墙的样式组合共有15种，

图片资源

（注：所有用到的图片资源都来源于etherdream 的坦克大战作品：http://bbs.youkuaiyun.com/topics/380132638）

现在要实现在页面上有一个div，点一个刷新按钮，可以随机的显示这15中砖墙样式中的任何一种。主要

用到了Math.random方法。

关键代码如下：

$('button').click(function(){
            //生成1-15的随机数
            var n = Math.floor(Math.random() * 15) + 1;
            // 将n转成二进制
            var b = n.toString(2);
            // 不足4位前面补0，达到4位
            b = ("000" + b).slice(-4);
            // 设置方形砖墙div的class
            $('.brick').attr("class", "brick brick"+b);
        });

说明：

上面的brick样式，共有15中定义，定义按照四位二进制数的形式。可以把一个砖墙分成4块，上下各两块。比如：
代表二进制数”1011“。

样式定义如下：

div.brick{
    width: 32px;
    height: 32px;
    border: 1px solid #ffffff;
    margin-bottom: 4px;
    position: absolute;
}
div.brick.brick1111{
    background: url(../img/Terr.png) no-repeat -1120px 0px;
}
div.brick.brick0111{
    background: url(../img/Terr.png) no-repeat -1088px 0px;
}
div.brick.brick1011{
    background: url(../img/Terr.png) no-repeat -1056px 0px;
}
div.brick.brick0011{
    background: url(../img/Terr.png) no-repeat -1024px 0px;
}
div.brick.brick1101{
    background: url(../img/Terr.png) no-repeat -992px 0px;
}
div.brick.brick0101{
    background: url(../img/Terr.png) no-repeat -960px 0px;
}
div.brick.brick1001{
    background: url(../img/Terr.png) no-repeat -928px 0px;
}
div.brick.brick0001{
    background: url(../img/Terr.png) no-repeat -896px 0px;
}
div.brick.brick1110{
    background: url(../img/Terr.png) no-repeat -864px 0px;
}
div.brick.brick0110{
    background: url(../img/Terr.png) no-repeat -832px 0px;
}
div.brick.brick1010{
    background: url(../img/Terr.png) no-repeat -800px 0px;
}
div.brick.brick0010{
    background: url(../img/Terr.png) no-repeat -768px 0px;
}
div.brick.brick1100{
    background: url(../img/Terr.png) no-repeat -736px 0px;
}
div.brick.brick0100{
    background: url(../img/Terr.png) no-repeat -704px 0px;
}
div.brick.brick1000{
    background: url(../img/Terr.png) no-repeat -672px 0px;
}

最后是这个例子的源代码：