<!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的更多相关文章

  1. linux设备驱动归纳总结（十一）：写个简单的看门狗驱动【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-112879.html linux设备驱动归纳总结(十一):写个简单的看门狗驱动 xxxxxxxxxxx ...

  2. linux设备驱动归纳总结（五）：4.写个简单的LED驱动【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-84693.html linux设备驱动归纳总结(五):4.写个简单的LED驱动 xxxxxxxxxxx ...

  3. 【Linux开发】linux设备驱动归纳总结（十一）：写个简单的看门狗驱动

    linux设备驱动归纳总结(十一):写个简单的看门狗驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  4. 【Linux开发】linux设备驱动归纳总结（五）：4.写个简单的LED驱动

    linux设备驱动归纳总结(五):4.写个简单的LED驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  5. 用Python写一个简单的Web框架

    一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...

  6. 如何写一个简单的http服务器

    最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...

  7. 如何写一个简单的shell

    如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...

  8. 用C#Winform写个简单的批量清空文件内容和删除文件的小工具

    用C#Winform写个简单的批量清空文件内容和删除文件的小工具 本文介绍这个简单得不能再简单的小项目.做这个项目,有以下目的. 1 当然是做个能用的工具 2 学习使用Github 关于用VS2013 ...

  9. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

随机推荐

  1. 使用基于Android网络通信的OkHttp库实现Get和Post方式简单操作服务器JSON格式数据

     目录 前言 1 Get方式和Post方式接口说明 2 OkHttp库简单介绍及环境配置 3 具体实现 前言 本文具体实现思路和大部分代码参考自<第一行代码>第2版,作者:郭霖:但是文中讲 ...

  2. Zookeeper笔记1-CAP/BASE理论

    分布式系统八大谬论: 1.网络相当可靠 2.延迟为0 3.传输带宽是无限的 4.网络相当安全. 5.拓扑结构不会改变 6.必须要有一名管理员 7.传输成本为0 8.网络同质化. 分布式最常出现的问题: ...

  3. Oracle三层嵌套分页查询示例及rownum原理

    eg:COMPONENT表数据如下 1.执行select * from (select com.*,rownum  r_num  from (select * from COMPONENT)com w ...

  4. python 循环语句 函数 模块

    python循环语句 while循环语法结构 当需要语句不断的重复执行时,可以使用while循环 while expression: while_suite 语句ehile_suite会被连续不断的循 ...

  5. R语言︱文件读入、读出一些方法罗列（批量xlsx文件、数据库、文本txt、文件夹）

    笔者寄语:小规模的读取数据的方法较为简单并且多样,但是,批量读取目前看到有以下几种方法:xlsx包.RODBC包.批量转化成csv后读入. R语言中还有一些其他较为普遍的读入,比如代码包,R文件,工作 ...

  6. C#中的匿名函数使用，类名<T>

    C#中有个叫做"泛型"的集合,就是说只是个外壳,到底是int,string,bool还是什么类型,都可以按照自己的要求进行定义集合,所以我们用个"T"表示. 请 ...

  7. tar、scp、sftp、rsync简单使用

    tar -c 创建一个归档文件 -z 指定压缩格式为gzip -v 显示详细信息 -f 制定文件明 -j 指定压缩格式为bz2 -J 指定压缩格式为 xz -C 压缩.解压至某个目录 -x 自动识别压 ...

  8. hdu5860 Death Sequence

    这题一开始写的线段数是从中间开始查找 k个 导致是nlogn 每次查找应该都是从头找每次找的个数不同就好了 还有一种递推的写法我放下面了 #include<bits/stdc++.h> u ...

  9. 前台序列化传过来的值，后台获取之后封装到map当中，让后在转化成json格式，最后在把json里面的参数里面的某一个值进行分割，最后在存到json格式的数据中去。

    一,html脚本 <script type="text/javascript"> $(function() { $(".btn-submit").c ...

  10. RobotFramework自动化测试框架的基础关键字（一）

    1.1.1        如何搜索RobotFramework的关键字 有两种方式可以快速的打开RIDE的关键字搜索对话框 1.选择菜单栏Tools->Search Keywords,然后会出现 ...