<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. (F - 超级英雄Hero HYSBZ - 1191 )匈牙利算法

    题目链接:https://cn.vjudge.net/contest/281037#problem/F 题目大意:中文题目 具体思路:可以看成二分图匹配,寻找最大匹配就可以了,注意当某一个匹配不到的时 ...

  2. 交互题（二分）（D. Game with modulo）

    题目链接:http://codeforces.com/contest/1104/problem/D 题目大意:给出一个式子 x%a y%a,会返回结果,如果返回x代表x%a>=y%a.如果返回y ...

  3. 20165230 ch02 课上测试

    题目一 1.参考附图代码,编写一个程序 "week0201学号.c",判断一下你的电脑是大端还是小端. 2.提交运行结果"学号XXXX的笔记本电脑是X端"的运行 ...

  4. Java反射--基于ParameterizedType实现泛型类，参数化类型

    一.引子: 项目中使用Gson的反序列化将json转化成具体的对象,具体方法是: package com.google.gson;下的反序列化方法 public <T> T fromJso ...

  5. 【源码阅读】Mimikatz相关资料

    Mimikatz GitHub (源码) https://github.com/gentilkiwi/mimikatz Mimikatz GitHub Wiki (包含了一些说明文档) https:/ ...

  6. 五大常见的MySQL高可用方案【转】

    1. 概述 我们在考虑MySQL数据库的高可用的架构时,主要要考虑如下几方面: 如果数据库发生了宕机或者意外中断等故障,能尽快恢复数据库的可用性,尽可能的减少停机时间,保证业务不会因为数据库的故障而中 ...

  7. gentoo系统安装

    1. Gentoo常用镜像   ===>http://www.linuxsir.org/bbs/thread263600.html 2. 安装方式1 http://www.linuxidc.co ...

  8. 如何动态修改windows下的host文件

    事件背景:为了测试数据提交后,需要在另一个环境的多个测试节点下去验证测试数据是否添加成功,找了一大堆放法,用了比较笨的方法实现了.不多废话思路如下: 为了万无一失,先备份hosts文件内容: 1.读取 ...

  9. 为你的 Hadoop 集群选择合适的硬件

    随着Apache Hadoop的起步,云客户的增多面临的首要问题就是如何为他们新的的Hadoop集群选择合适的硬件. 尽管Hadoop被设计为运行在行业标准的硬件上,提出一个理想的集群配置不想提供硬件 ...

  10. .NetCore源码阅读笔记系列之Security （二） 自定义认证实践

    通过前面对AddCookie 或者 AddOpenIdConnect 等了解,其实里面都实现了一个AuthenticationHandler<TOptions>的认证处理,接下来我们来简单 ...