html 游戏 精灵,HTML5游戏框架cnGameJS开发实录-精灵对象篇

返回目录

1.什么是精灵对象(sprite)？

所谓的精灵对象，就是游戏中的一个具有行为的元素，以超级玛丽为例，玛丽，敌人都算是一个精灵对象。在cnGameJS框架中，精灵对象如下几个特点：

1.添加动画：在之前的动画篇中，我们介绍过cnGameJS如何实现帧动画。而作为精灵对象，就是动画的使用者。例如我们控制玛丽向不同方向的行走，玛丽会产生行走的动画。

2.包含图像：对于另外一些精灵对象，它可能不需要运动动画，这时我们就可以只让它使用图像。

3.能进行不同类型的运动：可以让精灵对象向不同方向，以不同加速度进行移动。

2.demo展现

这里以一个简单的demo进行展现，我们通过鼠标控制玛丽的行动(匀加速运动)，当玛丽停止时，使用图片。当玛丽移动时，使用动画，键盘左右方向键控制玛丽的移动。

效果：

代码：

var Src="http://images.cnblogs.com/cnblogs_com/Cson/290336/o_player.png";

/* 初始化 */

cnGame.init('gameCanvas',{width:300,height:150});

var floorY=cnGame.height-40;

var gameObj=(function(){

/* 玩家对象 */

var player=function(options){

this.init(options);

this.speedX=0;

this.moveDir;

this.isJump=false;

}

cnGame.core.inherit(player,cnGame.Sprite);

player.prototype.initialize=function(){

this.addAnimation(new cnGame.SpriteSheet("playerRight",Src,{frameSize:[50,60],loop:true,width:150,height:60}));

this.addAnimation(new cnGame.SpriteSheet("playerLeft",Src,{frameSize:[50,60],loop:true,width:150,height:120,beginY:60}));

}

player.prototype.moveRight=function(){

if(cnGame.core.isUndefined(this.moveDir)||this.moveDir!="right"){

this.moveDir="right";

this.speedX<0&&(this.speedX=0);

this.setMovement({aX:10,maxSpeedX:15});

this.setCurrentAnimation("playerRight");

}

}

player.prototype.moveLeft=function(){

if(cnGame.core.isUndefined(this.moveDir)||this.moveDir!="left"){

this.moveDir="left";

this.speedX>0&&(this.speedX=0);

this.setMovement({aX:-10,maxSpeedX:15});

this.setCurrentAnimation("playerLeft");

}

}

player.prototype.stopMove=function(){

if(this.speedX<0){

this.setCurrentImage(Src,0,60);

}

else if(this.speedX>0){

this.setCurrentImage(Src);

}

this.moveDir=undefined;

this.resetMovement();

}

player.prototype.update=function(){

player.prototype.parent.prototype.update.call(this);//调用父类update

if(cnGame.input.isPressed("right")){

this.moveRight();

}

else if(cnGame.input.isPressed("left")){

this.moveLeft();

}

else{

this.stopMove();

}

}

return {

initialize:function(){

cnGame.input.preventDefault(["left","right","up","down"]);

this.player=new player({src:Src,width:50,height:60,x:0,y:floorY-60});

this.player.initialize();

},

update:function(){

this.player.update();

},

draw:function(){

this.player.draw();

}

};

})();

cnGame.loader.start([Src],gameObj);

复制代码

3.实现

和动画篇spriteSheet对象一样，sprite对象同样划分三个阶段：初始化，更新，绘制。

首先看sprite的初始化函数：/**

*初始化

**/

init:function(options){<