最近一直想用学的canvas做一个漂亮的小应用,但是,发现事情并不是想的那么简单。比如,游戏的逼真效果,需要自己来coding……

所以,自己又先做了一个小demo,算是体验一下亲手打造物理引擎的感觉吧。*_*

代码效果预览地址:http://code.w3ctech.com/detail/2524

html:

 <div class="container">
<canvas id="canvas" style="border:1px solid #ccc; opacity:0.7"></canvas>
</div>

css:

* {
padding:;
margin:;
} body {
background-color: #fff;
}

js:

 window.onload = function () {
var CANVAS_HEIGHT=600;
var CANVAS_WIDTH = 1300;
var u = 0.6;//能耗系数
var g = 4;//重力加速度
var timer;
var ball = { x: 100, y: 500, Vx: 5, Vy: 100, r: 5, color: "#4cff00" }; var canvas = document.getElementById("canvas");
canvas.height = CANVAS_HEIGHT;
canvas.width = CANVAS_WIDTH; var ctx = canvas.getContext("2d"); function draw() {
ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);//清除小球在canvas上前一帧的状态
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
ctx.fillStyle = ball.color;
ctx.fill();
}
function update() {
ball.x += ball.Vx;
if (ball.Vy==0&&ball.y >= CANVAS_HEIGHT - ball.r) {
ball.Vy = 0;
}
else {
ball.Vy += g;
}
ball.y += ball.Vy;
console.log(ball.Vy);
if (ball.y>CANVAS_HEIGHT - ball.r) {
ball.y = CANVAS_HEIGHT - ball.r;
ball.Vy = -Math.ceil(ball.Vy*u);
}
if (ball.x == 0 + ball.r || ball.x == CANVAS_WIDTH) {
clearInterval(timer);
}
}
timer=setInterval(function () {
draw();
update();
}, 40);
}

canvas 模拟小球上抛运动的物理效果的更多相关文章

  1. Javascript摸拟自由落体与上抛运动 说明!

    JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...

  2. [Unity算法]斜抛运动

    斜抛运动: 1.物体以一定的初速度斜向射出去,物体所做的这类运动叫做斜抛运动. 2.斜抛运动看成是作水平方向的匀速直线运动和竖直方向的竖直上抛运动的合运动. 3.它的运动轨迹是抛物线. Oblique ...

  3. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  4. WPF实现物理效果 拉一个小球

    一直以来都对物理效果有神秘感,完全不知道怎么实现的.直到看到了周银辉在老早前写的一篇博客:http://www.cnblogs.com/zhouyinhui/archive/2007/06/23/79 ...

  5. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  6. canvas模拟中国铁路运行图

    原理说明 1.在知道canvas画布尺寸的情况下,需要将地理经纬度信息转换为canvas画布x,y坐标,因为中国地图地理经纬度坐标取值范围为73.33-135.05(经度)37-50(维度),所以第一 ...

  7. 【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象

    重力的方向和地面的问题 p2中默认的方向是从上到下,如果重力默认是正数的话,物体放到世界中是会从上面往下面飘的 p2中plane地面默认的方向是y轴的方向,而在p2中y轴的方向默认是从上往下 首先来看 ...

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

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

  9. HTML5 模拟现实物理效果

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

随机推荐

  1. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  2. ABAP 承运路单

    *&---------------------------------------------------------------------* *& Report  ZSDR010 ...

  3. 从士兵到程序员再到SOHO程序员

    2013年9月13日,我从就职了一年半的S公司正式离职,并开始了我梦寐以求的“SOHO程序员”之路. 这对于我来说,是一次人生道路上的重要选择,在这里,我想分享一下我是如何选择了这条道路的,同时也是对 ...

  4. POJ 1218

    题目描述看着就乐了,死板得只按着题意来写了ps: tequi是escape的方言版.. #include <iostream> using namespace std; int main( ...

  5. 九度OJ1468

    这道题其实就是个很简单的静态链表,需要注意的是,地址一共有5位,最后输出的时候如果之前是使用int类型存储地址的话,一定要强制规定输出的位数(5位),否则有可能会将高位省略.(如地址00001输出为1 ...

  6. django restframework 跨域访问

    场景介绍: 在Django开发过程中,使用前后端分离设计的站点越来越多,如Django+VUE.Django+Angular.在使用DjangoRestFramework开发API的过程中,由于前端站 ...

  7. innerHTML .innerText区别

    ().innerHtml("“):改变html元素: ().innerTEXT(”“):改变文本元素: 试验代码 <!DOCTYPE html> <html lang=&q ...

  8. 编写高质量代码:改善Java程序的151个建议 --[36~51]

    编写高质量代码:改善Java程序的151个建议 --[36~51] 工具类不可实例化 工具类的方法和属性都是静态的,不需要生成实例即可访 问,而且JDK也做了很好的处理,由于不希望被初始化,于是就设置 ...

  9. html头部标签大全

    http://www.css88.com/archives/8052#table-index

  10. Java应用中的编码问题(转载)

    第三篇:JAVA字符编码系列三:Java应用中的编码问题这部分采用重用机制,引用一篇文章来完整本部分目标.来源:  Eceel东西在线 问题研究--字符集编码 地址:http://china.ecee ...