`

坦克大战中的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;
}

 

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

 


 

 

  • 大小: 1.5 KB
  • 大小: 2.7 KB
分享到:
评论

相关推荐

    坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )

    《坦克大战js小游戏源码:HTML5重构经典游戏体验》 HTML5的崛起为游戏开发开辟了新的领域,其中就包括对经典游戏的重新诠释,比如我们熟知的“坦克大战”。这款HTML5坦克大战游戏代码,是利用HTML、CSS和JavaScript...

    js实现坦克大战 javascript

    本项目中,我们利用JavaScript实现了一个简单的坦克大战游戏,玩家可以通过键盘控制坦克移动和发射炮弹。 首先,我们要了解JavaScript中的按键事件。在JavaScript中,我们可以使用`addEventListener`方法来监听键盘...

    坦克大战纯JS源码

    在坦克大战的JS源码中,JavaScript被用作主要的编程语言,负责处理游戏逻辑、用户交互以及图形渲染。JS是一种解释型、基于原型的动态语言,其在浏览器环境中运行,使得游戏可以直接在网页上运行,无需额外安装插件。...

    坦克大战js坦克大战

    "坦克大战js坦克大战"是一款基于JavaScript开发的网页游戏,它将经典的坦克战斗场景移植到浏览器环境中,让玩家可以无需安装任何软件,在网页上就能体验到激动人心的坦克对战。这款游戏利用HTML作为结构标记语言,...

    用 js+html 实现 坦克大战 游戏

    相比于网上一般的坦克大战,我用js实现的坦克大战增加了很多新功能。 主要功能如下: 1、选关、跳关功能,还设置了Boss关,Boss关的难度有“A级”、“B级”、“S级”可供玩家选择,每十关设置一个Boss关 2、生命值,...

    原生js编写坦克大战

    通过这个原生JS编写的坦克大战项目,初学者不仅可以学习到JavaScript的基本语法和特性,还能掌握游戏开发中的关键技术和设计理念。实践中遇到的问题和解决过程,将极大地提升你的编程能力和问题解决能力。希望这个...

    js3D坦克大战

    JS3D坦克大战是一款完全使用JavaScript技术开发的3D游戏,它展示了WebGL的强大潜力和JavaScript在游戏开发中的广泛应用。游戏提供了逼真的坦克效果,包括行进、转向、玩家选择、对战模式、雷达系统以及复活等功能,...

    C++大作业坦克大战源码.zip

    C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码。C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业...

    坦克大战JavaScript源码

    JavaScript库如Howler.js可以帮助我们在游戏中添加和控制音效,比如坦克开火、碰撞时的声音反馈。 通过详细分析坦克大战JavaScript源码,不仅能学习到JavaScript的基础语法和高级特性,还能掌握游戏开发中的关键...

    坦克大战地图生成代码

    在本文中,我们将深入探讨如何使用C++编程语言和OpenCV库来实现“坦克大战”游戏中的地图生成。首先,我们需要理解坦克大战的基本概念,它是一款经典的双人对战游戏,玩家通过控制坦克消灭敌人并保护自己的基地。...

    js坦克大战(初级新手使用)

    【js坦克大战】是一款非常适合初级新手入门的编程实践项目,它使用JavaScript这一广泛应用于网页开发的脚本语言来实现。JavaScript是一种轻量级、解释型的编程语言,主要用于客户端的网页交互,但随着Node.js的出现...

    坦克大战的js代码

    坦克大战的javascript代码,可以打子弹哦

    经典坦克大战js版源码

    【坦克大战js版源码解析】 ...通过分析这个坦克大战的js源码,开发者不仅可以学习到游戏开发的基本原理,还能深入理解JavaScript在实际项目中的应用,同时锻炼到面向对象编程、数据结构和算法等多个方面的技能。

    html+css+js实现PC端坦克大战.rar

    《HTML+CSS+JS实现PC端坦克大战》 在当今的Web开发领域,利用HTML、CSS和JavaScript构建交互式游戏已经变得越来越普遍。本项目"坦克大战"正是一个典型的实例,它展示了如何运用这些基础技术来创建一个具有趣味性的...

    javascript(html5)编写的坦克大战

    在坦克大战游戏中,JavaScript主要负责游戏逻辑的控制,如坦克移动、射击、碰撞检测等。同时,JavaScript通过DOM(文档对象模型)来操作HTML元素,更新游戏状态,如显示得分、血量等信息。 三、Canvas绘图技术 ...

    Js简单坦克大战

    《JS简单坦克大战:探索面向对象编程在游戏开发中的应用》 在JavaScript的世界里,"Js简单坦克大战"是一款利用面向对象编程思想构建的小型游戏,它为开发者提供了一个直观的平台来理解和实践面向对象的设计模式。...

    Python坦克大战源代码坦克大战.zip

    【Python坦克大战源代码坦克大战.zip】是一个包含Python语言实现的坦克大战小游戏的源代码集合。这个项目旨在提供一个互动的、基于文本的娱乐体验,让玩家能够享受经典的坦克战斗游戏,同时学习和理解Python编程的...

    js坦克大战改进版

    采用js面向对象、面向切面的...Tank.js --- 坦克JS,坦克电脑模式的算法在startPcMode函数中 Bullet.js --- 子弹JS index.js --- 生成需要的对象及控制键盘操作的JS Aop.js --- 通过切面的方式来维护一些独立的功能

Global site tag (gtag.js) - Google Analytics