面向对象写的简单的colors rain
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Colors Rain</title> | |
| </head> | |
| <style> | |
| html,body{ | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| background: #000; | |
| } | |
| .star{ | |
| background: url(bullet.png); | |
| } | |
| </style> | |
| <body> | |
| </body> | |
| <script> | |
| var ww=window.innerWidth; | |
| var hh=window.innerHeight; | |
| var x,y; | |
| function snow(){ | |
| this.x=Math.random()*ww; | |
| this.y=Math.random()*hh; | |
| this.r=Math.random()*255; | |
| this.g=Math.random()*255; | |
| this.b=Math.random()*255; | |
| this.v=Math.random()*10+5; | |
| this.w=1; | |
| this.h=Math.random()*40+15; | |
| this.color='#'+('00000'+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6) | |
| this.create() | |
| } | |
| snow.prototype={ | |
| create:function(){ | |
| this.node =document.createElement('div'); | |
| this.node.style.position='absolute'; | |
| this.node.style.left=this.x+'px'; | |
| this.node.style.width=this.w+'px'; | |
| this.node.style.height=this.h+'px'; | |
| this.node.style.transform='rotateX(30deg) translateX(-10px)' | |
| this.node.style.backgroundColor=this.color; | |
| document.body.appendChild(this.node); | |
| }, | |
| move:function(){ | |
| this.y=this.y+this.v; | |
| if(this.y>=hh){ | |
| this.y=0; | |
| } | |
| // if(y-10>this.y>y+10||x-10<this.x<x+10){ | |
| // this.v=0; | |
| // ; | |
| // } | |
| this.x=this.x+this.v*Math.cos(-30); | |
| if(this.x>=ww){ | |
| this.x=0; | |
| } | |
| this.node.style.left=this.x+'px'; | |
| this.node.style.top=this.y*0.9+'px'; | |
| } | |
| } | |
| function gosnow(){ | |
| var snowarr=[]; | |
| for(var i=0;i<150;i++){ | |
| var snows= new snow(); | |
| snowarr.push(snows); | |
| } | |
| setInterval(function(){ | |
| for(var j=snowarr.length-1;j>=0;j--){ | |
| snowarr[j].move() | |
| } | |
| },1000/30) | |
| } | |
| gosnow( | |
| ) | |
| document.onmousemove=function(ev){ | |
| var ev=window.ev||ev; | |
| x= ev.clientX; | |
| y=ev.clientY; | |
| console.log(x,y) | |
| } | |
| </script> | |
| </html> | |
面向对象写的简单的colors rain的更多相关文章
- linux设备驱动归纳总结（十一）：写个简单的看门狗驱动【转】
本文转载自:http://blog.chinaunix.net/uid-25014876-id-112879.html linux设备驱动归纳总结(十一):写个简单的看门狗驱动 xxxxxxxxxxx ...
- linux设备驱动归纳总结（五）：4.写个简单的LED驱动【转】
本文转载自:http://blog.chinaunix.net/uid-25014876-id-84693.html linux设备驱动归纳总结(五):4.写个简单的LED驱动 xxxxxxxxxxx ...
- 【Linux开发】linux设备驱动归纳总结（十一）：写个简单的看门狗驱动
linux设备驱动归纳总结(十一):写个简单的看门狗驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 【Linux开发】linux设备驱动归纳总结（五）：4.写个简单的LED驱动
linux设备驱动归纳总结(五):4.写个简单的LED驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
- 用C#Winform写个简单的批量清空文件内容和删除文件的小工具
用C#Winform写个简单的批量清空文件内容和删除文件的小工具 本文介绍这个简单得不能再简单的小项目.做这个项目,有以下目的. 1 当然是做个能用的工具 2 学习使用Github 关于用VS2013 ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- (转载,但不知道谁原创)获取SPRING 代理对象的真实实例,可以反射私有方法,便于测试
/** * 获取 目标对象 * @param proxy 代理对象 * @return * @throws Exception */ public static Object getTarget(Ob ...
- 使用C#解决部分Win8.1系统窗口每隔几秒失去焦点的问题【转】
使用了Win8.1 With Update 1后,发现重启系统后,当前激活的窗口总是每隔几秒失去焦点,过0.5~1秒焦点回来,导致输入无法正常工作,严重影响使用心情和效率. 在网上找了很久,也没找到相 ...
- 命令行下编译Wordcount
1. 编辑WordCount.java文件,在下载的hadoop安装包里有WordCount的例子 http://mirrors.hust.edu.cn/apache/hadoop/common/ha ...
- 【其他】Objective-C 内存管理学习总结
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/OC_CG.html 最近学习了Objective-C语言(以下简称OC),其他的都还好,唯有它的内存管理让我不知所 ...
- SystemVerilog语言简介(二)
6. 用户定义的类型 Verilog不允许用户定义新的数据类型.SystemVerilog通过使用typedef提供了一种方法来定义新的数据类型,这一点与C语言类似.用户定义的类型可以与其它数据类型一 ...
- 小说接入UC浏览器内核技术对话（一）
质辛@灿岩 质辛跟我们说一下那个删除文件的逻辑吧质辛@灿岩 应该不是删除cache下所有文件吧?质辛@智鹰 提供一下我们的临时文件完整路径给 灿岩吧质辛@智鹰 是负责我们ucsdk的 技术对接灿 ...
- FusionCharts饼图中label值太长怎么解决
FusionCharts饼图中label值太长怎么解决 1.使用hoverText属性 <?xml version="1.0" encoding="UTF-8&qu ...
- Java之List排序出错
Java之List排序出错 Bound mismatch: The generic method sort(List<T>) of type Collections is not appl ...
- 深度优先搜索DFS和广度优先搜索BFS简单解析（新手向）
深度优先搜索DFS和广度优先搜索BFS简单解析 与树的遍历类似,图的遍历要求从某一点出发,每个点仅被访问一次,这个过程就是图的遍历.图的遍历常用的有深度优先搜索和广度优先搜索,这两者对于有向图和无向图 ...
- EntityFramework Core 2.0 Explicitly Compiled Query（显式编译查询）
前言 EntityFramework Core 2.0引入了显式编译查询,在查询数据时预先编译好LINQ查询便于在请求数据时能够立即响应.显式编译查询提供了高可用场景,通过使用显式编译的查询可以提高查 ...