仿微信打飛機遊戲網頁版，基於cocos2d-js遊戲引擎，在線試玩，內含源碼

早幾年研究cocos2d的demo項目，這個是基於cocos2d-js遊戲引擎，整個遊戲用js編寫。

玩法：鼠標拖動飛機移動便可

• 試玩地址
• 源碼地址

遊戲截圖：

文件說明

• cocos2dx：遊戲引擎
• res：存放遊戲素材（圖片）
• src：遊戲源碼
• cocos2d.js：引擎配置文件

核心代碼以下（src/scene/OuterSpaceScene.js）：

/**
 * Date: 14-3-7
 * Time: 下午4:10
 * 場景層,外太空,全部的元素都在這個場景中
 */
var OuterSpaceLayer = cc.Layer.extend({
    m_bgSprite1:null, // 背景圖1
    m_bgSprite2:null, // 背景圖2
    m_player:null, // 玩家飛機
    m_touchArea:null,// 飛機活動區域
    m_distanceFingerPlaneX:0, // 手指與玩家飛機的x距離
    m_distanceFingerPlaneY:0, // 手指與玩家飛機的y距離

    init:function () {
        this._super(); // 調用父類init方法

        this._initImgCache(); // 加載圖片
        this._initBG(); // 初始化背景圖
        this._initPlayer(); // 初始化玩家
        this._initEnemy(); // 初始化敵人
        this._initBullet();
        this.setTouchEnabled(true); // 設置界面能夠觸摸

        this.scheduleUpdate(); // 啓動update循環

    }

    /**
     * @override
     */
    ,registerWithTouchDispatcher:function(){
        //CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,0,true);
        // 註冊屏幕觸摸事件
        cc.registerTargetedDelegate(0,true,this);
    }

    /**
     * @override
     */
    ,onTouchBegan:function(touch){
        var touchPoint = touch.getLocation();

        var playerPoint = this.m_player.getPosition();

        this.m_distanceFingerPlaneX = touchPoint.x - playerPoint.x;
        this.m_distanceFingerPlaneY = touchPoint.y - playerPoint.y;
        return true;
    }

    /**
     * @override
     */
    ,onTouchMoved:function(touch,event){
        var touchPoint = touch.getLocation();
        //cc.Director.getInstance().convertToUI(posInView);
        var newPoint = cc.p(touchPoint.x - this.m_distanceFingerPlaneX
                ,touchPoint.y - this.m_distanceFingerPlaneY);

        var desPos = this._buildMoveArea(newPoint);

        if(this._isMoveArea(desPos)){
            this.m_player.setPosition(desPos);
        }

    }
    // 構建玩家飛機可移動區域
    ,_buildMoveArea:function(newPoint){
        if (newPoint.x>=cc.rectGetMaxX(this.m_touchArea))
        {
            newPoint.x = cc.rectGetMaxX(this.m_touchArea);
        }
        if (newPoint.x <= cc.rectGetMinX(this.m_touchArea))
        {
            newPoint.x = cc.rectGetMinX(this.m_touchArea);
        }
        if (newPoint.y >= cc.rectGetMaxY(this.m_touchArea))
        {
            newPoint.y = cc.rectGetMaxY(this.m_touchArea);
        }
        if (newPoint.y <= cc.rectGetMinY(this.m_touchArea))
        {
            newPoint.y = cc.rectGetMinY(this.m_touchArea);
        }

        return newPoint;
    }
    // 是否在移動範圍
    ,_isMoveArea : function(ccp){
        return cc.rectContainsPoint(this.m_touchArea,ccp);
    }

    ,_initImgCache:function(){
        var cache = cc.SpriteFrameCache.getInstance();
        cache.addSpriteFrames(s_plistFileName, s_plistImgName);
    }
    // 建立敵人
    ,_initEnemy:function(){
        // 建立怪物管理器
        var enemyMgr = new EnemyManager();
        enemyMgr.setPlayer(this.m_player);
        this.addChild(enemyMgr,3);
    }
    ,_initBullet:function(){
        // 設置普通子彈
        this.m_player.setBulletNormal(this._buildBullet("bullet_normal.png"));
    }

    ,_buildBullet:function(imgName){
        var playerSize = this.m_player.getSprite().getContentSize();
        var playerPos = this.m_player.getPosition();

        var bullet = new Bullet();
        bullet.bindSprite(cc.Sprite.createWithSpriteFrameName(imgName));
        // 子彈從飛機頭部發出
        bullet.setPositionY(playerPos.y + playerSize.height/2);

        this.addChild(bullet,2);

        return bullet;
    }

    /**
     * 初始化背景圖
     */
    ,_initBG:function(){
        var size = cc.Director.getInstance().getVisibleSize();

        this.m_bgSprite1 = cc.Sprite.create(s_BG);
        this.m_bgSprite1.setPosition(size.width/2,size.height/2);
        this.addChild(this.m_bgSprite1,0);

        this.m_bgSprite2 = cc.Sprite.create(s_BG);
        // 讓地圖二緊跟在地圖1的後面
        this.m_bgSprite2.setPosition(size.width/2,size.height + size.height/2);
        // 垂直翻轉圖片
        this.m_bgSprite2.setFlippedY(true);
        this.addChild(this.m_bgSprite2,0);
    }

    ,_initPlayer:function(){
        var size = cc.Director.getInstance().getVisibleSize();
        // 建立角色
        this.m_player = new Player();

        this.m_player.bindSprite(cc.Sprite.createWithSpriteFrameName("player.png"));
        this.m_player.setPosition(size.width/2,100);

        this.addChild(this.m_player,1);
        var playerSize = this.m_player.getSprite().getContentSize();
        // 初始化飛機活動區域
        this.m_touchArea = cc.rect(
            playerSize.width/2 - 8
            ,playerSize.height/2 - 5
            ,size.width - playerSize.width + 18
            ,size.height - playerSize.height + 13);
    }

    ,_scrollBG:function(){
        var posY1 = this.m_bgSprite1.getPositionY();
        var posY2 =this. m_bgSprite2.getPositionY();

        var speed =1;

        posY1 -=speed;
        posY2 -=speed;

        var mapSize = this.m_bgSprite1.getContentSize();
        /*
         當第一個地圖徹底離開屏幕時,讓第二個地圖徹底出如今屏幕上,
         同時讓第一個地圖緊貼在第二個地圖以後
         */
        if(posY1< -mapSize.height/2){
            posY2 = mapSize.height/2;
            posY1 = mapSize.height + mapSize.height/2;
        }
        /*
         當第二個地圖徹底離開屏幕時,讓第一個地圖徹底出如今屏幕上,
         同時讓第二個地圖緊貼在第一個地圖以後
         */
        if(posY2<-mapSize.height/2){
            posY1 = mapSize.height/2;
            posY2 = mapSize.height + mapSize.height/2;
        }
        this.m_bgSprite1.setPositionY(posY1);
        this.m_bgSprite2.setPositionY(posY2);
    }


    ,update:function(dt){
        this._scrollBG();
        this.m_player.fire();
    }
});

var OuterSpaceScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new OuterSpaceLayer();
        this.addChild(layer);
        layer.init();
    }
});

得益於遊戲引擎來帶的便利，代碼寫起來不是很複雜，能夠採用面相對象的方式去寫，看起來也一目瞭然。