【代码分享】简单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 on
10 //        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 here
15             '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     //image
30     {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     //plist
56  
57     //fnt
58  
59     //tmx
60  
61     //bgm
62  
63     //effect
64  
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("你认为我会告诉你鼠标按着不动瞄准,
松开射门这句话么？","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     onMouseDown: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     onMouseUp: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 };