js用类的方法写萤火虫和组合创建的方法写萤火虫

上面两张为素材图

方法一：类的方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">html{height: 100%;}body{margin: 0;padding: 0;height:100%;background: url(img/bg.jpg) no-repeat;background-size: cover;}img{/*display: block;*/position: absolute;width: 20px;height:auto;}</style></head><body><!--<img src="img/1.jpg"/>--><script src="js/startMove.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//面向对象   类的创建方法class Fireworm{constructor(){this.oImg = document.createElement("img");this.oImg.src = "img/1.jpg";}//取随机位置pos(){var cw = document.documentElement.clientWidth;var ch = document.documentElement.clientHeight;this.posx = Math.floor(Math.random()*(cw - 20));this.posy = Math.floor(Math.random()*(ch - 20));}//萤火虫显示show(){//调用位置this.pos();document.body.appendChild(this.oImg);this.oImg.style.left = this.posx + "px";this.oImg.style.top = this.posy + "px";}//萤火虫飞fly(){//再去获取下位置，保证和当前位置不一样this.pos();//调用startMove函数来控制萤火虫的运动startMove(this.oImg,{left:this.posx,top:this.posy},()=>{this.fly();})}}for(let i = 0;i < 50;i++){//控制萤火虫的个数var fireworm = new Fireworm();fireworm.show();fireworm.fly();}</script></body>
</html>

方法二：组合创建法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">html{height: 100%;}body{margin: 0;padding: 0;height:100%;background: url(img/bg.jpg) no-repeat;background-size: cover;}img{/*display: block;*/position: absolute;width: 20px;height:auto;}</style></head><body><script src="js/startMove.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//面向对象   组合创建法function Fireworm(){this.oImg = document.createElement("img");this.oImg.src = "img/1.jpg";}//获取随机位置Fireworm.prototype.getranPos = function(){//获取可视区域宽高var cw = document.documentElement.clientWidth;var ch = document.documentElement.clientHeight;//获取萤火虫的出现位置this.posx = Math.floor(Math.random()*(cw - 20));this.posy = Math.floor(Math.random()*(ch - 20));}//萤火虫展示出来Fireworm.prototype.show = function(){//展示出第一次的位置this.getranPos();document.body.appendChild(this.oImg)this.oImg.style.left = this.posx + "px";this.oImg.style.top = this.posy + "px";}//萤火虫飞Fireworm.prototype.fly = function(){//再获取下位置，保证两次位置不一样this.getranPos();//调用运动函数startMovestartMove(this.oImg,{left:this.posx,top:this.posy},()=>{this.fly();})}for(var i = 0;i < 30;i++){//控制萤火虫的个数var fireworm = new Fireworm();fireworm.show();fireworm.fly();}</script></body>
</html>

js用类的方法写萤火虫和组合创建的方法写萤火虫相关推荐

cultureinfo 类 java_为国家，语言组合创建自定义CultureInfo
我正在开发一个.net 4.5应用程序,需要多语言支持多文化等 . 以下是国家/语言的示例列表俄罗斯/俄罗斯比利时/法国比利时/荷兰对于上述所有内容,可以根据上述文化名称创建CultureIn ...
python可抓取数据包括什么_Python对JS型数据抓取有什么特别好的方法吗，pythonjs型抓取,想写一个爬虫,但是需要抓...
Python对JS型数据抓取有什么特别好的方法吗,pythonjs型抓取,想写一个爬虫,但是需要抓想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓到呢? 最好是用pyt ...
[js] 对`a == (‘1‘||‘2‘||‘3‘) ? false : true`写法进行改进，写出你优化后的方法
[js] 对a == ('1'||'2'||'3') ? false : true写法进行改进,写出你优化后的方法 ![1,2,3].includes(+a) or !['1', '2', '3']. ...
[js] 写一个 document.querySelector 的逆方法
[js] 写一个 document.querySelector 的逆方法 document.queryNode = function(node){if(node.id){return '#'+ nod ...
js自定义类，混合的构造函数/原型方式
"混合的构造函数/原型方式" 用构造函数来定义非函数属性,用原型方式定义对象的函数属性,结果所有函数都只创建一次,而每个对象都具有自由的对象属性实例. function ocar ...
js调用.net后台事件，和后台调用前台等方法总结
1. javaScript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为document.get ...
php利用ftp上传视频,PHP用FTP类上传文件视频等的简单实现方法
文件1:ftp.php<?php /** * 仿写CodeIgniter的FTP类 * FTP基本操作: * 1) 登陆; connect * 2) 当前目录文件列表; filelist * 3 ...
写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢添加评论分享按投票 ...
Mootools.js实现js的类的方式
Class MooTools框架的基类. Class Method: constructor 语法: var MyClass = new Class(properties); 参数: 性能 - 可以是 ...

js用类的方法写萤火虫和组合创建的方法写萤火虫

方法一：类的方法

方法二：组合创建法

js用类的方法写萤火虫和组合创建的方法写萤火虫相关推荐

最新文章

热门文章