canvas弹动2

通过对弹动的原理来实现如下效果,做出一个弹球游戏,用鼠标点作为目标,所以圆球当离鼠标进的时候就会慢慢移动,远的时候就会快速移动,因为有摩擦力所以会慢慢暂停,在程序的结尾加上重力让它产生悬浮效果

var canvas = document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var spring=0.01;
var targetX=canvas.width/2;
var targetY=canvas.height/2;
var vx=0;
var vy=0;
var gravity=0.5;
function Ball(x,y,radius,speed){
this.x=x;
this.y=y;
this.radius=radius;
this.speed=speed;
}
var balles=[];
balles.push(new Ball(20,20,15,{x:0,y:0}));
var b=balles[0];
var friction=0.95;

function downball(){
var dx=targetX-b.x;
var dy=targetY-b.y
vx=dx*spring;
b.speed.x+=vx;
b.speed.x*=friction;
b.x+=b.speed.x;
vy=dy*spring+gravity;
b.speed.y+=vy;
b.speed.y*=friction;
b.y+=b.speed.y;
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.beginPath();
cxt.strokeStyle="#fff";
cxt.moveTo(b.x,b.y);
cxt.lineTo(targetX,targetY);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.fillStyle="#fff";
cxt.arc(b.x,b.y,b.radius,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();
canvasId = requestAnimationFrame(downball)
// if(Math.abs(b.speed.x)<0.001)
// cancelAnimationFrame(canvasId);
}
var canvasId;
downball();
function move(event){
targetX=event.point.x;
targetY=event.point.y;
}
function up(event){}
function down(event){}
tool.MT(canvas,move,down,up);

时间: 2024-10-29 19:10:56

canvas弹动2的相关文章

canvas检测边界和弹动的实例

如图所示的效果,小球相互碰撞会相互弹开,这时要干的事就只有两件事了,一:用二次循环遍历小球是否互相碰撞,二:碰撞之后会弹向什么地方和弹出多少距离,第一件事我想学过二维数组循环的都没问题,第二件事也只是用上期次弹动讲到的三角函数来判断角度,因为是力是相互的,所以反弹的一方应该是负值,而且因为撞击力会抵消,所以应该在乘以系数之后再乘以0.5这样就是相互弹撞,为了让效果明显,可以让反弹系数变成0.5,这样在弹在墙上就会变缓慢,效果就会变得更好 讲了这么多还是老规矩,代码贴上 var canvas =

Canvas学习笔记——弹动

如果有一根橡皮筋拴住一个小球,将小球拉开一定距离后释放,小球将会弹动.距离越远,橡皮筋对小球施加的外力越大,小球的加速度就越大.也就是说,小球的加速度与距离是成正比例关系的.这和缓动很相似,缓动是速度与距离成正比例.假设弹力系数为spring,则有公式: ax = (targetX - currentX) * spring; ay = (targetY - currentY) * spring; vx += ax; vy += ay; 举个例子:

弹动的公式和检测矩形边界的公式

重要公式: (1)简单缓动 dx = targetX - object.x; dy = targetY - object.y; vx = dx * easing; vy = dy * easing; object.x += vx; object.y += vy; 可精简: vx = (targetX - object.x) * easing; vy = (targetY - object.y) * easing; object.x += vx; object.y += vy; 再精简: obje

swift皮筋弹动发射飞机ios源码

这是一个款采用swift实现的皮筋弹动发射飞机游戏源码,游戏源码比较详细,大家可以研究学习一下吧. 源码下载: http://code.662p.com/view/7654.html <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op>  详细说明:http://ios.662p.com/thread-1963-1-1.html

canvas缓动3

这次缓动的是旋转旋转,写完之后才知道原来rotate是绕原点旋转,而且还带着rect本身的X与Y一起,所以我采用了translate达到位移效果,以免旋转到画布外面去,画完之后效果惨不忍睹,原来是忘记还原变形了,最后加上了save和restore才让效果达到 var canvas = document.getElementById("canvas"); var cxt=canvas.getContext("2d"); var RectX=0,RectY=0,esai

OSChina 娱乐弹弹弹——动次打次,动弹最欢乐

今天周四,不得不跳个舞来乐呵乐呵,嘻嘻 如果工作是这样的就好了,我天天都不想着周末: @创意总监3000k  : 我们应该在编程的时候 旁边有美女作陪,烦恼的时候 调情一下,就出来了!同意的给赞 猜个拳,喝个小酒,这都不错哦- @小魔神  : 今天听到两个小孩拍手:"两个小情人儿呀,打开宾馆门儿呀,亲呀,piapia,摸呀,piapia"-. 现在的小盆友已经不纯洁了,都不玩反弹了,反弹无效这句话他们造吗? 上班休憩之余发个动弹还是不错滴: @独孤影  : 哎呀我去,天天到osc刷动弹

怎样使android的view动画循环弹动

在res中建立文件夹anim,分别写下cycles.xml,shake1.xml,shake2.xml cycles.xml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <!-- android:cycles代表移动的速度 --> 3 <cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/androi

Android的ListView弹动效果

继承ListView,重写overScrollBy方法,调用super.overScrollBy()方法,替换maxOverScrollY参数 import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.widget.ListView; /** * 弹性ListView. * @author E */ public clas

关于苹果手机中,微信浏览器下拉弹动的解决

/*ios微信浏览器上下滚动兼容性问题解决 end*/$(function () {//DOM文档加载完执行 wxScrollSolve(document.querySelector('.MainCon'));});function wxScrollSolve(scrollWrapObj) {//Scrollobj要滚动的内容外部包裹的容器对象 if(scrollWrapObj==""||scrollWrapObj==undefined||scrollWrapObj==null){ r