<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. 第8月第12天 python json.dumps danmu

    1.json.dumps return JsonResponse({ 'status': WechatMessage.POST_METHOD_REQUIRED[1], 'status_code': W ...

  2. tensorboard遇到的坑

    <ul><li>No graph definition files were found.</li></ul> <p>启动命令 tensor ...

  3. Redis持久化——RDB快照

    一.是什么? 在指定的时间间隔内将内存中的数据集快照写入磁盘,也就是行话讲的Snapshot快照,它恢复时是将快照文件直接读到内存里. Redis会单独创建(fork)一个子进程来进行持久化,会先将数 ...

  4. 各种initcall的执行先后顺序（module_init、postcore_initcall、arch_initcall、subsys_initcall、 fs_initcall）【转】

    转自:http://www.cnblogs.com/superlcc/archive/2012/09/12/2681930.html 现在以module_init为例分析initcall在内核中的调用 ...

  5. SUSE Enterprise Server 12 SP3 64 设置防火墙开放8080端口，出现Unsafe permissions for file /etc/sysconfig/SuSEfirewall2 to be sourced

    SUSE Enterprise Server  12 SP3 64 设置防火墙开放8080端口时出现  Unsafe permissions for file /etc/sysconfig/SuSEf ...

  6. 浅谈JavaScript DDOS 攻击原理与防御

    前言 DDoS(又名"分布式拒绝服务")攻击历史由来已久,但却被黑客广泛应用.我们可以这样定义典型的DDoS攻击:攻击者指使大量主机向服务器发送数据,直到超出处理能力进而无暇处理正 ...

  7. RSS新手必读

    当谷歌停止Google Reader后,我开始玩RSS Reader了.网上大抵说Google Reader的退出很可惜,不过替代品还是存在的.   作为一个newbie我的视野或许很局限不过还是说几 ...

  8. C语言——第零次作业

    A:你对网络专业或计算机专业了解是怎样? 据我所知计算机专业未来前景不错,不仅就业路子广,毕业工资高,而且在全世界都很吃香.但是,计算机专业是一个非常难学的专业,尽管人们追趋逐耆也没有填补计算机高端人 ...

  9. oracle中 connect by prior 递归查询

    Oracle中start with...connect by prior子句用法 connect by 是结构化查询中用到的,其基本语法是: select ... from tablename sta ...

  10. stm32+ESP8266AT指令详细说明

    最近公司团队的项目用到ESP8266,使用的是stm32c8t6芯片,软件使用MDK,于是写下调试过程中的一些注意点.具体代码和涉及思路不能外泄,这里只给出我们调试过程中的注意的方面. 关于ESP82 ...