1. Quand la scène objet est-elle nécessaire ?
Les objets scène sont différents des objets cartographiques présentés dans l'article précédent. Ils sont utilisés dans différents types de jeux. Les objets cartographiques précédents étaient utilisés dans des jeux de grille, tels que Sokoban et Tank Battle. Les objets de scène présentés dans cette section conviennent aux jeux avec des scènes spécifiques, comme Super Mario, Dinosaur Kombat, etc. Ce type de jeu contrôle généralement un objet joueur dans une scène 2D. À mesure que le joueur se déplace, la scène se déplace en conséquence.
2. Exemple de scène :
Effet : (les touches gauche et droite contrôlent le mouvement de Super Mario)
Code :
<body>
<div><canvas id="gameCanvas">请使用支持canvas的浏览器查看</canvas></div>
</body>
<script src="cnGame_v1.0.js"></script>
<script>
var Src="http://images.cnblogs.com/cnblogs_com/Cson/290336/o_player.png";
var background="background.png";
/* 初始化 */
cnGame.init('gameCanvas',{width:500,height:400});
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();
this.background=new cnGame.View({src:background,player:this.player,imgWidth:2301});
this.background.centerPlayer(true);
this.background.insideView(this.player,"x");
},
update:function(){
this.player.update();
this.background.update([this.player]);
},
draw:function(){
this.background.draw();
this.player.draw();
}
};
})();
cnGame.loader.start([Src,background],gameObj);
</script>Copier après la connexion
3 . Implémentation du code :
Pour construire une scène, il faut d'abord une image d'arrière-plan suffisamment large. Lorsque le joueur se déplace vers la droite, il est toujours au milieu de l'arrière-plan. , et la vitesse du joueur est convertie en direction de l'arrière-plan. La vitesse de déplacement dans la direction opposée. Regardez d'abord la fonction d'initialisation :
/**
*初始化
**/
init:function(options){
/**
*默认对象
**/
var defaultObj={
width:cg.width,
height:cg.height,
imgWidth:cg.width,
imgHeight:cg.height,
x:0,
y:0
}
options=options||{};
options=cg.core.extend(defaultObj,options);
this.player=options.player;
this.width=options.width;
this.height=options.height;
this.imgWidth=options.imgWidth;
this.imgHeight=options.imgHeight;
this.centerX=this.width/2;
this.src=options.src;
this.x=options.x;
this.y=options.y;
this.insideArr=[];
this.isLoop=false;;
this.isCenterPlayer=false;
this.onEnd=options.onEnd;
},Copier après la connexion
En plus de xy et de la taille, les paramètres transmis par l'utilisateur ont également trois paramètres. Un paramètre consiste à définir s'il faut placer le. objet joueur au centre. Déplace l'arrière-plan sans déplacer le joueur. Si vous souhaitez obtenir l'effet de déplacement d'arrière-plan ci-dessus, ce paramètre doit être défini sur true. Un autre paramètre consiste à définir s'il faut boucler. S'il est réglé en boucle, une fois que l'arrière-plan se déplace jusqu'au point extrême, il reviendra à sa position d'origine. Le dernier paramètre est onEnd S'il est défini sur acyclique, la fonction de rappel sera déclenchée une fois que l'arrière-plan aura atteint l'extrême.
Le focus de l'objet scène est la méthode de mise à jour :
/**
*背景移动时的更新
**/
update:function(spritelist){//传入所有sprite的数组
if(this.isCenterPlayer){
if(this.player.x>this.centerX){
if(this.x<this.imgWidth-this.width){
var marginX=this.player.x-this.centerX;
this.x+=marginX;
if(spritelist){
for(var i=0,len=spritelist.length;i<len;i++){
if(spritelist[i]==this.player){
spritelist[i].x=this.centerX;
}
else{
spritelist[i].x-=marginX;
}
}
}
}
else if(this.isLoop){
if(spritelist){
for(var i=0,len=spritelist.length;i<len;i++){
if(spritelist[i]!=this.player){
spritelist[i].move(this.imgWidth-this.width);
}
}
}
this.x=0;
}
else{
this.onEnd&&this.onEnd();
}
}
}
for(var i=0,len=this.insideArr.length;i<len;i++){
inside.call(this,this.insideArr[i]);
}
},Copier après la connexion
Cette méthode détermine d'abord si l'objet joueur a dépassé le centre de la scène. S'il a dépassé, calculez la distance dépassée, et le joueur est fixé au centre de la scène, et la distance excédentaire est définie sur la distance entre l'arrière-plan se déplaçant dans la direction opposée et la distance entre les autres sprites, à l'exception du joueur, qui se déplacent dans la direction opposée. Dans ce cas, seuls l'arrière-plan se déplace et les autres objets sprite bougent, et le joueur est fixe . S'il s'agit d'une boucle, réinitialisez la coordonnée x de l'arrière-plan et des autres sprites après avoir dépassé la plage de mouvement. S'il ne s'agit pas d'une boucle, la fonction de rappel onEnd est appelée après la fin du mouvement. De plus, si vous devez restreindre le lecteur pour qu'il soit toujours dans la zone d'affichage, vous pouvez également appeler la méthode insideView.
Joindre tous les codes de l'objet scène :
/**
*
*场景
*
**/
cnGame.register("cnGame",function(cg){
/**
*使指定对象在可视区域view内
**/
var inside=function(sprite){
var dir=sprite.insideDir;
if(dir!="y"){
if(sprite.x<0){
sprite.x=0;
}
else if(sprite.x>this.width-sprite.width){
sprite.x=this.width-sprite.width;
}
}
if(dir!="x"){
if(sprite.y<0){
sprite.y=0;
}
else if(sprite.y>this.height-sprite.height){
sprite.y=this.height-sprite.height;
}
}
}
var view=function(options){
this.init(options);
}
view.prototype={
/**
*初始化
**/
init:function(options){
/**
*默认对象
**/
var defaultObj={
width:cg.width,
height:cg.height,
imgWidth:cg.width,
imgHeight:cg.height,
x:0,
y:0
}
options=options||{};
options=cg.core.extend(defaultObj,options);
this.player=options.player;
this.width=options.width;
this.height=options.height;
this.imgWidth=options.imgWidth;
this.imgHeight=options.imgHeight;
this.centerX=this.width/2;
this.src=options.src;
this.x=options.x;
this.y=options.y;
this.insideArr=[];
this.isLoop=false;;
this.isCenterPlayer=false;
this.onEnd=options.onEnd;
},
/**
*使player的位置保持在场景中点之前的移动背景
**/
centerPlayer:function(isLoop){
isLoop=isLoop||false;
this.isLoop=isLoop;
this.isCenterPlayer=true;
},
/**
*使对象的位置保持在场景内
**/
insideView:function(sprite,dir){//dir为限定哪个方向在view内，值为x或y，不传则两个方向皆限定
if(cg.core.isArray(sprite)){
for(var i=0,len=sprite.length;iCopier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
