<!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. SpringBoot idea maven打包war

    什么都不需要配置,跟着做! pom.xml修改打包类型为war <packaging>war</packaging> 排除内置Tomcat <!--因配置外部TOMCAT ...

  2. tcp/ip 卷一 读书笔记（1）tcp／ip 概述

    TCP/IP协议概述 术语 广域网 WAN 局域网 LAN TCP/IP四层网络模型 TCP/IP通常被认为是一个四层协议系统 网络接口层 包括arp,rarp协议,包括操作系统中的网卡驱动程序和对应 ...

  3. 转： JavaScript 获取对象属性和方法

    一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...

  4. 什么是 JSX

    JSX 即 JavaScript XML--一种在 React 组件内部构建标签的类 xml 语法.React 在不使用 JSX 的情况下一样可以工作,然而使用 JSX 可以提高组件的可读性,因此推荐 ...

  5. 关系网络理论︱细讲中介中心性（Betweeness Centrality）

    关系网络在我认为都是一种很简单暴力地能挖掘人群特征关系的一种方式,特别今天去听了一场关于AI与金融领域的结合,里面提到了拓扑分析其实就是关系网络的解释.我在之前的文章( R语言︱SNA-社会关系网络- ...

  6. Bootloader Project

    Bootloader Project From OMAPpedia Jump to: navigation, search Contents [hide] 1 OMAP Bootloader Over ...

  7. R语言︱决策树族——随机森林算法

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:有一篇<有监督学习选择深度学习 ...

  8. CentOS中配置lvm存储

    磁盘添加 vmware workstation 虚拟机为例 1.关闭虚拟机,在虚拟机设置中添加3块硬盘. 2.首先创建物理卷  pvcreate /dev/sdb /dev/sdc Physical ...

  9. Text Document Analysis CodeForces - 723B

    Modern text editors usually show some information regarding the document being edited. For example, ...

  10. Trouble HDU - 4334

    Hassan is in trouble. His mathematics teacher has given him a very difficult problem called 5-sum. P ...