<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模拟小球平抛运动过程。

html5模拟平抛运动的更多相关文章

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

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

  2. HTML5 模拟现实物理效果

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

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

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

  4. Html5模拟通讯录人员排序（sen.js）

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

  5. h5 html5 模拟时钟 页面

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  6. HTML5模拟衣服撕扯动画

    在线演示 本地下载

  7. HTML5模拟衣服撕扯效果

    在线演示 本地下载

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

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

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

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

随机推荐

  1. 工作目录与os.getcwd()

    假设某程序在/root/a/aa.py,在shell,当前pwd为/root,输入./a/aa.py运行py程序,则爱程序的工作目录是/root.而不是程序所在文件夹,os.getcwd()就是查看工 ...

  2. 递归&冒泡&装饰器

    递归 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. #lambda: func = lambda x,y:9+x 参数:x,y 函数体:9+x 函数名:func ...

  3. 【mac】7z 终端命令行

    链接:http://www.2cto.com/os/201410/341079.html 7z指令 7z是7zip压缩工具的常用压缩文件格式.7zip是一个开源的压缩工具,软件本身十分小巧,功能强大, ...

  4. 【译】在Asp.Net Core 中使用外部登陆（google、微博...）

    原文出自Rui Figueiredo的博文<External Login Providers in ASP.NET Core> (本文很长) 摘要:本文主要介绍了使用外部登陆提供程序登陆的 ...

  5. win7下PHP+MySQL+CoreSeek中文检索引擎配置

    1.Windows下的coreseek安装测试 (64位win7旗舰版) 官方参考:http://www.coreseek.cn/products-install/install_on_windows ...

  6. Gitlab & Github

    windwos上Git的使用 软件下载地址:https://github.com/git-for-windows/git/releases/download/v2.15.1.windows.2/Git ...

  7. Java中获取包含变量的配置文件config.properties内容

    应用场景 有些时候项目中会用到很多路径,并且很可能多个路径在同一个根目录下,那为了方便配置的修改,达到只修改根目录即可达到一改全改的效果,此时就会想到要是有变量就好了: 另外有时候路径中的文件名是不确 ...

  8. 全键盘操作Windows

    计算机机用户在使用计算机的时候,是用键盘多一点?还是用鼠标多一点?如果是专业打字员,应该会说他使用键盘多一点,除此之外,多数人都会告诉你,他已经离不开鼠标了,没有鼠标,就不会操作电脑.   如果某一天 ...

  9. Hanoi Factorys

    题面 思路 这道题看似难的一匹,实际上也难的一批还好,甚至n^2 DP都有50分呢. 原谅我一失手成千古恨. 50分思路 就是sort后根据条件DP if (LIS[i].b>LIS[j].a) ...

  10. .NetCore下B/S结构 初探基于遗传学算法的中学自动排课走班（二）

    分析下染色体基因 这里用 老师 课程 班级 教室 周天 上下晚 课时作为染色体编码我封装了如下类 /// <summary> /// NP 授课事件 由教室.课程.班级 时间片段构成 li ...