html5模拟平抛运动(模拟小球平抛运动过程)


Posted in HTML / CSS onJuly 25, 2013

物体以一定的初速度沿水平方向抛出,如果物体仅受重力作用,这样的运动叫做平抛运动。平抛运动可看作水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动。平抛运动的物体,由于所受的合外力为恒力,所以平抛运动是匀变速曲线运动,平抛物体的运动轨迹为一抛物线。平抛运动是曲线运动 平抛运动的时间仅与抛出点的竖直高度有关;物体落地的水平位移与时间(竖直高度)及水平初速度有关。


复制代码
代码如下:

<html>
<head>
<meta charset=utf-8>
<title>html5炮弹</title>
<script>
//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<bound_left)
{
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<bound_top)
{
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;
}
</script>
</head>
<body onLoad="init()">
<canvas id="canvas" width="400" height="400"/>
</body>
</html>

html5模拟小球平抛运动过程。
HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
利用CSS3的定位页面元素
Aug 29 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 #HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 #HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 #HTML / CSS
html5弹跳球示例代码
Jul 23 #HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 #HTML / CSS
canvas使用注意点总结
Jul 19 #HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 #HTML / CSS
You might like
鼠标图片振动代码
2006/07/06 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python 存取npy格式数据实例
2020/07/01 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
英语文学专业学生的自我评价
2013/10/31 职场文书
运动会四百米广播稿
2014/01/19 职场文书
军训拉歌口号
2014/06/13 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
检讨书范文300字
2015/01/28 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书