HTML5 game framework cnGameJS development record-game scene object-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 game framework cnGameJS development record-game scene object

黄舟

Mar 24, 2017 pm 03:58 PM

1. When is the sceneobject needed?

Scene objects are different from the map objects introduced in the previous article. They are used in different types of games. Previous map objects were used in grid games, such as Sokoban and Tank Battle. The scene objects introduced in this section are suitable for games with specific scenes, such as Super Mario, Dinosaur Kombat, etc. This type of game usually controls a player object in a 2D scene. As the player moves, the scene moves with it.

2. Scene example:

Effect: (left and right keys control Super Mario’s movement)

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(&#39;gameCanvas&#39;,{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>

Copy after login

3. Code implementation:
To construct a scene, you first need a background that is wide enoughPictureWhen the player moves to the right, the player is always at the midpoint of the background, and the player's speed is converted to the background in the opposite direction The speed of movement. First look at the initialization function:

/**
         *初始化
        **/
        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;
            
        },

Copy after login

In addition to xy and size, the parameters passed in by the user also have three parameters. One parameter is to set whether to place the player object in the center and only move the background. without moving the player. If you want to achieve the above background moving effect, this parameter must be set to true. Another parameter is to set whether to loop. If set to loop, after the background moves to the extreme point, it will return to the original position. The last parameter is onEnd. If it is set to acyclic, the callback function will be triggered after the background moves to the extreme.

The focus of the scene object is the update method:

/**
         *背景移动时的更新
        **/
        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]);
            }
        },

Copy after login

This method first determines whether the player object has exceeded the center of the scene. If it has exceeded, calculate the exceeded distance and fix the player In the center of the scene, the excess distance is set to the distance between the background moving in the opposite direction and the distance other sprites except the player move in the opposite direction. In this case, only the background moves and other sprite objects move, and the player is fixed. If it is a loop, reset the x coordinate of the background and other sprites after exceeding the movement range. If it is not a loop, the onEnd callback function is called after the movement ends. In addition, if you need to restrict the player to always be within the display area, you can also call the insideView method.

Attach all the codes of the scene object:

/**
 *
 *场景
 *
**/
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;iCopy after login

The above is the detailed content of HTML5 game framework cnGameJS development record-game scene object. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn