4.1速度
运动最基本的属性就是速度。注意这里的速度是物理中所说的速度(Velocity),它包括大小及方向两部分组成。在动画中,如果我们已知当前一帧对象的位置以及速度,那在下一帧我们就能计算出物体所在的位置。在大多数情况下,速度的大小是按像素/帧为单位的,但实际运行中,由于浏览器的帧率不稳定性,会出现小的差别。如果应用对于统一帧率要求很严格,可以使用其它的方式来处理,之后我们会介绍这方面的知识。
向量
物理中我们使用向量来表示速度,向量包括大小和方向两个属性。其大小是一个非负整数。向量是没有位置的,它只能表示在某一方向上大小的改变快慢。两个向量在大小和方向都相同的情况下是相等的。
对于向量的相加,我们通常会将向量按坐标轴正交分解,之后在每个坐标轴方向上执行对应的加法,最后再将两个坐标轴上的结果进行正交合成,即得到向量相加的结果。
一维坐标系统下的速度
我们给之前的的Ball类添加vx与vy 来分别表示X轴及Y轴下的速度大小。对象的移动就可以在每一帧开始时给其坐标增加加对应的速度大小来实现。如下:
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var ball1=new Ball();
ball1.vx=1;
ball1.x=100;
(function animationLoop(){
window.requestAnimFrame(animationLoop,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ball1.x+=ball1.vx;
ball1.paint(context);
})();
};
如上代码所示,每一帧开始时,我们为小球的X坐标ball.x增加了其在X轴上的速度ball.vx,于是就可以实现小球从初始位置一直向右移动的效果。
二维坐标系统下的速度
二维坐标下的速度计算非常简单,我们只需要分别对X与Y轴上运动对象的位置属性增加对应坐标轴上运动对象的速度大小即可(如果速度是反向的,就需要减少速度大小)。此时,代码为:
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var ball1=new Ball();
ball1.vx=1;
ball1.vy=1;
ball1.x=100;
ball1.y=100;
(function animationLoop(){
window.requestAnimFrame(animationLoop,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ball1.x+=ball1.vx;
ball1.y+=ball1.vy;
ball1.paint(context);
})();
};
如上代码所示,每一帧开始时,我们为小球的X坐标ball.x增加了其在X轴上的速度ball.vx,同时为小球Y坐标ball.y增加了其在Y轴上的速度ball.vy。这样,在运动中速度正交合并后,就可以实现小球从初始位置开始沿合并方向运动以速度大小移动的效果。
已知初始方向及大小的速度
前面我们实现的都是已知两个正交坐标轴方向速度大小的运动,但在实际应用中,这种情况很少见,更多的是已知速度的大小及方向的运动。此时,我们就需要使用之前介绍的三角函数。常见的变换如下:
vx=Math.cos(angle)*V;
vy=Math.sin(angle)*V;
此时,我们之前的运动小球的代码如下:
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var angle=45;
var speed=1;
var ball1=new Ball();
//注意此处必须执行角度弧度转换
angle=angle*Math.PI/180;
ball1.vx=Math.cos(angle)*speed;
ball1.vy=Math.sin(angle)*speed;
ball1.x=100;
ball1.y=100;
(function animationLoop(){
window.requestAnimFrame(animationLoop,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ball1.x+=ball1.vx;
ball1.y+=ball1.vy;
ball1.paint(context);
})();
};
此时就实现了小球从初始位置,以方向45度,大小为1的速度移动的效果。
鼠标跟随效果
之前,我们实现了一个跟随鼠标位置转到的箭头,在此我们给箭头添加速度,让箭头跟随鼠标移动。首先,需要给箭头添加两个坐标轴方向的速度属性。接着,在每一帧中我们计算出箭头中心到鼠标所在位置的向量,此时箭头的速度给箭头位置添加此向量后即可。代码实现如下:
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var mouse=utils.captureMousePosition(canvas);
var speed=5;
var arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;
(function animationLoop(){
window.requestAnimFrame(animationLoop,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
//取得变化向量(从箭头位置指向鼠标位置)
var dx=mouse.x-arrow.x;
var dy=mouse.y-arrow.y;
var angle=Math.atan2(dy,dx);
arrow.rotation=angle;
//速度位移更新
arrow.vx=Math.cos(angle)*speed;
arrow.vy=Math.sin(angle)*speed;
arrow.x+=arrow.vx;
arrow.y+=arrow.vy;
arrow.paint(context);
})();
};
速度扩展
除了对于运动对象的位置使用速度来改变,我们也可以对于运动对象的其它属性使用这种方式来进行改变。比如对象的旋转属性,在游戏中就是经常使用到的一个功能。下面我们实现一个对象自旋的功能。
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var rotationSpeed=1;
var arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;
(function animationLoop(){
window.requestAnimFrame(animationLoop,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
//更新箭头旋转属性值
arrow.rotation+=rotationSpeed*Math.PI/180;
arrow.paint(context);
})();
};
分享到:
相关推荐
canvas拼图游戏,基于html + canvas画布实现
H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏
HTML5 Canvas 赛车游戏动画DEMO演示 键盘控制车的方向
利用canvas画布,进行撞击,消除操作的小游戏
canvas端午节小游戏
canvas拼图小游戏
html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏
试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏。 包含一些基本的功能:躲避障碍物、计分、排行榜等等。后端的工程也一并上传了,在java目录中,很简单的一个SpringMVC工程。 游戏原型见这里。...
通过一个简单的例子,讲解如何在HTML5 canvas中开发游戏,主要是定时器的用法值得大家借鉴
canvas端午节吃粽子小游戏,兼容移动端
canvas 飞机大战小游戏
HTML5 Canvas赛车游戏动画,赛车游戏动画演示。
canvas 实现2d 简单小游戏,点击出现蓝色攻击方块,攻击黑色方块得分,触碰红色方块游戏结束,黑色方块想灭完,游戏等级提升
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
canvas-弹珠游戏
HTML 5 CANVAS游戏开发实战
canvas打砖块小游戏
1.open-type=“share”,onShareAppMessage实现分享微信功能。2.canvas绘制分享海报。
HTML5+CANVAS游戏开发实战,很值得学习,就算不是做游戏,但是对js的进阶也很有好处。
canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏