首页 > 代码库 > 【代码分享】简单html5足球射门游戏分享

【代码分享】简单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中部分需要修改代码:

 

 1 var c = { 2         COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug 3         box2d:false, 4         chipmunk:false, 5         showFPS:false, 6         frameRate:60, 7         loadExtension:false, 8         renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only) 9         tag:‘gameCanvas‘, //the dom element to run cocos2d on10 //        engineDir:‘../cocos2d/‘,11         SingleEngineFile:‘Cocos2d-html5-v2.2.2.min.js‘,12         appFiles:[13             ‘src/resource.js‘,14 //            ‘src/myApp.js‘//add your own files in order here15             ‘src/GameScene.js‘,16             ‘src/StartLayer.js‘,17             ‘src/GameLayer.js‘,18             ‘src/GameOverLayer.js‘,19  20             ‘libs/CCNotificationCenter.js‘,21             ‘libs/MD5.js‘22         ]23     };

 

StartLayer.js:

 

 1 /** 2  * Created by JiaDing on 14-4-19. 3  */ 4 var StartLayer = cc.Layer.extend({ 5   6     init:function() 7     { 8         if(this._super()) 9         {10  11  12  13             return true;14         }15         return false;16     },17  18     onEnter:function()19     {20         this._super();21         var uiLayer = ccs.UILayer.create();22         this.addChild(uiLayer);23  24         var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_StartPanel);25         widget.setPositionX(widget.getPositionX() + 100);26         uiLayer.addWidget(widget);27  28         var titleAction = ccs.ActionManager.getInstance().getActionByName("StartPanel.ExportJson","Animation0");29         if(titleAction)30         {31             titleAction.play();32         }33  34         var startBtn = uiLayer.getWidgetByName("Button_25");35         startBtn.addTouchEventListener(function(object,touchType){36  37             if(touchType == cc.TOUCH_ENDED)38             {39                 cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);40                 cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");41             }42  43         }.bind(this) ,this);44     },45  46  47     onExit:function()48     {49  50  51         this._super();52     }53  54  55  56  57  58 });59  60 StartLayer.create = function()61 {62     var obj = new StartLayer();63     if(obj && obj.init())64     {65         return obj;66     }67     return null;68 }

resource.js:

 

 1 var s_pic_bg = "res/bg.png"; 2 var s_pic_dashBoard = "res/dashBoard.png"; 3 var s_pic_arrow = "res/arrow.png"; 4 //var s_pic_transitbg = "res/transitbg.png"; 5 var s_pic_transitbg = "res/transitbg.png"; 6 var s_pic_door = "res/door.png"; 7   8 var s_sound_win = "res/win.mp3"; 9 var s_sound_lose = "res/lose.mp3";10 var s_sound_kick = "res/kick.mp3";11 var s_sound_btn = "res/btn.mp3";12 var s_sound_bg = "res/bg.mp3";13  14 var s_exportJson_FootMan = "res/FootMan/FootMan.ExportJson";15 var s_plist_FootMan = "res/FootMan/FootMan0.plist";16 var s_pic_FootMan = "res/FootMan/FootMan0.png";17  18 var s_exportJson_LosePanel = "res/Panel/LosePanel.ExportJson";19 var s_exportJson_StartPanel = "res/Panel/StartPanel.ExportJson";20 var s_exportJson_WinPanel = "res/Panel/WinPanel.ExportJson";21 var s_plist_Panel = "res/Panel/Panel0.plist";22 var s_pic_Panel = "res/Panel/Panel0.png";23  24 var s_exportJson_RoundBall = "res/RoundBall/RoundBall.ExportJson";25 var s_plist_RoundBall = "res/RoundBall/RoundBall0.plist";26 var s_pic_RoundBall = "res/RoundBall/RoundBall0.png";27  28 var g_resources = [29     //image30     {src:s_pic_bg},31     {src:s_pic_dashBoard},32     {src:s_pic_arrow},33     {src:s_pic_transitbg},34     {src:s_pic_door},35  36     {src:s_sound_win},37     {src:s_sound_lose},38     {src:s_sound_kick},39     {src:s_sound_btn},40     {src:s_sound_bg},41  42     {src:s_exportJson_FootMan},43     {src:s_plist_FootMan},44     {src:s_pic_FootMan},45  46     {src:s_exportJson_LosePanel},47     {src:s_exportJson_StartPanel},48     {src:s_exportJson_WinPanel},49     {src:s_plist_Panel},50     {src:s_pic_Panel},51     {src:s_exportJson_RoundBall},52     {src:s_plist_RoundBall},53     {src:s_pic_RoundBall}54  55     //plist56  57     //fnt58  59     //tmx60  61     //bgm62  63     //effect64  65 ];

GameScene.js:

 

 1 /** 2  * Created by JiaDing on 14-4-19. 3  */ 4   5 var GameScene = cc.Scene.extend({ 6   7     TAG_CurrentView:1, 8   9    onEnter:function()10    {11        this._super();12  13        var winSize = cc.Director.getInstance().getWinSize();14        var w = winSize.width;15        var h = winSize.height;16        var bg = cc.Sprite.create(s_pic_bg);17        bg.setAnchorPoint(0,0);18        this.addChild(bg,0);19  20        var startLayer = StartLayer.create();21        this.addChild(startLayer,1,this.TAG_CurrentView);22  23  24        cc.AudioEngine.getInstance().preloadSound(s_sound_bg);25        cc.AudioEngine.getInstance().preloadSound(s_sound_btn);26        cc.AudioEngine.getInstance().preloadSound(s_sound_kick);27        cc.AudioEngine.getInstance().preloadSound(s_sound_lose);28        cc.AudioEngine.getInstance().preloadSound(s_sound_win);29  30        cc.AudioEngine.getInstance().playMusic(s_sound_bg,true);31  32        cc.NotificationCenter.getInstance().addObserver(this,this.changeToGameLayer,"changeToGameLayer");33        cc.NotificationCenter.getInstance().addObserver(this,this.gameOver,"gameOver");34  35    },36     changeToGameLayer:function()37     {38         this.removeChildByTag(this.TAG_CurrentView,true);39  40         var gameLayer = GameLayer.create();41         this.addChild(gameLayer,1,this.TAG_CurrentView);42     },43     gameOver:function(isWin)44     {45         this.removeChildByTag(this.TAG_CurrentView,true);46         var overLayer = GameOverLayer.create(isWin);47         this.addChild(overLayer,1,this.TAG_CurrentView);48     }49  50 });

GameOverLayer.js:

 

  1 /**  2  * Created by JiaDing on 14-4-20.  3  */  4    5 var GameOverLayer = cc.Layer.extend({  6    7     isWin:false,  8    9     init:function(isWin) 10     { 11         if(this._super()) 12         { 13             this.isWin = isWin; 14   15             return true; 16         } 17         return false; 18     }, 19   20     onEnter:function() 21     { 22         this._super(); 23         var uiLayer = ccs.UILayer.create(); 24         this.addChild(uiLayer); 25   26         if(this.isWin) 27         { 28             cc.AudioEngine.getInstance().playEffect(s_sound_win,false); 29   30             var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_WinPanel); 31             widget.setPositionX(widget.getPositionX() + 100); 32             uiLayer.addWidget(widget); 33   34             var titleAction = ccs.ActionManager.getInstance().getActionByName("WinPanel.ExportJson","QiuJInLe"); 35             if(titleAction) 36             { 37                 titleAction.play(); 38             } 39   40             var startBtn = uiLayer.getWidgetByName("Button_35"); 41             startBtn.addTouchEventListener(function(object,touchType){ 42   43                 if(touchType == cc.TOUCH_ENDED) 44                 { 45                     cc.AudioEngine.getInstance().playEffect(s_sound_btn,false); 46                     cc.NotificationCenter.getInstance().postNotification("changeToGameLayer"); 47                 } 48   49             }.bind(this) ,this); 50         } 51         else 52         { 53   54             cc.AudioEngine.getInstance().playEffect(s_sound_lose,false); 55   56             var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_LosePanel); 57             widget.setPositionX(widget.getPositionX() + 100); 58             uiLayer.addWidget(widget); 59   60             var titleAction = ccs.ActionManager.getInstance().getActionByName("LosePanel.ExportJson","Animation0"); 61             if(titleAction) 62             { 63                 titleAction.play(); 64             } 65   66             var startBtn = uiLayer.getWidgetByName("Button_35_Copy0"); 67             startBtn.addTouchEventListener(function(object,touchType){ 68   69                 if(touchType == cc.TOUCH_ENDED) 70                 { 71                     cc.AudioEngine.getInstance().playEffect(s_sound_btn,false); 72                     cc.NotificationCenter.getInstance().postNotification("changeToGameLayer"); 73                 } 74   75             }.bind(this) ,this); 76         } 77   78     }, 79   80   81     onExit:function() 82     { 83   84   85         this._super(); 86     } 87   88   89   90   91   92 }); 93   94 GameOverLayer.create = function(isWin) 95 { 96     var obj = new GameOverLayer(isWin); 97     if(obj && obj.init(isWin)) 98     { 99         return obj;100     }101     return null;102 }

GameLayer.js:

  1 /**  2  * Created by JiaDing on 14-4-20.  3  */  4    5 var GameLayer = cc.Layer.extend({  6    7     TAG_MAN:1,  8     TAG_Ball:2,  9     TAG_DashBoard:3, 10     TAG_DOOR:4, 11   12     havePcMouseDown:false, 13     rotationSpeed:11, 14   15     MIN_ROTATION: - 135, 16     MAX_ROTATION: -45, 17   18     init:function() 19     { 20         if(this._super()) 21         { 22   23             var winSize = cc.Director.getInstance().getWinSize(); 24   25             var door = cc.Sprite.create(s_pic_door); 26             var scale = 0.7; 27             door.setScale(scale); 28             door.setAnchorPoint(cc.p(0,1)); 29             door.setPosition(cc.p((winSize.width + 30 - door.getContentSize().width * scale)/2, 30                 winSize.height-150)); 31             this.addChild(door); 32             door.setTag(this.TAG_DOOR); 33   34             var dashBoardBg = cc.Sprite.create(s_pic_dashBoard); 35             dashBoardBg.setAnchorPoint(cc.p(0.5,0)); 36             dashBoardBg.setScale(0.7); 37             dashBoardBg.setPosition(cc.p(winSize.width - dashBoardBg.getContentSize().width * dashBoardBg.getScale()/2,dashBoardBg.getContentSize().height / 2 + 300)); 38             this.addChild(dashBoardBg); 39             dashBoardBg.setTag(this.TAG_DashBoard); 40   41             var arrow = cc.Sprite.create(s_pic_arrow); 42             arrow.setAnchorPoint(cc.p(0,0.5)); 43             arrow.setScale(0.55); 44             arrow.setPositionX(dashBoardBg.getContentSize().width/2); 45             arrow.setRotation(-90); 46             dashBoardBg.addChild(arrow); 47             arrow.setTag(1); 48   49             ccs.ArmatureDataManager.getInstance().addArmatureFileInfo(s_exportJson_FootMan); 50             ccs.ArmatureDataManager.getInstance().addArmatureFileInfo(s_exportJson_RoundBall); 51   52             var man = ccs.Armature.create("FootMan"); 53             man.setAnchorPoint(cc.p(0,0)); 54             man.setPosition(cc.p(100,20)); 55             this.addChild(man); 56             man.setTag(this.TAG_MAN); 57   58             var ball= ccs.Armature.create("RoundBall"); 59             ball.setScale(0.6); 60             ball.setPosition(cc.p(winSize.width/2,200)); 61             this.addChild(ball); 62             ball.setTag(this.TAG_Ball); 63   64   65             var label = cc.LabelTTF.create("你认为我会告诉你鼠标按着不动瞄准,\n松开射门这句话么?","Microsoft Yahei Font",25); 66             label.setPosition(cc.p(winSize.width/2,70)); 67             label.setColor(cc.c3b(255,0,0)); 68             this.addChild(label); 69   70             if( ‘touches‘ in sys.capabilities ) 71                 this.setTouchEnabled(true); 72             else if (‘mouse‘ in sys.capabilities ) 73                 this.setMouseEnabled(true); 74   75   76   77   78   79             return true; 80         } 81         return false; 82     }, 83   84     touchenable:true, 85     haveMobileTouch:false, 86   87     onTouchesBegan:function() 88     { 89         if(!this.touchenable) 90         { 91             this.haveMobileTouch = false; 92             return false; 93         } 94         this.touchenable = false; 95         this.haveMobileTouch = true; 96         this.ready(); 97         return true; 98     }, 99     onm ouseDown:function (event)100     {101         if(!this.touchenable)102         {103             this.havePcMouseDown = false;104             return;105         }106         this.touchenable = false;107         this.havePcMouseDown = true;108         this.ready();109     },110  111     onTouchesEnded:function()112     {113         if(this.haveMobileTouch)114         {115             this.run();116         }117     },118     onm ouseUp:function()119     {120  121         if(this.havePcMouseDown)122         {123             this.run();124         }125     },126  127  128     ready:function()129     {130         this.schedule(this.update,0.016);131     },132     update:function()133     {134         var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);135         var rot = arrow.getRotation();136         if(rot <= -135 || rot >= -45)137         {138             this.rotationSpeed = this.rotationSpeed * -1;139         }140         arrow.setRotation(rot + this.rotationSpeed);141     },142     run:function()143     {144         this.unschedule(this.update);145  146         var man = this.getChildByTag(this.TAG_MAN);147         man.getAnimation().playWithIndex(0);148  149         var action = cc.Sequence.create(150             cc.MoveBy.create(2,cc.p(150,50)),151             cc.DelayTime.create(0.3),152             cc.CallFunc.create(function(){153                 this.kick();154             }.bind(this),this)155         );156         man.runAction(action);157     },158     kick:function()159     {160         var man = this.getChildByTag(this.TAG_MAN);161         man.getAnimation().playWithIndex(1);162         man.getAnimation().setMovementEventCallFunc(function(armature, movementType, movementID){163             if (movementType == ccs.MovementEventType.complete)164             {165                 cc.AudioEngine.getInstance().playEffect(s_sound_kick,false);166  167                 var ball = this.getChildByTag(this.TAG_Ball);168                 ball.getAnimation().playWithIndex(0);169  170                 var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);171                 var rotation = arrow.getRotation();172                 var door = this.getChildByTag(this.TAG_DOOR);173                 var doorWidth = door.getContentSize().width * door.getScale();174                 var doorHeight = door.getContentSize().height * door.getScale();175  176                 var doorLeftX = door.getPositionX();177                 var doorRightX = door.getPositionX() + doorWidth;178  179                 var minX = doorLeftX - 300;180                 var maxX = doorRightX + 300;181                 var targetX = (rotation + (this.MIN_ROTATION * -1)) / (this.MAX_ROTATION + (this.MIN_ROTATION * -1)) * (maxX - minX) + minX;182  183                 var action = cc.Sequence.create(184                     cc.MoveTo.create(1,cc.p(targetX,door.getPositionY() - doorHeight + 30)),185                     cc.CallFunc.create(function(){186                         var win = false;187                         if(targetX > doorLeftX && targetX < doorRightX)188                         {189                             win = true;190                         }191                         this.gameOVer(win);192                     }.bind(this),this)193                 );194                 ball.runAction(action);195             }196         }.bind(this),this);197  198     },199     gameOVer:function(isWin)200     {201         cc.NotificationCenter.getInstance().postNotification("gameOver",isWin);202     }203  204 });205  206 GameLayer.create = function()207 {208     var obj = new GameLayer();209     if(obj && obj.init())210     {211         return obj;212     }213     return null;214 };

 

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