文档章节

HTML5 重力球

我们取个名字叫珍惜
 我们取个名字叫珍惜
发布于 2016/11/10 20:41
字数 626
阅读 3
收藏 0

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="script/jquery-1.8.0.js"></script>

<style type="text/css">

*{

    margin:0px;

    padding:0px;

}

#ball{

    background-color:#000000;

}

 

 

</style>

</head>

 

<body>

<canvas id="ball" ></canvas>

</body>

<script type="text/javascript">

function drawBall(){

    var can = document.getElementById("ball");

    var con = can.getContext("2d");

    can.width = $(window).innerWidth();//获取整个屏幕的宽高

    can.height = $(window).innerHeight();

    var r = 30;

    var step = 10;

    var timer;

    var interval = 80;

    var ballX = can.width / 2;

    var ballY = 50;

    var ballColor = "yellow";

    var expend = 20;

    var i = 1;

    var isup = 0;

    timer = setInterval( function(){

        con.clearRect( 0 , 0 , can.width, can.height );

        con.beginPath();

        con.arc( ballX , ballY , r , 0 , Math.PI * 2 );

        con.fillStyle = ballColor;

        con.fill();

        con.closePath();

        

        ballY = ballY + step;

        if( (ballY >= (can.height-r)) && isup == 0  ){//因为加上半径比较才是球落到地面的效果

                step = step * -1;

                isup = 1;

        }

        if( ((ballY-r) <= expend) && isup == 1 ){

                step = step * -1;

                expend += timesExp;//每次损失能量

                isup = 0;

        }

        if( expend-r >= can.height ){

                clearInterval(timer);

                return false;

        }

    

    }, interval );    

}

 

//------------ 多个球体

 

var balls = 2000; //canvas球体数目

var r = 2; //最大圆半径

var timesExp = 0; //每次弹起的能量最大消耗数

var interval = 10; //间隔时间

var minStep = 5; //最小步长

var timer; //定时器

var ballColor = ["yellow","orange","brown","white","red","blue","purple","pink"]; //数组随机颜色

var ballMessage = {  //球体信息

    "randomBallsX":[] ,  //随机出来的球体X坐标

    "randomBallsY":[], //随机出来的球体Y坐标

    "randomBallsColor":[], //随机出来的球体颜色

    "randomExpend":[], //球体起始消耗 为0 

    "randomIsup":[],   //当前方向是0为下,1为上

    "randomR":[], //随机出来球体半径

    "randomStep":[] //随机出来球体的当次移动步长

};

var can = document.getElementById("ball");

var con = can.getContext("2d");

can.width = $(window).innerWidth();//获取整个屏幕的宽高

can.height = $(window).innerHeight();

function randomBalls(){

    //循环所有随机的球体

    for( var i = 0; i < balls; i++ ){

        var randomIsR = Math.floor( (Math.random() * r ) + r );

        var randomBallX = Math.floor( (Math.random() * (can.width-randomIsR)) +randomIsR);

        var randomBallY = Math.floor( (Math.random() * (can.height-randomIsR)) +randomIsR );

        var randomBallColors = Math.floor( Math.random() * ballColor.length );

        var randomSteps = Math.floor( Math.random() * minStep + minStep );

        

        //把随机出来的数据放入数组

        ballMessage["randomBallsX"].push( randomBallX );

        ballMessage["randomBallsY"].push( randomBallY );

        ballMessage["randomBallsColor"].push( ballColor[randomBallColors] );

        ballMessage["randomExpend"].push( 0 );

        ballMessage["randomIsup"].push( 0 );

        ballMessage["randomR"].push( randomIsR );

        ballMessage["randomStep"].push( randomSteps );

    }

}

 

function drawAllballs(){

    var i = 1;

    //定时器

    timer = setInterval( function(){

            con.clearRect( 0 , 0 , can.width, can.height );    

            for( var k = 0 ; k < balls; k++ ){

                var ballX = ballMessage["randomBallsX"];

                var ballY = ballMessage["randomBallsY"];

                var ballColor = ballMessage["randomBallsColor"];

                var expend = ballMessage["randomExpend"];

                var isup = ballMessage["randomIsup"];

                var r = ballMessage["randomR"];

                var step = ballMessage["randomStep"];

                

                //不断的绘制圆                

                con.beginPath();

                con.arc( ballX[k] , ballY[k] , r[k] , 0 , Math.PI * 2 );

                con.fillStyle = ballColor[k];

                con.fill();

                con.closePath();

                ballY[k] = ballY[k] + step[k];

                if( (ballY[k] >= (can.height-r[k])) && isup[k] == 0  ){//因为加上半径比较才是球落到地面的效果

                    step[k] = step[k] * -1;

                    isup[k] = 1;

                }

                if( ((ballY[k]-r[k]) <= expend[k]) && isup[k] == 1 ){

                    step[k] = step[k] * -1;

                    expend[k] += timesExp;//每次损失能量

                    isup[k] = 0;

                }

            }

    }, interval );

}

 

can.addEventListener( "click", function(){

    interval -= 10;

    clearInterval( timer );

    drawAllballs();

});

 

randomBalls();

drawAllballs();

 

</script>

</html>

 

© 著作权归作者所有

上一篇: HTML5 下雪
下一篇: HTML5 snake
我们取个名字叫珍惜
粉丝 4
博文 48
码字总数 19405
作品 0
嘉兴
程序员
私信 提问
将本地特性拓展至HTML5 Web应用

一家名叫AppMobi的小公司,正致力一项工作,使开发者能创建可深入移动设备硬件或操作系统功能的HTML5应用, 如重力感应、加速计、GPS、相机、声音与震动、文件系统等,InfoWorld报道。‘其i...

xyxzfj
2011/11/04
56
0
将本地特性拓展至 HTML5 Web 应用

一家名叫AppMobi的小公司,正致力一项工作,使开发者能创建可深入移动设备硬件或操作系统功能的HTML5应用, 如重力感应、加速计、GPS、相机、声音与震动、文件系统等,InfoWorld报道。‘其i...

xyxzfj
2011/11/04
1K
5
HTML5、WebKit与移动应用开发

一、 前言 微软之所以能够在过去几十年间称霸IT业,主要是凭借一项无法超越的优势:Windows操作系统,目前快速发展的移动设备成为IT业关注的重点,有可能移动互联网应用将会是IT业下一个高速...

冯京宝
2012/05/30
625
0
分享由HTML5写的手机摇一摇功能

HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件: 1、 deviceOrientation:封装了方向传感器数据的...

Ms-
2013/12/12
788
0
15 个令人震惊的 HTML5 实验

除非你一直在岩石下生活,否则你不会没听过HTML5。现在几乎到处都有HTML5的身影,这得益于苹果公司前CEO 乔布斯和很多开发人员的推广。Sonia Tracy 收集整理了15个令人振奋的HTML5实验。提示...

红薯
2011/09/18
10.5K
25

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
10
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
6
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
11
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部