正文
html5球,Html5游戏
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用Html5中的canvas模拟三维小球运动动画
下面详细解释都在源码中:
!doctype htmlhtmlheadmeta charset="utf-8"title无标题文档/titlestyle#canvas{ background:#eee;}/style/headbodycanvas id='canvas' width="500" height='500'/canvasscriptwindow.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; //让小球来回弹跳 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轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.
相关问答
Q1: HTML5 有哪些让你惊艳的 demo？
说起特效来，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色彩。
希望你也可以学起来呀~
Q2: HTML5中canvas创建多个小球自由落体并且反弹,小球有各自轨迹,互相不干扰。
如果是固定轨迹的话，是需要将所有的坐标都push到数组里，
如果不是固定的，只是希望互不影响，你可以用随机数做。
Q3: 怎么用html5制作简单的大球吃小球的游戏
html
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=0;i40;i++){//初始化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//这是弹性系数
};
balls.push(ball);
}
var filterBalls=[];
for(var i=0;iballs.length;i++){
var overlapCount=0;
for(var j=i+1;jballs.length;j++){//两个两个比较防止重复，而且初始化的位置不能重 //叠，否则符合碰撞的条件。去掉这个判断以后，效果不太显著，可以多放些球试试。
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=0;iballs.length;i++){
//这里是为了两个小球比较会重复所以，每次比较都是i与i+1 //开始相比较
for(var j=i+1;jballs.length;j++){
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.xd.width){
//如果小球x轴跑出了画布的范围
balls[i].position.x=d.width-balls[i].r;
//小球的位置返回到画布的边缘位置
balls[i].speed.x*=-1;
//同时x轴的方向变为反方向
}if(balls[i].position.xballs[i].r){
//如果小球的x坐标小于小球的半径。肯定画不成完整的圆了，所以要归位
balls[i].position.x=balls[i].r;
balls[i].speed.x*=-1; }if(balls[i].r+balls[i].position.yd.height){//同理y轴
balls[i].position.y=d.height-balls[i].r;
balls[i].speed.y*=-1;
}
if(balls[i].position.yballs[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(isTouchingvrn0){
//这里是冲量公式的一个部分
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
