背景说明:
按照《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; }
最后是这个例子的源代码:
相关推荐
js实现坦克大战按方向键移动坦克,按空格键发炮
相比于网上一般的坦克大战,我用js实现的坦克大战增加了很多新功能。 主要功能如下: 1、选关、跳关功能,还设置了Boss关,Boss关的难度有“A级”、“B级”、“S级”可供玩家选择,每十关设置一个Boss关 2、生命值,...
C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码。C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业...
利用js实现坦克大战的小游戏,在网页上就能运行
坦克大战的javascript代码,可以打子弹哦
经典坦克大战js版源码,和原版一模一样。
坦克大战纯JS源码很好的源代码。 快下来吧, 源码
配套坦克大战,小工具之地图生成,简单的直方图匹配,抛砖引玉。
采用js面向对象、面向切面的...Tank.js --- 坦克JS,坦克电脑模式的算法在startPcMode函数中 Bullet.js --- 子弹JS index.js --- 生成需要的对象及控制键盘操作的JS Aop.js --- 通过切面的方式来维护一些独立的功能
期末作业课程设计使用java开发的坦克大战小游戏源码期末作业课程设计使用java开发的坦克大战小游戏源码期末作业课程设计使用java开发的坦克大战小游戏源码期末作业课程设计使用java开发的坦克大战小游戏源码期末作业...
Python坦克大战小游戏源程序,可实现单人及双人模式,程序入口:Game5.py
纯前端实现PC端坦克大战,可一个人玩耍,也可以两个人玩耍,下载源码即可开启坦克大战之旅。
js坦克大战(初级新手使用), 第一次用js写的游戏,比较简单。
纯JS编写的坦克大战Html文件
基于Javascript的以面向对象方式编写的简单的坦克大战 对于理解面向对象的编程思想有很大的帮助。 定义了坦克、子弹等类,实现了攻击判定等功能
原生JS编写的坦克大战小游戏代码