<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. 1、Saltstack简介及安装配置

    1.Saltstack简介 Saltstack是基于Python开发的一套C/S架构,具备Puppet.Ansible功能于一身的配置管理工具,功能十分强大,各模块融合度及复用性极高:使用号称世界上最 ...

  2. deeplearning.ai学习seq2seq模型

    一.seq2seq架构图 seq2seq模型左边绿色的部分我们称之为encoder,左边的循环输入最终生成一个固定向量作为右侧的输入,右边紫色的部分我们称之为decoder.单看右侧这个结构跟我们之前 ...

  3. 转：存储之直连存储Dell Powervault MD 3000

    存储之直连存储DellPowervault MD 3000 存储根据服务器类型可以分为:封闭系统的存储和开放系统的存储 1.封闭系统的存储:封闭系统主要指大型机,AS400等服务器 2.开放系统的存储 ...

  4. eclipse中 EAR Libraries 是什么?

    eclipse中 EAR Libraries 是 开发EJB工程所需的库包. 由于新建web工程时,eclipse并不能智能化的判断是否该项目以后会用到ejb, 所以为了全面考虑 就已经帮用户导入了E ...

  5. Django Rest Framework-APIView源码分析

    class APIView(View): # The following policies may be set at either globally, or per-view. renderer_c ...

  6. MySQL root密码忘记后更优雅的解决方法

    MySQL root密码忘记后更优雅的解决方法 https://www.jb51.net/article/143453.htm /usr/bin/mysqld_safe --defaults-file ...

  7. python基础-pthon

    1)python 由Guido开发 2)编译(compile)型:通过编译器把代码直接生成一个可执行文件. 比如把英语书一次性翻译成中文书.语言有:c,C++等 解释型:边编译边执行.语言如:java ...

  8. Python api认证

    本节内容: 基本的api 升级的api 终极版api 环境:Djanao, 项目名:api_auto, app:api 角色:api端,客户端,黑客端 1.基本的api [api端] #api_aut ...

  9. aria2

    在之前我们已经介绍了通过uGet使用aria2来进行下载,但是这样只是使用aria2最简单的功能,现在我们来介绍一下aria2的常用命令 简单篇: 一般使用使用 aria2 下载文件,只需在命令后附加 ...

  10. maven-replacer-plugin 静态资源版本号解决方案（css/js等）

    本文介绍如何使用 maven 的 com.google.code.maven-replacer-plugin 插件来自动添加版本号,防止浏览器缓存. 目录 1.解决方案 2.原始文件和最终生成效果 3 ...