面向对象写的简单的colors rain

最新推荐文章于 2024-05-06 10:52:56 发布

dnie9828

最新推荐文章于 2024-05-06 10:52:56 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/zzh965390267/p/8023162.html

版权

	<!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.οnmοusemοve=function(ev){
	var ev=window.ev\|\|ev;
	x= ev.clientX;
	y=ev.clientY;
	console.log(x,y)
	}
	</script>
	</html>