面向对象写的简单的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写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- Springdata mongodb 版本兼容 引起 Error [The 'cursor' option is required, except for aggregate with the explain argument
在Spring data mongodb 中使用聚合抛出异常 mongodb版本 为 3.6 org.springframework.dao.InvalidDataAccessApiUsageExce ...
- Redis进阶实践之十四 Redis-cli命令行工具使用详解第一部分
一.介绍 redis学了有一段时间了,以前都是看视频,看教程,很少看官方的东西.现在redis的东西要看的都差不多看完了.网上的东西也不多了.剩下来就看看官网的东西吧,一遍翻译,一遍测试. ...
- 安装VMware Workstation提示the msi failed的解决办法
有朋友安装VMware Workstation时出现报错,提示the msi failed等信息,原来他以前安装过绿色版.优化版的VM,但删掉后重装VM就会有这样的报错提示,如果你也遇到了相同的困扰, ...
- window下nginx注册成服务
1. a.下载windows版nginx (http://nginx.org/download/nginx-1.10.0.zip),并且下载注册服务工具, b.下载地址: http://repo.je ...
- python︱字符操作杂记（split、zip...）
字符串特别是中文在python里面还是有很多需要注意的地方. . . . 一.字符串 . . 1.字符串连接 方式一:单个字符相连用 + 就可以: 方式二:list组内相连,可以用join: 方式三: ...
- V4L2驱动的移植与应用（二）
二.V4L2的应用 下面简单介绍一下V4L2驱动的应用流程. 1. 视频采集的基本流程 一般的,视频采集都有如下流程: 2. 打开视频设备 在V4L2中,视频设备被看做一个文件.使用open函数打 ...
- Linux中的DRM
如果在搜索引擎离搜索 DRM 映入眼帘的尽是Digital Rights Managemen,也就是数字版权加密保护技术.这当然不是我们想要的解释.在类unix世界中还有一个DRM即The Direc ...
- FusionCharts 2D帕累托图
1.了解帕累托图的特性以及和其他图的共性 2.设计帕累托图页面中引入图的类型以及怎么引入到页面 Pareto2D.html: <!DOCTYPE HTML PUBLIC "-//W3C ...
- 利用apache自带的工具 分割访问日志
httpd.conf中CustomLog logs/access.log common 改成 CustomLog "|c:/apache/bin/rotatelogs.exe c:/apac ...
- 基于LVDS/M-LVDS的数据通信
现在有两种方案:一种基于 M-LVDS (基于总线的多节点通信) ,有其 特定的电气要求:另外一种是基于 LVDS 的点到点通信,具体说明如 下: 基于 M-LVDS 的总线通信: 基于 M-LVDS ...