【代码分享】简单html5足球射门游戏分享

之前空余时间想玩玩html5, 于是使用2.2.2的cocos2d-html5 制作了个简单的足球射门游戏 ，美术是自己在纸上画完用手机拍下再ps扣的图，哈哈，赞一下自己的创意。

在我的主页可以玩这个游戏： http://www.jd85.net/ballfoot/

很简单的几个类，就不在这里讲解了。附件里有完整项目源码和cocostudio项目可在本人发布在cocoachina论坛里的帖子内下载: http://www.cocoachina.com/bbs/read.php?tid=213943

补上代码：

cocos2d.js中部分需要修改代码：

 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,
         loadExtension:false,
         renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
         tag:'gameCanvas', //the dom element to run cocos2d on
 //        engineDir:'../cocos2d/',
         SingleEngineFile:'Cocos2d-html5-v2.2.2.min.js',
         appFiles:[
             'src/resource.js',
 //            'src/myApp.js'//add your own files in order here
             'src/GameScene.js',
             'src/StartLayer.js',
             'src/GameLayer.js',
             'src/GameOverLayer.js',

             'libs/CCNotificationCenter.js',
             'libs/MD5.js'
         ]
     };

StartLayer.js:

 /**
  * Created by JiaDing on 14-4-19.
  */
 var StartLayer = cc.Layer.extend({

     init:function()
     {
         if(this._super())
         {

             return true;
         }
         return false;
     },

     onEnter:function()
     {
         this._super();
         var uiLayer = ccs.UILayer.create();
         this.addChild(uiLayer);

         var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_StartPanel);
         widget.setPositionX(widget.getPositionX() + 100);
         uiLayer.addWidget(widget);

         var titleAction = ccs.ActionManager.getInstance().getActionByName("StartPanel.ExportJson","Animation0");
         if(titleAction)
         {
             titleAction.play();
         }

         var startBtn = uiLayer.getWidgetByName("Button_25");
         startBtn.addTouchEventListener(function(object,touchType){

             if(touchType == cc.TOUCH_ENDED)
             {
                 cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);
                 cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");
             }

         }.bind(this) ,this);
     },

     onExit:function()
     {

         this._super();
     }

 });

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

resource.js:

 var s_pic_bg = "res/bg.png";
 var s_pic_dashBoard = "res/dashBoard.png";
 var s_pic_arrow = "res/arrow.png";
 //var s_pic_transitbg = "res/transitbg.png";
 var s_pic_transitbg = "res/transitbg.png";
 var s_pic_door = "res/door.png";

 var s_sound_win = "res/win.mp3";
 var s_sound_lose = "res/lose.mp3";
 var s_sound_kick = "res/kick.mp3";
 var s_sound_btn = "res/btn.mp3";
 var s_sound_bg = "res/bg.mp3";

 var s_exportJson_FootMan = "res/FootMan/FootMan.ExportJson";
 var s_plist_FootMan = "res/FootMan/FootMan0.plist";
 var s_pic_FootMan = "res/FootMan/FootMan0.png";

 var s_exportJson_LosePanel = "res/Panel/LosePanel.ExportJson";
 var s_exportJson_StartPanel = "res/Panel/StartPanel.ExportJson";
 var s_exportJson_WinPanel = "res/Panel/WinPanel.ExportJson";
 var s_plist_Panel = "res/Panel/Panel0.plist";
 var s_pic_Panel = "res/Panel/Panel0.png";

 var s_exportJson_RoundBall = "res/RoundBall/RoundBall.ExportJson";
 var s_plist_RoundBall = "res/RoundBall/RoundBall0.plist";
 var s_pic_RoundBall = "res/RoundBall/RoundBall0.png";

 var g_resources = [
     //image
     {src:s_pic_bg},
     {src:s_pic_dashBoard},
     {src:s_pic_arrow},
     {src:s_pic_transitbg},
     {src:s_pic_door},

     {src:s_sound_win},
     {src:s_sound_lose},
     {src:s_sound_kick},
     {src:s_sound_btn},
     {src:s_sound_bg},

     {src:s_exportJson_FootMan},
     {src:s_plist_FootMan},
     {src:s_pic_FootMan},

     {src:s_exportJson_LosePanel},
     {src:s_exportJson_StartPanel},
     {src:s_exportJson_WinPanel},
     {src:s_plist_Panel},
     {src:s_pic_Panel},
     {src:s_exportJson_RoundBall},
     {src:s_plist_RoundBall},
     {src:s_pic_RoundBall}

     //plist

     //fnt

     //tmx

     //bgm

     //effect

 ];

GameScene.js:

 /**
  * Created by JiaDing on 14-4-19.
  */

 var GameScene = cc.Scene.extend({

     TAG_CurrentView:1,

    onEnter:function()
    {
        this._super();

        var winSize = cc.Director.getInstance().getWinSize();
        var w = winSize.width;
        var h = winSize.height;
        var bg = cc.Sprite.create(s_pic_bg);
        bg.setAnchorPoint(0,0);
        this.addChild(bg,0);

        var startLayer = StartLayer.create();
        this.addChild(startLayer,1,this.TAG_CurrentView);

        cc.AudioEngine.getInstance().preloadSound(s_sound_bg);
        cc.AudioEngine.getInstance().preloadSound(s_sound_btn);
        cc.AudioEngine.getInstance().preloadSound(s_sound_kick);
        cc.AudioEngine.getInstance().preloadSound(s_sound_lose);
        cc.AudioEngine.getInstance().preloadSound(s_sound_win);

        cc.AudioEngine.getInstance().playMusic(s_sound_bg,true);

        cc.NotificationCenter.getInstance().addObserver(this,this.changeToGameLayer,"changeToGameLayer");
        cc.NotificationCenter.getInstance().addObserver(this,this.gameOver,"gameOver");

    },
     changeToGameLayer:function()
     {
         this.removeChildByTag(this.TAG_CurrentView,true);

         var gameLayer = GameLayer.create();
         this.addChild(gameLayer,1,this.TAG_CurrentView);
     },
     gameOver:function(isWin)
     {
         this.removeChildByTag(this.TAG_CurrentView,true);
         var overLayer = GameOverLayer.create(isWin);
         this.addChild(overLayer,1,this.TAG_CurrentView);
     }

 });

GameOverLayer.js:

 /**
  * Created by JiaDing on 14-4-20.
  */

 var GameOverLayer = cc.Layer.extend({

     isWin:false,

     init:function(isWin)
     {
         if(this._super())
         {
             this.isWin = isWin;

             return true;
         }
         return false;
     },

     onEnter:function()
     {
         this._super();
         var uiLayer = ccs.UILayer.create();
         this.addChild(uiLayer);

         if(this.isWin)
         {
             cc.AudioEngine.getInstance().playEffect(s_sound_win,false);

             var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_WinPanel);
             widget.setPositionX(widget.getPositionX() + 100);
             uiLayer.addWidget(widget);

             var titleAction = ccs.ActionManager.getInstance().getActionByName("WinPanel.ExportJson","QiuJInLe");
             if(titleAction)
             {
                 titleAction.play();
             }

             var startBtn = uiLayer.getWidgetByName("Button_35");
             startBtn.addTouchEventListener(function(object,touchType){

                 if(touchType == cc.TOUCH_ENDED)
                 {
                     cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);
                     cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");
                 }

             }.bind(this) ,this);
         }
         else
         {

             cc.AudioEngine.getInstance().playEffect(s_sound_lose,false);

             var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_LosePanel);
             widget.setPositionX(widget.getPositionX() + 100);
             uiLayer.addWidget(widget);

             var titleAction = ccs.ActionManager.getInstance().getActionByName("LosePanel.ExportJson","Animation0");
             if(titleAction)
             {
                 titleAction.play();
             }

             var startBtn = uiLayer.getWidgetByName("Button_35_Copy0");
             startBtn.addTouchEventListener(function(object,touchType){

                 if(touchType == cc.TOUCH_ENDED)
                 {
                     cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);
                     cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");
                 }

             }.bind(this) ,this);
         }

     },

     onExit:function()
     {

         this._super();
     }

 });

 GameOverLayer.create = function(isWin)
 {
     var obj = new GameOverLayer(isWin);
     if(obj && obj.init(isWin))
     {
         return obj;
     }
     return null;
 }

GameLayer.js:

 /**
  * Created by JiaDing on 14-4-20.
  */

 var GameLayer = cc.Layer.extend({

     TAG_MAN:1,
     TAG_Ball:2,
     TAG_DashBoard:3,
     TAG_DOOR:4,

     havePcMouseDown:false,
     rotationSpeed:11,

     MIN_ROTATION: - 135,
     MAX_ROTATION: -45,

     init:function()
     {
         if(this._super())
         {

             var winSize = cc.Director.getInstance().getWinSize();

             var door = cc.Sprite.create(s_pic_door);
             var scale = 0.7;
             door.setScale(scale);
             door.setAnchorPoint(cc.p(0,1));
             door.setPosition(cc.p((winSize.width + 30 - door.getContentSize().width * scale)/2,
                 winSize.height-150));
             this.addChild(door);
             door.setTag(this.TAG_DOOR);

             var dashBoardBg = cc.Sprite.create(s_pic_dashBoard);
             dashBoardBg.setAnchorPoint(cc.p(0.5,0));
             dashBoardBg.setScale(0.7);
             dashBoardBg.setPosition(cc.p(winSize.width - dashBoardBg.getContentSize().width * dashBoardBg.getScale()/2,dashBoardBg.getContentSize().height / 2 + 300));
             this.addChild(dashBoardBg);
             dashBoardBg.setTag(this.TAG_DashBoard);

             var arrow = cc.Sprite.create(s_pic_arrow);
             arrow.setAnchorPoint(cc.p(0,0.5));
             arrow.setScale(0.55);
             arrow.setPositionX(dashBoardBg.getContentSize().width/2);
             arrow.setRotation(-90);
             dashBoardBg.addChild(arrow);
             arrow.setTag(1);

             ccs.ArmatureDataManager.getInstance().addArmatureFileInfo(s_exportJson_FootMan);
             ccs.ArmatureDataManager.getInstance().addArmatureFileInfo(s_exportJson_RoundBall);

             var man = ccs.Armature.create("FootMan");
             man.setAnchorPoint(cc.p(0,0));
             man.setPosition(cc.p(100,20));
             this.addChild(man);
             man.setTag(this.TAG_MAN);

             var ball= ccs.Armature.create("RoundBall");
             ball.setScale(0.6);
             ball.setPosition(cc.p(winSize.width/2,200));
             this.addChild(ball);
             ball.setTag(this.TAG_Ball);

             var label = cc.LabelTTF.create("你认为我会告诉你鼠标按着不动瞄准,\n松开射门这句话么？","Microsoft Yahei Font",25);
             label.setPosition(cc.p(winSize.width/2,70));
             label.setColor(cc.c3b(255,0,0));
             this.addChild(label);

             if( 'touches' in sys.capabilities )
                 this.setTouchEnabled(true);
             else if ('mouse' in sys.capabilities )
                 this.setMouseEnabled(true);

             return true;
         }
         return false;
     },

     touchenable:true,
     haveMobileTouch:false,

     onTouchesBegan:function()
     {
         if(!this.touchenable)
         {
             this.haveMobileTouch = false;
             return false;
         }
         this.touchenable = false;
         this.haveMobileTouch = true;
         this.ready();
         return true;
     },
     onMouseDown:function (event)
     {
         if(!this.touchenable)
         {
             this.havePcMouseDown = false;
             return;
         }
         this.touchenable = false;
         this.havePcMouseDown = true;
         this.ready();
     },

     onTouchesEnded:function()
     {
         if(this.haveMobileTouch)
         {
             this.run();
         }
     },
     onMouseUp:function()
     {

         if(this.havePcMouseDown)
         {
             this.run();
         }
     },

     ready:function()
     {
         this.schedule(this.update,0.016);
     },
     update:function()
     {
         var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);
         var rot = arrow.getRotation();
         if(rot <= -135 || rot >= -45)
         {
             this.rotationSpeed = this.rotationSpeed * -1;
         }
         arrow.setRotation(rot + this.rotationSpeed);
     },
     run:function()
     {
         this.unschedule(this.update);

         var man = this.getChildByTag(this.TAG_MAN);
         man.getAnimation().playWithIndex(0);

         var action = cc.Sequence.create(
             cc.MoveBy.create(2,cc.p(150,50)),
             cc.DelayTime.create(0.3),
             cc.CallFunc.create(function(){
                 this.kick();
             }.bind(this),this)
         );
         man.runAction(action);
     },
     kick:function()
     {
         var man = this.getChildByTag(this.TAG_MAN);
         man.getAnimation().playWithIndex(1);
         man.getAnimation().setMovementEventCallFunc(function(armature, movementType, movementID){
             if (movementType == ccs.MovementEventType.complete)
             {
                 cc.AudioEngine.getInstance().playEffect(s_sound_kick,false);

                 var ball = this.getChildByTag(this.TAG_Ball);
                 ball.getAnimation().playWithIndex(0);

                 var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);
                 var rotation = arrow.getRotation();
                 var door = this.getChildByTag(this.TAG_DOOR);
                 var doorWidth = door.getContentSize().width * door.getScale();
                 var doorHeight = door.getContentSize().height * door.getScale();

                 var doorLeftX = door.getPositionX();
                 var doorRightX = door.getPositionX() + doorWidth;

                 var minX = doorLeftX - 300;
                 var maxX = doorRightX + 300;
                 var targetX = (rotation + (this.MIN_ROTATION * -1)) / (this.MAX_ROTATION + (this.MIN_ROTATION * -1)) * (maxX - minX) + minX;

                 var action = cc.Sequence.create(
                     cc.MoveTo.create(1,cc.p(targetX,door.getPositionY() - doorHeight + 30)),
                     cc.CallFunc.create(function(){
                         var win = false;
                         if(targetX > doorLeftX && targetX < doorRightX)
                         {
                             win = true;
                         }
                         this.gameOVer(win);
                     }.bind(this),this)
                 );
                 ball.runAction(action);
             }
         }.bind(this),this);

     },
     gameOVer:function(isWin)
     {
         cc.NotificationCenter.getInstance().postNotification("gameOver",isWin);
     }

 });

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