基于HTML5的简单游戏动画Demo_update3

demo运动的小球

update1添加多个角色

update2碰撞检测

==========================~O(∩_∩)O~==========卖萌的分割线===========================================
5月结束前最后一次更新。
和update2相比，这次的新增点包括：

1、匀加速运动。包括两个方向（x和y），程序将给出“y方向的匀加速和x方向的匀速”合运动示例，也就是常见的抛物运动。

2、圆周运动。圆周运动的模型和原来的运动模型不匹配，如果从物理的角度看，圆周运动是由于物体受到向心力而产生的，其中涉及到向心加速度、角速度等问题，过于复杂。这里区别于原来的位移、速度、加速度模型，另外设置了运动圆心、角度、半径模型，从而从纯几何的角度实现圆周运动。当然，边界检测对这个模型就不适用了。

3、模拟碰撞（仅边界检测）使物体减速的效果。在实际场景中，一个物体掉到地上再弹起不可能再回到原来的高度，因为碰到地面后由于形变和阻力等原因导致物体的能量减小，也就是速度变慢。这里采用最简单的方法模拟物体速度变慢的效果。

先来看效果：





动态截图跳帧很厉害，如果想看原来的效果，自己复制粘贴源码到html文件和js文件用浏览器运行一下吧！

另外，碰撞检测的解决方法还没想好，所以干脆先不要碰撞检测了，原来的代码还在，只是暂时没有用到。

下面是这次的源码：

javascript文件

/**	碰撞检测方法
*	关于碰撞检测的具体方法在写物理引擎的时候再继续完善
*/
function CollisionDetect(spriteA, spriteB) {
var length = Math.sqrt((spriteA.x-spriteB.x)*(spriteA.x-spriteB.x) + (spriteA.y-spriteB.y)*(spriteA.y-spriteB.y));
var minLength = spriteA.radius+spriteB.radius;
if(length <= minLength) {		// 如果碰撞了，停止
spriteA.speed.x = 0;
spriteA.speed.y = 0;
spriteB.speed.x = 0;
spriteB.speed.y = 0;
}
};
/**	边界检测
*	边界检测方法：当前只对MoveXY运动的物体有效
*/
function BoundDetect(sprite) {
if(sprite.x > 1000-sprite.radius || sprite.x < sprite.radius) {
sprite.velocity.vx *= (-1);			// 反向
sprite.velocity.vx += sprite.ax;	// 速度调整
}
if(sprite.y > 500-sprite.radius || sprite.y < sprite.radius) {
sprite.velocity.vy *= (-1);			// 反向
sprite.velocity.vy += sprite.ay;	// 速度调整
}
};
function BoundDetect2(sprite) {					// 添加了阻力的碰撞检测
if(sprite.x > 300-sprite.radius || sprite.x < sprite.radius) {
sprite.velocity.vx *= (-1);			// 反向
sprite.velocity.vx += 3*sprite.ax;	// 速度调整
if(sprite.velocity.vx < 0 && sprite.velocity.vx > -1) {
sprite.velocity.vx = 0;
sprite.ax = 0;
}
}
if(sprite.y > 500-sprite.radius || sprite.y < sprite.radius) {
sprite.velocity.vy *= (-1);			// 反向
sprite.velocity.vy += 3*sprite.ay;	// 速度调整
if(sprite.velocity.vy < 0 && sprite.velocity.vy > -1) {
sprite.velocity.vy = 0;
sprite.ay = 0;
}
}
};
/**	帧频
*/
var ifps = 1000/60;							// 帧频为60fps
/**	帧对象
*/
var Frame = function(ctx) {
this.sprites = new Array();				// 当前画布中的角色集合
this.ctx = ctx;							// 帧维护的画布（可以不止一个，这里只用一个）
};
Frame.prototype = {
refresh : function() {					// refresh方法把当前帧的内容画到画布上，就是更新整个画布
this.ctx.clearRect(0,0,1000,500);	// 清空画布
var num = this.sprites.length;
for(var i = 0; i < num; ++i) {		// 遍历全部内容
this.sprites[i].draw();			// 调用各自的draw方法
}
}
}
/**	角色类设计
*/
var Sprite = function() {
this.ax = 0;				// 初始加速度ax
this.ay = 0;				// 初始加速度ay
this.velocity = {
vx : 1,					// 初始横向速度
vy : 1					// 初始纵向速度
};
this.round = {				// 圆周运动相关参数
angularVelocity : -1,	// 角速度
roundRadius : 0,		// 圆周运动半径
angle : 0,				// 初始角
centerX : 0,			// 圆心x
centerY : 0				// 圆心y
}
};
Sprite.prototype = {
draw : function() {
},
moveXY : function() {
this.x += this.velocity.vx;
this.y += this.velocity.vy;
this.velocity.vx += this.ax;
this.velocity.vy += this.ay;
},
moveRound : function() {
var rm = this.round;
rm.angle += rm.angularVelocity;
rm.angle = rm.angle >= 360 ? 0 : rm.angle;
this.x = rm.centerX + rm.roundRadius * Math.cos(rm.angle*(Math.PI/180));
this.y = rm.centerY + rm.roundRadius * Math.sin(rm.angle*(Math.PI/180));
}
};
/**	圆类：继承角色类
*/
var Circle = function(ctx,x,y,radius,style) {
this.ctx = ctx;
this.x = x;
this.y = y;
this.radius = radius;
this.propotity = {
fillStyle:"#acffac",
strokeStyle:"#000000",
lineWidth:"2"
};
};
Circle.prototype = new Sprite();
Circle.prototype.draw = function() {
this.ctx.beginPath();
this.ctx.lineWidth = this.propotity.lineWidth;
this.ctx.strokeStyle = this.propotity.strokeStyle;
this.ctx.fillStyle = this.propotity.fillStyle;
this.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
this.ctx.stroke();
this.ctx.fill();
};
/**	自动控制器
*/
var AutoControler = function(aFrame) {
this.currentFrame = aFrame;
this.spriteSet;
};
AutoControler.prototype = {

addSprite : function(aSprite) {				// 添加角色的方法
if(!this.spriteSet){
this.spriteSet = new Array();
}
this.spriteSet.push(aSprite);
},

move : function() {							// 控制角色运动的方法
var self = this;
var arr = this.spriteSet;
var len = arr.length;
for(var i = 0; i < len; ++i) {
if(arr[i].round.angularVelocity == -1) {
arr[i].moveXY();
}
else {
arr[i].moveRound();
}
}
this.currentFrame.refresh();
for(var i = 0; i < len; ++i) {
BoundDetect(arr[i]);				// 边界检测：检测每一个角色
//for(var j = 0; j < len; ++j) {
//	if(i == j) continue;
//	CollisionDetect(arr[i], arr[j]);
//}
}
setTimeout(function(){self.move();}, ifps);
},

move2 : function() {						// 碰撞后速度减小
var self = this;
var arr = this.spriteSet;
var len = arr.length;
for(var i = 0; i < len; ++i) {
if(arr[i].round.angularVelocity == -1) {
arr[i].moveXY();
}
else {
arr[i].moveRound();
}
}
this.currentFrame.refresh();
for(var i = 0; i < len; ++i) {
BoundDetect2(arr[i]);				// 边界检测：检测每一个角色
}
setTimeout(function(){self.move2();}, ifps);
}

};

html文件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moving Circle</title>
<script src="demo.js"></script>
</head>
<body>
<canvas id="zCanvas" width="1000" height="500" style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="small" width="300" height="500" style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
// 获取当前绘图区
var can = document.getElementById("zCanvas");
var ctx = can.getContext("2d");
// 创建帧对象
frame = new Frame(ctx);
// 构造7个角色
var ca = new Circle(ctx,80,80,10);
var cb = new Circle(ctx,20,20,10);
var cc = new Circle(ctx,50,300,10);
var cd = new Circle(ctx,800,100,10);
var ce = new Circle(ctx,500,200,10);
// 改变角色cb的属性
cb.propotity.fillStyle = "#ff0000";
cb.velocity = {vx:0, vy:0};
cb.ay = 0.3;
// 改变角色cc的属性
cc.propotity.fillStyle = "#8888aa";
cc.velocity = {vx:5, vy:0};
cc.ay = 1;
// 改变角色cd的属性
cd.propotity.fillStyle = "#0000ff";
cd.velocity = {vx:3,vy:1};
// 改变角色ce的属性
ce.propotity.fillStyle = "#aaff00";
ce.velocity = {vx:1,vy:2};
// 创建做圆周运动的角色
var cr = new Circle(ctx,80,80,10);
var cs = new Circle(ctx,80,80,10);
// 修改cr属性
cr.propotity.fillStyle = "#aa55bb";
cr.round = {angularVelocity : 5, roundRadius : 50, angle : 0, centerX : 200, centerY : 200};
// 修改cs属性
cs.propotity.fillStyle = "#ffcc88";
cs.round = {angularVelocity : 5, roundRadius : 80, angle : 0, centerX : 500, centerY : 200};
// 把角色添加到帧
frame.sprites.push(ca);
frame.sprites.push(cb);
frame.sprites.push(cc);
frame.sprites.push(cd);
frame.sprites.push(ce);
frame.sprites.push(cr);
frame.sprites.push(cs);
// 创建控制器对象
var controler = new AutoControler(frame);
controler.addSprite(ca);
controler.addSprite(cb);
controler.addSprite(cc);
controler.addSprite(cd);
controler.addSprite(ce);
controler.addSprite(cr);
controler.addSprite(cs);
controler.move();
////////////////////////////////////////////////////////////////////////////////////////////
var canr = document.getElementById("small");
var ctxr = canr.getContext("2d");
var framer = new Frame(ctxr);
var cra = new Circle(ctxr,50,50,20);
cra.propotity.fillStyle = "#ff8888";
cra.velocity = {vx:3, vy:0};
cra.ay = 0.5;
framer.sprites.push(cra);
var controlerr = new AutoControler(framer);
controlerr.addSprite(cra);
controlerr.move2();
</script>
</body>
</html>

注意改一下js文件名。

从下一次更新开始，所有的更新将在下一篇文章里面整理，不会再另开新的文章。另外，基于html5的游戏物理引擎的文章将会发布。

物理引擎部分将会以该系列为基础进行讲解。敬请期待。