坦克大战中的js(01)—js生成伪随机数应用

背景说明：

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

图片资源

 （注：所有用到的图片资源都来源于etherdream 的 坦克大战作品：http://bbs.csdn.net/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;
}

 

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