首页 > 代码库 > 【代码分享】简单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足球射门游戏分享
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。