【coco2d-html5簡單遊戲開發】一、連鎖反應小遊戲

最近在做什麼？很多兄弟可能想知道，放着Ideas和Ominds不做，blog也不更新，該有很多人在罵了吧。呵呵，其實，我也很迷茫很糾結，是啊，ideas到底該做成什麼樣？ominds又該如何，半個月以來一直沒有停止過思考，完全沒有任何想法，總覺的自己已經沒有思想了，快死了嗎？

還是做了個簡單的東西，首先是我的個人簡歷（點擊查看）這個就不做過多介紹了，畢竟沒有什麼技術可言，只不過是一時興起，也可到github上下載哦。。。

好了言歸證轉，想做點小遊戲玩玩（當然不會說是因爲缺錢啊），cocos2d-html5，爲什麼選中這個，其實，我也不知到，可能是最近在學前端吧，不過，想做的是cocosd-android，畢竟在地鐵上是件無聊的事情。。。。。

再說這個連鎖反應小遊戲，不得不吐嘈一下cocos官網，你妹啊，給個入門教程都是過時的，還在那掛着。。。。這個小遊戲是國外的一個教程，自己加了點東西，想要把它加工一下，還沒有完成，你們懂的，對遊戲，我是在是沒什麼經驗，也不怎麼玩。。。。。

那麼。。。

一、環境搭建

開始吧，到官方下載cocos2d-html5包，我下的是v2.2.2，解壓，如果你用的是eclipse，那麼新建web項目，將cocos2d、extensions、external、lib、template、tools目錄直接拷貝到webroot下，如果是nodejs開發（如果不知道如何使用nodejs點擊），請將以上目錄拷貝到public下。（開始我用的是eclipse+tomcat，不過發現js修改後，總是很不容易加載進去，這讓我很傷心，後來又用nodejs+sublime（當然你也可以繼續用eclips）
我們假設你已經搭建好了一個nodejs的項目，並且已經把cocos2d相關文件放在了public目錄下（其實你用eclipse+tomcat，建立web project也是可以的，但是我不知道怎麼部署到heroku上，有會的同學在下面留話），修改view/index.ejs文件，全部替換爲：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyTest</title>
</head>
<body style="padding:0; margin: 0 auto; background: #fff;">
<div style="text-align: center; font-size: 0;margin-top:30px;">
 <canvas id="gameCanvas" width="600" height="600">
  Your browser does not support the canvas tag
 </canvas>
</div>

</body>
</html>
<script src="/app/cocos2d.js"></script>

在public目錄下新建app文件夾，在app下新建cocos2d.js，內容：

var MW = MW || {};
(function () {
    var d = document;
    var c = {
        COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
        box2d:false,
        chipmunk: false, 
        showFPS:false,
        frameRate:60,
        tag:'gameCanvas', //the dom element to run cocos2d on
        engineDir:'cocos2d/',
        appFiles:['app/Resource.js','app/GameConfig.js','app/MenuLayer.js','app/CircleChain.js',
                    'app/AboutLayer.js','app/GameOver.js'
                    ]
    };
    window.addEventListener('DOMContentLoaded', function () {
        //first load engine file if specified
        var s = d.createElement('script');
        s.src =  'cocos2d/jsloader.js';
        d.body.appendChild(s);
        document.ccConfig  = c;
        s.id = 'cocos2d-html5';
    });
})();

看一下代碼，其中第一行先不說，tag:'gameCanvas' 這句跟我們的html的div標籤id一致，engineDir:'cocos2d/'這句表示我們使用的是cocos2d引擎，appFiles裏面加載的是各個文件，等會一一說明。

在public（確實是public目錄）目錄下新建main.js，內容：

var cocos2dApp = cc.Application.extend({
	config:document.ccConfig,
    ctor:function (scene) {
        this._super();
        this.startScene = scene;
        cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
        cc.setup(this.config['tag']);
        cc.AppController.shareAppController().didFinishLaunchingWithOptions();
    },
    applicationDidFinishLaunching:function () {
        if(cc.RenderDoesnotSupport()){
            //show Information to user
            alert("Browser doesn't support Canvas or WebGL");
            return false;
        }
         // initialize director
        var director = cc.Director.getInstance();
        cc.EGLView.getInstance().setDesignResolutionSize(480,800,cc.RESOLUTION_POLICY.SHOW_ALL);
        cc.EGLView.getInstance().resizeWithBrowserSize(true);
        director.setDisplayStats(this.config['showFPS']);
        // set FPS. the default value is 1.0/60 if you don't call this
        director.setAnimationInterval(1.0 / this.config['frameRate']);
        cc.LoaderScene.preload(g_mainmenu, function(){
            director.replaceScene(new this.startScene());
        }, this);


        return true;
    }
});
var myApp = new cocos2dApp(SysMenu.scene);

裏面的一些參數可以看看api（又不得不吐嘈一下這api，你妹，這是api嗎？）

好，在app下，新建Resource.js，內容如下：

var res = {
    effect2_mp3 : 'audio/effect2.mp3',
    effect2_ogg : 'audio/effect2.ogg',
    background_mp3 : 'audio/background.mp3',
    background_ogg : 'audio/background.ogg',
    greenbullet_png : 'res/greenbullet.png',
    greencircle_png : 'res/greencircle.png',
    redbullet_png : 'res/redbullet.png',
    redcircle_png : 'res/redcircle.png',
    gameOver_png : 'res/gameOver.png',
    menu_png : 'res/menu.png',
    bg3_jpg:'res/bg3.jpg',
    bg4_jpg:'res/bg4.jpg',
    logo_png:'res/logo.png',
    logo1_png:'res/logo_1.png',
    logo2_png:'res/logo_2.png',
    menuTitle_png:'res/menuTitle.png'
};

var g_mainmenu = [
    {src:res.effect2_mp3},
    {src:res.effect2_ogg},
    {src:res.background_mp3},
    {src:res.background_ogg},
	{src:res.menu_png},
    {src:res.bg4_jpg},
    {src:res.logo_png},
    {src:res.logo1_png},
    {src:res.logo2_png},
    {src:res.greencircle_png},
    {src:res.menuTitle_png}
];

var g_maingame = [
    //image
    {src:res.greenbullet_png},
    {src:res.greencircle_png},
    {src:res.redbullet_png},
    {src:res.redcircle_png},
    {src:res.gameOver_png}
];

這個文件主要是加載資源的，什麼你已經知道了啊？？？？？在public下，建立兩個文件夾audio放置音頻資源，res放置圖片資源，由於blog，本教程的資源請到git下載

ok，在app下新建MenuLayer.js，內容：

cc.dumpConfig();

var SysMenu = cc.Layer.extend({
    init:function () {
        var bRet = false;
        if (this._super()) {
        	//var layer = cc.LayerColor.create(new cc.Color4B(0, 0, 0, 255), 600, 600);
            //background
        	/*var sp = cc.Sprite.create(res.bg3_jpg);
            sp.setAnchorPoint(0,0);
            this.addChild(sp, 0, 1);*/
            var circleSpeed = 2;
            
            winSize = cc.Director.getInstance().getWinSize();
        	var newGameNormal = cc.Sprite.create(res.menu_png, cc.rect(0, 0, 126, 33));
            var newGameSelected = cc.Sprite.create(res.menu_png, cc.rect(0, 33, 126, 33));
            var newGameDisabled = cc.Sprite.create(res.menu_png, cc.rect(0, 33 * 2, 126, 33));

            var gameSettingsNormal = cc.Sprite.create(res.menu_png, cc.rect(126, 0, 126, 33));
            var gameSettingsSelected = cc.Sprite.create(res.menu_png, cc.rect(126, 33, 126, 33));
            var gameSettingsDisabled = cc.Sprite.create(res.menu_png, cc.rect(126, 33 * 2, 126, 33));

            var aboutNormal = cc.Sprite.create(res.menu_png, cc.rect(252, 0, 126, 33));
            var aboutSelected = cc.Sprite.create(res.menu_png, cc.rect(252, 33, 126, 33));
            var aboutDisabled = cc.Sprite.create(res.menu_png, cc.rect(252, 33 * 2, 126, 33));

            var newGame = cc.MenuItemSprite.create(newGameNormal, newGameSelected, newGameDisabled, function () {
                    this.onButtonEffect();
                    this.onNewGame();
              }.bind(this));
            var gameSettings = cc.MenuItemSprite.create(gameSettingsNormal, gameSettingsSelected, gameSettingsDisabled, this.onSettings, this);
            var about = cc.MenuItemSprite.create(aboutNormal, aboutSelected, aboutDisabled, this.onAbout, this);

            //menu
            var menu = cc.Menu.create(newGame, gameSettings, about);
            menu.alignItemsVerticallyWithPadding(10);
            this.addChild(menu, 1, 2);
            menu.setPosition(winSize.width / 2, winSize.height / 2 - 80);

            //logo
            var logo = cc.Sprite.create(res.logo2_png);
            logo.setAnchorPoint(0, 0);
            logo.setPosition(winSize.width /2 - 160 ,winSize.height / 2 + 10);
            this.addChild(logo, 10, 1);
            this.schedule(this.update, 0.1);
            for(i=0;i<5;i++){
                var greenCircle = cc.Sprite.create(res.greencircle_png);
                var randomDir = Math.random()*2*Math.PI;
                greenCircle.xSpeed=circleSpeed*Math.cos(randomDir);
                greenCircle.ySpeed=circleSpeed*Math.sin(randomDir);
                this.addChild(greenCircle);
                greenCircle.setPosition(new cc.Point(Math.random()*winSize.width,Math.random()*winSize.height));
                greenCircle.schedule(function(){
                     this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
                     if(this.getPosition().x>winSize.width){
                        this.setPosition(new cc.Point(this.getPosition().x-winSize.width,this.getPosition().y));
                    }
                    if(this.getPosition().x<0){
                        this.setPosition(new cc.Point(this.getPosition().x+winSize.width,this.getPosition().y));
                    }
                    if(this.getPosition().y>winSize.height){
                        this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y-winSize.height));
                    }
                    if(this.getPosition().y<0){
                        this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y+winSize.height));
                    }
                })
            }
            if (MW.SOUND) {
                cc.AudioEngine.getInstance().setMusicVolume(0.7);
                cc.AudioEngine.getInstance().playMusic(res.background_mp3, true);
            }
            bRet = true;
        }
        return bRet;
    },
    onNewGame:function (pSender) {
        //load resourcess
        cc.LoaderScene.preload(g_maingame, function () {
            var scene = cc.Scene.create();
            scene.addChild(CircleChainGame.create());
            //scene.addChild(GameControlMenu.create());
            cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
        }, this);
    },
    onSettings:function (pSender) {
        this.onButtonEffect();
        var scene = cc.Scene.create();
        scene.addChild(SettingsLayer.create());
        cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
    },
    onAbout:function (pSender) {
        this.onButtonEffect();
        var scene = cc.Scene.create();
        scene.addChild(AboutLayer.create());
        cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
    },
   /* update:function () {
        if (this._ship.getPosition().y > 480) {
            var pos = cc.p(Math.random() * winSize.width, 10);
            this._ship.setPosition( pos );
            this._ship.runAction( cc.MoveBy.create(
                parseInt(5 * Math.random(), 10),
                cc.p(Math.random() * winSize.width, pos.y + 480)));
        }
    },*/
    onButtonEffect:function(){
        if (MW.SOUND) {
            var s = cc.AudioEngine.getInstance().playEffect(res.effect2_mp3);
        }
    }
});
SysMenu.create = function () {
    var sg = new SysMenu();
    if (sg && sg.init()) {
        return sg;
    }
    return null;
};

SysMenu.scene = function () {
    var scene = cc.Scene.create();
    var layer = SysMenu.create();
    console.log(layer);
    scene.addChild(layer);
    return scene;
};

這裏面的代碼是我模仿官方的demo，唉，不說了，都是淚。。。。

新建GameConfig.js，內容：

//game state
MW.GAME_STATE = {
    HOME:0,
    PLAY:1,
    OVER:2
};

//keys
MW.KEYS = [];

//level
MW.LEVEL = {
    STAGE1:1,
    STAGE2:2,
    STAGE3:3
};

//life
MW.LIFE = 4;

//score
MW.SCORE = 0;

//sound
MW.SOUND = true;

//enemy move type
MW.ENEMY_MOVE_TYPE = {
    ATTACK:0,
    VERTICAL:1,
    HORIZONTAL:2,
    OVERLAP:3
};

//delta x
MW.DELTA_X = -100;

//offset x
MW.OFFSET_X = -24;

//rot
MW.ROT = -5.625;

//bullet type
MW.BULLET_TYPE = {
    PLAYER:1,
    ENEMY:2
};

//weapon type
MW.WEAPON_TYPE = {
    ONE:1
};

//unit tag
MW.UNIT_TAG = {
    ENMEY_BULLET:900,
    PLAYER_BULLET:901,
    ENEMY:1000,
    PLAYER:1000
};

//attack mode
MW.ENEMY_ATTACK_MODE = {
    NORMAL:1,
    TSUIHIKIDAN:2
};

//life up sorce
MW.LIFEUP_SORCE = [50000, 100000, 150000, 200000, 250000, 300000];

//container
MW.CONTAINER = {
    ENEMIES:[],
    ENEMY_BULLETS:[],
    PLAYER_BULLETS:[],
    EXPLOSIONS:[],
    SPARKS:[],
    HITS:[],
    BACKSKYS:[],
    BACKTILEMAPS:[]
};

//bullet speed
MW.BULLET_SPEED = {
    ENEMY:-200,
    SHIP:900
};
// the counter of active enemies
MW.ACTIVE_ENEMIES = 0;
MW.DEFAULT_CIRCLE = 20;

也是直接從demo中copy的，我去了。。。。

新建CircleChain.js，內容：

var redCircle;
var gameLayer;
var bulletSpeed=5;
var greenCircleArray=new Array();
var size ;
var cnt = 0;
var CircleChainGame = cc.Layer.extend({
    init:function(){
        cnt = 0;
        MW.SCORE = 0;
        var ret = false;
        
            this._super();
            // set mouse click event on;
            this.setMouseEnabled(true);
            // the default ball's speed;
            var circleSpeed = 2;
            MW.SCORE = 0;
            cnt = 0;
            size= cc.Director.getInstance().getWinSize();
            gameLayer = cc.LayerColor.create(new cc.Color4B(0, 0, 0, 255), size.width, size.height);
            greenCircleArray = new Array();
            // give 10 ball's when begin;
            for(i=0;i<MW.DEFAULT_CIRCLE;i++){
                var greenCircle = cc.Sprite.create("res/greencircle.png");
                greenCircleArray.push(greenCircle);
                var randomDir = Math.random()*2*Math.PI;
                greenCircle.xSpeed=circleSpeed*Math.cos(randomDir);
                greenCircle.ySpeed=circleSpeed*Math.sin(randomDir);
                gameLayer.addChild(greenCircle);
                greenCircle.setPosition(new cc.Point(Math.random()*size.width,Math.random()*size.height));
                greenCircle.schedule(function(){
                     this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
                     if(this.getPosition().x>size.width){
                        this.setPosition(new cc.Point(this.getPosition().x-size.width,this.getPosition().y));
                    }
                    if(this.getPosition().x<0){
                        this.setPosition(new cc.Point(this.getPosition().x+size.width,this.getPosition().y));
                    }
                    if(this.getPosition().y>size.height){
                        this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y-size.height));
                    }
                    if(this.getPosition().y<0){
                        this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y+size.height));
                    }
                })
            }
            console.log("Total:"+greenCircleArray.length);
            redCircle=cc.Sprite.create("res/redcircle.png");        
            gameLayer.addChild(redCircle);
            this.addChild(gameLayer);
            /*var itemStartGame = cc.MenuItemImage.create(
                    "res/btnStartGameNor.png",
                    "res/btnStartGameDown.png",
                    this.menuCallBack,
                    this
            );

            itemStartGame.setPosition(size.width/2, 160);
            var menu = cc.Menu.create(itemStartGame);
            menu.setPosition(0,0);
            this.addChild(menu);*/
            ret =  true;
        return true;
    },
    onMouseDown:function (event) {
        cnt++;
        /*if(cnt>2||greenCircleArray.length==0){
            this.setMouseEnabled(false);
            MW.SCORE = 20 -greenCircleArray.length;
            this.runAction(cc.Sequence.create(
                cc.DelayTime.create(0.2),
                cc.CallFunc.create(this.onGameOver, this)));
            console.log(cnt);
            console.log(greenCircleArray.length);
        }*/
        if(cnt>3||greenCircleArray.length==0){
            this.setMouseEnabled(false);
            MW.SCORE = MW.DEFAULT_CIRCLE - greenCircleArray.length;
            this.runAction(cc.Sequence.create(
            cc.DelayTime.create(0.2),
            cc.CallFunc.create(this.onGameOver, this)));
            return;
        }
        var location = event.getLocation();
        gameLayer.removeChild(this.redCircle);
        for(i=0;i<4;i++){
            var redBullet = cc.Sprite.create("res/redbullet.png");
            redBullet.xSpeed=bulletSpeed*Math.cos(i*Math.PI/2);
            redBullet.ySpeed=bulletSpeed*Math.sin(i*Math.PI/2);
            gameLayer.addChild(redBullet);    
            redBullet.setPosition(location);
            redBullet.schedule(function(){
                /*this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
                if(this.getPosition().x>500 || this.getPosition().y>500 || this.getPosition().x<0 || this.getPosition().y<0){
                    gameLayer.removeChild(this);
                }*/
                handleBullet(this); 
            })
        }
    },
    onMouseMoved:function(event){
        var location = event.getLocation();
        redCircle.setPosition(location);
    },
    menuCallBack:function(sender){
        
    },
    onGameOver:function () {
        var scene = cc.Scene.create();
        scene.addChild(GameOver.create());
        cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
    }
});
function handleBullet(bullet){
    bullet.setPosition(new cc.Point(bullet.getPosition().x+bullet.xSpeed,bullet.getPosition().y+bullet.ySpeed));
    if(bullet.getPosition().x>size.width || bullet.getPosition().y>size.height || bullet.getPosition().x<0 || bullet.getPosition().y<0){
        gameLayer.removeChild(bullet);
    }
    for(i=greenCircleArray.length-1;i>=0;i--){
        var distX=bullet.getPosition().x-greenCircleArray[i].getPosition().x;
        var distY=bullet.getPosition().y-greenCircleArray[i].getPosition().y;
        if(distX*distX+distY*distY<144){
            gameLayer.removeChild(bullet);
            for(j=0;j<4;j++){
                var greenBullet = cc.Sprite.create("res/greenbullet.png");
                greenBullet.xSpeed=bulletSpeed*Math.cos(j*Math.PI/2);
                greenBullet.ySpeed=bulletSpeed*Math.sin(j*Math.PI/2);
                gameLayer.addChild(greenBullet);    
                greenBullet.setPosition(new cc.Point(greenCircleArray[i].getPosition().x,greenCircleArray[i].getPosition().y));
                greenBullet.schedule(function(){
                    handleBullet(this);    
                })    
            }
            gameLayer.removeChild(greenCircleArray[i]);
            greenCircleArray.splice(i,1);
            console.log(i+"ii");
            console.log(cnt);
            console.log(greenCircleArray.length);
            if(cnt>2||greenCircleArray.length==0){
                return ;
            }
        }
    }
};
/*var circleChainScene = cc.Scene.extend({
    onEnter:function(){
        this._super();
        var layer = new circleChainGame();
        layer.init();
        this.addChild(layer);
    }
});*/
CircleChainGame.create = function () {
    var sg = new CircleChainGame();
    if (sg && sg.init()) {
        return sg;
    }
    return null;
};

CircleChainGame.scene = function () {
    var scene = cc.Scene.create();
    var layer = CircleChainGame.create();
    scene.addChild(layer);
    return scene;
};

恩，這個是我們主要的程序，簡單的邏輯。。。。

新建AboutLayer.js，內容：

var AboutLayer = cc.Layer.extend({
    init:function () {
        var bRet = false;
        if (this._super()) {
            /*var sp = cc.Sprite.create(res.loading_png);
            sp.setAnchorPoint(0,0);
            this.addChild(sp, 0, 1);*/


            var cacheImage = cc.TextureCache.getInstance().addImage(res.menuTitle_png);
            var title = cc.Sprite.createWithTexture(cacheImage, cc.rect(0, 36, 100, 34));
            title.setPosition( winSize.width / 2, winSize.height - 160 );
            this.addChild(title);


            // There is a bug in LabelTTF native. Apparently it fails with some unicode chars.
            var about = cc.LabelTTF.create("Circle chain game create by jov.\n QQ:247911950 \n Email:[email protected] \n Git:", "Arial", 16, cc.size(winSize.width * 0.85, 320), cc.TEXT_ALIGNMENT_CENTER );
            about.setPosition(winSize.width / 2,  winSize.height/2 -20 );
            about.setAnchorPoint(0.5, 0.5 );
            this.addChild(about);


            var label = cc.LabelTTF.create("Go back", "Arial", 18);
            var back = cc.MenuItemLabel.create(label, this.onBackCallback);
            var menu = cc.Menu.create(back);
            menu.setPosition( winSize.width / 2, winSize.height/2 -100);
            this.addChild(menu);
            bRet = true;
        }


        return bRet;
    },
    onBackCallback:function (pSender) {
        var scene = cc.Scene.create();
        scene.addChild(SysMenu.create());
        cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
    }
});


AboutLayer.create = function () {
    var sg = new AboutLayer();
    if (sg && sg.init()) {
        return sg;
    }
    return null;
};

新建GameOver.js，內容：

var GameOver = cc.Layer.extend({
    //_ship:null,
    _lbScore:0,

    init:function () {
        var bRet = false;
        if (this._super()) {
            //var sp = cc.Sprite.create(res.loading_png);
            //sp.setAnchorPoint(0,0);
            //this.addChild(sp, 0, 1);

            var logo = cc.Sprite.create(res.gameOver_png);
            logo.setAnchorPoint(0,0);
            logo.setPosition(winSize.width / 2 -160,winSize.height/2);
            this.addChild(logo,10,1);

            var playAgainNormal = cc.Sprite.create(res.menu_png, cc.rect(378, 0, 126, 33));
            var playAgainSelected = cc.Sprite.create(res.menu_png, cc.rect(378, 33, 126, 33));
            var playAgainDisabled = cc.Sprite.create(res.menu_png, cc.rect(378, 33 * 2, 126, 33));

            //var cocos2dhtml5 = cc.Sprite.create(res.cocos2d_html5_png);
            //cocos2dhtml5.setPosition(160,150);
            //this.addChild(cocos2dhtml5,10);
            //var flare = cc.Sprite.create(res.flare_jpg);
            //this.addChild(flare);
            //flare.setVisible(false);
            var playAgain = cc.MenuItemSprite.create(playAgainNormal, playAgainSelected, playAgainDisabled, function(){
                this.onPlayAgain();
            }.bind(this) );

            var menu = cc.Menu.create(playAgain);
            this.addChild(menu, 1, 2);
            menu.setPosition(winSize.width / 2, winSize.height/2-100);
            var str = "Your Score:"+MW.SCORE;
            if(MW.SCORE>=15&&MW.SCORE<=17){
                str +="\n\nGood!";
            }else if(MW.SCORE>=18&&MW.SCORE<=19){
                str +="\n\nGreat!"
            }else if(MW.SCORE==20){
                str +="\n\nExcellent!";
            }else{
                str += "\n\n幹八爹!"
            }
            var lbScore = cc.LabelTTF.create(str,"Arial Bold",16);
            lbScore.setPosition(winSize.width / 2,winSize.height/2-40);
            lbScore.setColor(cc.c3b(250,250,250));
            this.addChild(lbScore,10);

           /* var b1 = cc.LabelTTF.create("Download Cocos2d-html5","Arial",14);
            var b2 = cc.LabelTTF.create("Download This Sample","Arial",14);
            var menu1 = cc.MenuItemLabel.create(b1,function(){
                window.location.href = "http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5";
            });
            var menu2 = cc.MenuItemLabel.create(b2,function(){
                window.location.href = "https://github.com/ShengxiangChen/MoonWarriors";
            });
            var cocos2dMenu = cc.Menu.create(menu1,menu2);
            cocos2dMenu.alignItemsVerticallyWithPadding(10);
            cocos2dMenu.setPosition(160,80);
            this.addChild(cocos2dMenu);*/


            if(MW.SOUND){
                cc.AudioEngine.getInstance().playMusic(res.background_mp3);
            }

            bRet = true;
        }
        return bRet;
    },
    onPlayAgain:function (pSender) {
        var scene = cc.Scene.create();
        scene.addChild(CircleChainGame.create());
        //scene.addChild(GameControlMenu.create());
        cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2,scene));
    }
});

GameOver.create = function () {
    var sg = new GameOver();
    if (sg && sg.init()) {
        return sg;
    }
    return null;
};

GameOver.scene = function () {
    var scene = cc.Scene.create();
    var layer = GameOver.create();
    scene.addChild(layer);
    return scene;
};

恩，ok了，啓動server，看看效果：

不管如何跑起來就行，恩，ok了，別忘了上傳到heroku哦，好東西大家分享嘛，後面打算加一些關卡。。。

本示例演示地址：http://ogames.herokuapp.com/ 由於加載的東西比較多，可能有點慢，一定要等啊。。。。

github下載地址：https://github.com/joveth/games

QQ交流羣：158325682

joveth

發佈了49 篇原創文章 · 獲贊 5 · 訪問量 9萬+

私信關注

【coco2d-html5簡單遊戲開發】一、連鎖反應小遊戲

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

free AI online tools All In One

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（二）使用kube-vip實現集羣VIP訪問

企業大模型如何成爲自己數據的“百科全書”？

本地SSL證書過期輸入命令在IIS自動生成

.NET週刊【5月第2期 2024-05-12】

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（一）部署K8s

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（三）數據卷掛載NFS（網絡文件系統）

第4章實現用戶登錄和註冊功能

第1章述與環境搭建

android特效集錦系列之十仿新浪微博TabHost菜單

【序一】由nodejs+mongodb開發的ideas小站

第6章實現評論功能

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結