<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. Dream_Spark版本定制第一课

    从今天起,我们踏上了新的Spark学习旅途.我们的目标是要像Spark官方机构那样有能力去定制Spark. 一．  我们最开始将从Spark Streaming入手. 为何从Spark Streami ...

  2. 苹果ANCS协议学习【转】

    苹果ANCS协议学习 转自:http://www.cnblogs.com/alexcai/p/4321514.html 综述 苹果通知中心(Apple Notification Center Serv ...

  3. WEBAPI 帖子收藏

    [翻译]ASP.NET Web API入门 [翻译]ASP.NET WEB API异常处理 ASP.NET WebAPI 路由规则与POST数据 ASP.NET Web API路由规则(二) ASP. ...

  4. 使用@SpringBootApplication注解

    很多Spring Boot开发者总是使用@Configuration , @EnableAutoConfiguration 和 @ComponentScan 注解他们的main类. 由于这些注解被如此 ...

  5. Newtonsoft 反序列化字符串

    string json=“[{“name”:”zhangsan”,”age”:”12”},{“name”:”zhangsan”,”age”:”12”}]” 方法1: JArray arr = (JAr ...

  6. 《剑指offer》写一个函数，求两个整数之和，要求在函数体内不得使用+、-、*、/四则运算符号。

    弱菜刷题还是刷中文题好了,没必要和英文过不去,现在的重点是基本代码能力的恢复. [题目] 剑指offer 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. [思路] 直觉 ...

  7. .NetCore使用Swagger进行单版本或多版本控制处理

    前面已经介绍过了Swagger的基础使用了 下面继续分别详细说明下 不添加版本控制以及添加版本控制的使用情况,其实也基本一致,对看起来可能更加容易理解 第一步 导入nuget包 nuget导入Swas ...

  8. JavaScript中变量的相互引用

    http://www.jb51.net/article/23387.htm  

  9. 【Eclipse】Eclipse常用操作

    [文章索引] (1)POJO类自动生成Getter和Setter方法  (2)自动生成构造方法(构造函数)  (3)通过类自动生成它的接口  (4)自动生成Junit测试类  (5)定制视图  (6) ...

  10. C语言：用指针求最大值和最小值

    用指针求数组最大值和最小值(10分) 题目内容: 用指针求含有十个元素的数组最大值和最小值 主函数参考 int main() { int a[10],i,maxnum,minnum; for(i=0; ...