//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) === " ...
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_framework框架源码剖析
在看源码之前先了解一下什么是rest,restful api. 什么是rest 可以总结为一句话:REST是所有Web应用都应该遵守的架构设计指导原则. REST是Representational S ...
JSON WEB TOKEN(JWT)的分析
JSON WEB TOKEN(JWT)的分析 一般情况下,客户的会话数据会存在文件中,或者引入redis来存储,实现session的管理,但是这样操作会存在一些问题,使用文件来存储的时候,在多台机器上 ...
3D印表機 零件採購資訊
3D印表機 零件採購資訊 採購資訊僅供參考,零件的品質由店家擔保! 壓克力 螺絲螺帽牙條 高來螺絲 滑套.軸承 五連軸承 掏寶-廣發軸承 光軸 掏寶-廣發軸承 彈簧 雅銅彈簧 鐵氟龍製品 馬達 電源供 ...
[转].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 功能说明: 实现了一个休息提醒器,用户首先设定一个 ...