面向对象写的简单的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写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- 企业内部DNS跨国配置案例
背景介绍:总公司与北京分公司均由总公司进行统一管理.总公司的主从DNS担任解析总公司服务器与北京分公司的服务器解析任务.总公司DNS委派其他两个公司管理自己域下的服务器解析任务.要求任何一个节点都能解 ...
- C语言结构体定义的几种方法
什么是结构体? 在C语言中,结构体(struct)指的是一种数据结构,是C语言中聚合数据类型(aggregate data type)的一类.结构体可以被声明为变量.指针或数组等,用以实现较复杂的数据 ...
- Linux基础二
linux命令分类 内部命令:属于shell解释器 外部命令:独立于shell解释器 检查命令类型 type:检查命令字的类型 [root@localhost ~]# type ls ls 是 `ls ...
- DM6446 uboot分析
1. 顶层目录下的Makefile 按照配置顺序: davinci_config : unconfig @./mkconfig $(@:_config=) arm arm926ejs davin ...
- Android View绘制和显示原理简介
现在越来越多的应用开始重视流畅度方面的测试,了解Android应用程序是如何在屏幕上显示的则是基础中的基础,就让我们一起看看小小屏幕中大大的学问.这也是我下篇文章--<Android应用流畅度测 ...
- 笔记︱决策树族——梯度提升树(GBDT)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本笔记来源于CDA DSC,L2-R语言课程所 ...
- 错误代码: 1111 Invalid use of group function
1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:update t_user_info t inner join t_pro_ ...
- linux iscsi配置
iSCSI 是一种 SAN的设备而 SAN的设备主要是提供 Server 存储体的空间.相较于传统的 SAN 是以光纤为传输媒体而 iSCSI(Internet SCSI)他是 IP-based 的数 ...
- Linux之网络管理
一.网络基础 1)ISO/OSI七层模型简介 ISO:国际标准化组织 OSI:开放系统互联模型 IOS:苹果操作系统(在计算机网络中,IOS是互联网操作系统,是思科公司为其网络设备开发的操作维护系统) ...
- Xcode 9.0 新增功能大全
Xcode是用于为Apple TV,Apple Watch,iPad,iPhone和Mac创建应用程序的完整开发人员工具集.Xcode开发环境采用tvOS SDK,watchOS SDK,iOS SD ...