html5炮弹

//box

var box_x=0;

var box_y=0;

var box_width=300;

var box_height=300;

//ball

var ball_x=10;

var ball_y=10;

var ball_radius=10;

var ball_vx=10;

var ball_vy=0;

//constant

var g=10;//note

var rate=0.9;

//bound

var bound_left=box_x+ball_radius;

var bound_right=box_x+box_width-ball_radius;

var bound_top=box_y+ball_radius;

var bound_bottom=box_y+box_height-ball_radius;

//context

var ctx;

function init()

{

ctx=document.getElementById('canvas').getContext('2d');

ctx.lineWidth=ball_radius;

ctx.fillStyle="rgb(200,0,50)";

move_ball();

setInterval(move_ball,100);

}

function move_ball()

{

ctx.clearRect(box_x,box_y,box_width,box_height);

move_and_check();

ctx.beginPath();

ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);

ctx.fill();

ctx.strokeRect(box_x,box_y,box_width,box_height);

}

function move_and_check()

{

var cur_ball_x=ball_x+ball_vx;

var temp=ball_vy;

ball_vy=ball_vy+g;

var cur_ball_y=ball_y+ball_vy+g/2;

if(cur_ball_x

{

cur_ball_x=bound_left;

ball_vx=-ball_vx*0.9;

ball_vy=ball_vy*0.9;

}

if(cur_ball_x>bound_right)

{

cur_ball_x=bound_right;

ball_vx=-ball_vx*0.9;

ball_vy=ball_vy*0.9;

}

if(cur_ball_y

{

cur_ball_y=bound_top;

ball_vy=-ball_vy*0.9;

ball_vx=ball_vx*0.9;

}

if(cur_ball_y>bound_bottom)

{

cur_ball_y=bound_bottom;

ball_vy=-ball_vy*0.9;

ball_vx=ball_vx*0.9;

}

ball_x=cur_ball_x;

ball_y=cur_ball_y;

}

html5模拟小球平抛运动过程。

HTML5 模拟现实物理效果，感受 Web 技术魅力

Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

HTML5 模拟现实物理效果

Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

C控制台实现模拟平抛运动算法

平抛运动这个相信读了高中物理都知道这个概念了,详细的我就不说了,不明白的看看百度: 平抛运动 接下来看看用控制台实现的平抛运动算法: #include #include ...

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_2 = & ...

h5 html5 模拟时钟 页面

JS+HTML5的Canvas画图模拟太阳系运转

查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...

精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...

随机推荐

简析Geoserver中获取图层列表以及各图层描述信息的三种方法

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 实际项目中需要获取到Geoserver中的图层组织以及各图层 ...

JavaScript 入门教程四 语言基础【2】

一.数据类型介绍: undefined null NaN 1.判断当前变量是否为 undefined: if (i === undefined) 或者 if (typeof (i) === &quot ...

lucas定理，组合数学问题

对于C(n, m) mod p.这里的n,m,p(p为素数)都很大的情况.就不能再用C(n, m) = C(n - 1,m) + C(n - 1, m - 1)的公式递推了. 这里用到Lusac定理 ...

tabBar 选中默认蓝色 ，取消选中(自定义)

- (void)viewDidLoad { [super viewDidLoad]; //    [self _initSubViewControllers]; //    [self _custom ...

django的rest&lowbar;framework框架源码剖析

在看源码之前先了解一下什么是rest,restful api. 什么是rest 可以总结为一句话:REST是所有Web应用都应该遵守的架构设计指导原则. REST是Representational S ...

JSON WEB TOKEN(JWT)的分析

JSON WEB TOKEN(JWT)的分析 一般情况下,客户的会话数据会存在文件中,或者引入redis来存储,实现session的管理,但是这样操作会存在一些问题,使用文件来存储的时候,在多台机器上 ...

3D印表機 零件採購資訊

3D印表機 零件採購資訊 採購資訊僅供參考,零件的品質由店家擔保! 壓克力 螺絲螺帽牙條 高來螺絲 滑套.軸承 五連軸承 掏寶-廣發軸承 光軸 掏寶-廣發軸承 彈簧 雅銅彈簧 鐵氟龍製品 馬達 電源供 ...

&lbrack;转&rsqb;&period;Python中sorted函数的用法

[Python] sorted函数 我们需要对List.Dict进行排序,Python提供了两个方法对给定的List L进行排序,方法1.用List的成员函数sort进行排序,在本地进行排序,不返回副 ...

ssm框架结构的搭建

ssm框架结构的搭建

Java 实现一个带提醒的定时器

定时闹钟预览版EXE下载链接:https://files.cnblogs.com/files/rekent/ReadytoRelax_jar.zip 功能说明: 实现了一个休息提醒器,用户首先设定一个 ...