面向对象写的简单的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写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- Activity的生命周期& 启动模式
1.Activity的生命周期 生命周期这个事情,是android工程师最基础的知识,所以今天要讲的是一些不一样的东西. 1.1 OnStart,OnResume,OnPause,OnStop 他们的 ...
- Markdown语法你都会了吗？
关于Markdown,它可以说是程序员公认最好的文档语言了,没有之一!我相信经常写文章或者开发文档的大佬们都对其能生成简洁.大方.雅观的文档都深有体会,它的强大是毋庸置疑的.它编写的文档不但能生成ht ...
- Docker系列一：Docker基本概念及指令介绍
1. Docker是什么? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用 ...
- Centos中hive/hbase/hadoop/mysql实际操作及问题总结
目录 Hive中文乱码问题 hive和hbase的版本不一致 Ambari hive插入Hbase出错 Hive0.12和Hbase0.96不兼容,重新编译hive0.12.0 hiveserver不 ...
- 安装CentOS7
安装环境:虚拟机*1 使用软件:CentOS7镜像*1 安装过程: 虚拟机配置步骤(主要部分): 1.安装为Linux:CentOS 64位 2.分配1G内存(若需求大可根据实际情况分配) 3.分配4 ...
- 我的Java设计模式-单例模式
就算不懂设计模式的兄弟姐妹们,想必也听说过单例模式,并且在项目中也会用上.但是,真正理解和熟悉单例模式的人有几个呢?接下来我们一起来学习设计模式中最简单的模式之一--单例模式 一.为什么叫单例模式? ...
- REALTEK 刷机方法 法
REALTEK 是通用板最多的IC 方案之一,什么常说的2025 2270 2023 2033 2525 2545 2660 2280 2662 2670 2672 2674 2661 2668 ...
- vxWorks BSP主要文件目录的组成及主要文件的作用
vxWorks BSP主要文件目录的组成及主要文件的作用 1.目录target/config/All: 这个目录下的文件是所有BSP文件共享的,不是特别需要不要更改里面的任何文件. a.configA ...
- Oracle 子程序参数模式,IN,OUT,IN OUT
IN :用于传入参数. 在调用过程的时候,实参传到该过程中. 在过程内部,形参只读且不能更改. 在过程执行完毕,返回调用环境时候,实参到的值也不会改变 --带IN参数的过程,赋值. create or ...
- 畅通工程再续 HDU - 1875
相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问题当然是交通问题,政 ...