<head>
<title>
大球吃小球by大奔
</title>
<script type="text/javascript" src="src/jscex.js"></script>
<script type="text/javascript" src="src/jscex-parser.js"></script>
<script type="text/javascript" src="src/jscex-jit.js"></script>
<script type="text/javascript" src="src/jscex-builderbase.js"></script>
<script type="text/javascript" src="src/jscex-async.js"></script>
<script type="text/javascript" src="src/jscex-async-powerpack.js"></script>
</head>
<body>
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3">
你的浏览器改换了
</canvas>
<script type="text/javascript">
var d=document.getElementByIdx_x("myCanvas")
var cxt=d.getContext("2d")
var balls=[]
//这里为了获得随机数的向量
function getRandom(a,b){
return (a+Math.floor(Math.random()*(b-a+1)))
}
//这里对向量进行赋值
var Vector2=function(a,b){
this.x=a||0
this.y=b||0
}
//这里需要注意，对象的默认方法在这里写不会管用。例如sub
Vector2.prototype={//写对象的构造函数
constructor:Vector2,
multiplyScalar:function(s){
this.x*=s
this.y*=s
return this
},
divideScalar:function(s){
if(s){
this.x/=s
this.y/=s
}else{
this.set(0,0)
}
return this
},
dot:function(v){
return this.x*v.x+this.y*v.y//即两个向量相乘
},
lengthSq:function(){
return this.x*this.x+this.y*this.y
},
length:function(){
return Math.sqrt(this.lengthSq())
},
normalize:function(){
//这里得到的是单位向量，按照google的定义，单位的向量是，//（a,b）则a*a+b*b=1
return this.divideScalar(this.length())
},
reflectionSelf:function(v){
//这里得到的是反射向量。公式参考这个网址。
//blog.physwf.com/?p=42
var nv=v.normalize()
this.sub(nv.multiplyScalar(2*this.dot(nv)))
},
distanceToSquared:function(v){//求出两点之间的距离
var dx=this.x-v.x,
dy=this.y-v.y
return dx*dx+dy*dy
}
}
Vector2.sub=function(v1,v2){//这里重写sub方法
return new Vector2(v1.x-v2.x,v1.y-v2.y)
}
for(var i=0i<40i++){//初始化40个小球
var ball={
position:new Vector2(getRandom(20,600),getRandom(20,600)),
r:getRandom(6,20),
speed:new Vector2(getRandom(-200,200),getRandom(-200,200)),
mass:1,//这是小球的质量
restitution:1//这是d性系数
}
balls.push(ball)
}
var filterBalls=[]
for(var i=0i<balls.lengthi++){
var overlapCount=0
for(var j=i+1j<balls.lengthj++){//两个两个比较防止重复，而且初始化的位置不能重 //叠，否则符合碰撞的条件。去掉这个判断以后，效果不太显著，可以多放些球试试。
var distance=balls[i].position.distanceToSquared(balls[j].position)
var l=balls[i].r+balls[j].r
if(distance<=(l*l)){
overlapCount++
}
}
if(overlapCount===0){
filterBalls.push(balls[i])
}
}
balls=filterBalls//这里可以去掉试试。
cxt.fillStyle="#030303"
cxt.fillRect(0,0,d.width,d.height)
function init(){
cxt.fillStyle="#fff"
for(i in balls){
cxt.beginPath()
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true)
cxt.closePath()
cxt.fill()
}
}
init()
var cyc=20
var moveAsync2=eval_r(Jscex.compile("async",function(){
var tag=0
while(true){
try{
cxt.fillStyle="rgba(0,0,0,3)"
cxt.fillRect(0,0,d.width,d.height)
cxt.fillStyle="#fff"
for(var i=0i<balls.lengthi++){
//这里是为了两个小球比较会重复所以，每次比较都是i与i+1//开始相比较
for(var j=i+1j<balls.lengthj++){
collisionSolver(balls[i],balls[j])
}
}
for(i in balls){
cxt.beginPath()
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true)
cxt.closePath()
cxt.fill()
if(balls[i].r+balls[i].position.x>d.width){
//如果小球x轴跑出了画布的范围
balls[i].position.x=d.width-balls[i].r
//小球的位置返回到画布的边缘位置
balls[i].speed.x*=-1
//同时x轴的方向变为反方向
}if(balls[i].position.x<balls[i].r){
//如果小球的x坐标小于小球的半径。肯定画不成完整的圆了，所以要归位
balls[i].position.x=balls[i].r
balls[i].speed.x*=-1 }if(balls[i].r+balls[i].position.y>d.height){//同理y轴
balls[i].position.y=d.height-balls[i].r
balls[i].speed.y*=-1
}
if(balls[i].position.y<balls[i].r){
balls[i].position.y=balls[i].r
balls[i].speed.y*=-1
} balls[i].position.x+=balls[i].speed.x*cyc/1000
//小球的x轴不断按照速度增大
balls[i].position.y+=balls[i].speed.y*cyc/1000
}
}catch(e){
alert(e)
}
$await(Jscex.Async.sleep(cyc))
}
}))
function collisionSolver(bodyA,bodyB){//判断小球发生碰撞的时候的变化。
var vB=bodyB.speed
var vA=bodyA.speed
var l=bodyA.r+bodyB.r
var distSqr=bodyA.position.distanceToSquared(bodyB.position)
var isTouching=distSqr<=l*l? true:false
//判断两圆心之间的距离如果小于两半径之和的平方。则为true
var normal=Vector2.sub(bodyB.position,bodyA.position).normalize()
//请看上面的解释,所以得到的是B相对于A的单位向量。
var ratio=bodyA.r/l//这是一个比例
var contactPoint=new Vector2()
//根据平行线切割的三角形，两边的边的比例相等，
contactPoint.x=bodyA.position.x+(bodyB.position.x-bodyA.position.x)*ratio
contactPoint.y=bodyA.position.y+(bodyB.position.y-bodyA.position.y)*ratio
var rA=Vector2.sub(contactPoint,bodyA.position)
//这两个地方没有找到是哪里用到的？？？？？
var rB=Vector2.sub(contactPoint,bodyB.position)
var vrn=Vector2.sub(vA,vB).dot(normal)
//这里得到的是Va相对于vB的速度向量与两球的圆心的单位向量相乘。
///a*b=|a|*|b|*cos@.所以如果vrn大于零，则夹角小于90度。
if(isTouching&&vrn>0){
//这里是冲量公式的一个部分
var normalMass=1/(1/bodyA.mass+1/bodyB.mass)
var restitution=(bodyA.restitution+bodyB.restitution)/2
var normalImpulse=-normalMass*vrn*(1+restitution)
bodyA.speed.x+=normalImpulse*normal.x/bodyA.mass
//这里总之是一个大球一个小球，所以速度一个增大一个减小
bodyA.speed.y+=normalImpulse*normal.y/bodyA.mass
bodyB.speed.x-=normalImpulse*normal.x/bodyB.mass
bodyB.speed.y-=normalImpulse*normal.y/bodyB.mass
}
}
moveAsync2().start()
</script>
</body>
</html>
下面详细解释都在源码中:<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#canvas{ background:#eee}</style></head><body><canvas id='canvas' width="500" height='500'></canvas><script>window.onload=function(){ var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') //平移,主要是将坐标轴平移到中间,为了画圆定位方便 context.translate(250,250) //定义焦距 var fos = 300 //存放小球的数组 var arr = [] for(var i = 0 i <8 i++){ var arcObj = { //半径,用随机数目的是让每个小球大小不一 r:10+5*Math.random(), //起始X坐标 x:-200+i*30, //起始Y坐标 y:-100+200*Math.random(), //起始Z坐标,这里需要理解,我们要构造的是一个三维立体小球的运动 //则X,Y轴不能表达空间感,你需要充分的想象Z坐标轴是顺着你的眼睛的就是Z轴 z:i*10, //小球的运行速度 speed:20 } arr.push(arcObj) } setInterval(function(){ //清除画布,每次画之前先将上次的清除掉.然后绘出本次的,就可以形成动画效果. context.clearRect(-250,-250,500,500) //将arr排序,sort()的参数则是作为一种比较规则 var newArr = arr.sort(function (a,b){ return a.z >b.z }) //循环绘出刚才定义的几个小球 for(var i = 0 i <newArr.length i++){ //z轴的变化,每次变化都是 速度*时间+z = z由于speed未定义单位,则时间可忽略 arr[i].z += arr[i].speed //让小球来回d跳 if(arr[i].z >600 || arr[i].z <-50){ arr[i].speed *= -1 } //这里的缩放比例,一定要注意,你要想象你眼前有个球垂直从远处飞来,逐渐变大的过程,Z轴不断增加.焦距就想象成从最初你到球的距离,通过运动后,现在到球的距离和焦距就可以形成缩放比例. var scales = fos/(fos+arr[i].z) var x1 = arr[i].x*scales var y1 = arr[i].y*scales //保存之前的context绘图环境,即后续可以用context.restore方法可以恢复, //目的是让下面的context变化不影响其他的画图样式. context.save() //平移X,Y 也可以不用平移X,Y只要在下面的画圆中定义相应的X,Y也能达到相同的目的 context.translate(x1,y1) //将坐标轴缩放,目的是让小球的大小发生视觉上的变化. context.scale(scales,scales) context.beginPath() //定义放射性颜色渐变 var colorObj = context.createRadialGradient(0,0,0,0,0,arr[i].r) colorObj.addColorStop(0,'#cbc0f3') colorObj.addColorStop(1,'#06198b') context.fillStyle=colorObj context.arc(0,0,arr[i].r,0,Math.PI*2) context.fill() context.restore() } },50)}</script></body></html>
主要要理解焦距的概念,实际开发过程中,可能X轴,Y轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.
说起特效来，HTML5还是很值得称道的：
1、HTML5 Canvas发光Loading动画
之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。
2、jQuery球状放大镜特效插件
今天我们要来分享一款基于jQuery的放大镜特效插件，和其他放大镜不同的是，这款jQuery放大镜插件是球状的，看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。
3、HTML5 Canvas粒子模拟效果
这是一款利用Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。
4、HTML5/CSS3带区域地图的联系表单
之前我们分享很多样式和功能各异的CSS3联系表单，比如HTML5/CSS3简易联系表单等等，都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单，它可以选中不同区域显示相应的地图，然后针对该区域填写联系表单。
5、CSS3 3D立方体Loading加载动画特效
之前我们分享过一些HTML5和CSS3的3D立方体特效，他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的，9个小立方体上下浮动，呈现波浪的效果，并且，这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。
希望你也可以学起来呀~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）