之前空余时间想玩玩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. return true;
  12. }
  13. return false;
  14. },
  15.  
  16. onEnter:function()
  17. {
  18. this._super();
  19. var uiLayer = ccs.UILayer.create();
  20. this.addChild(uiLayer);
  21.  
  22. var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_StartPanel);
  23. widget.setPositionX(widget.getPositionX() + 100);
  24. uiLayer.addWidget(widget);
  25.  
  26. var titleAction = ccs.ActionManager.getInstance().getActionByName("StartPanel.ExportJson","Animation0");
  27. if(titleAction)
  28. {
  29. titleAction.play();
  30. }
  31.  
  32. var startBtn = uiLayer.getWidgetByName("Button_25");
  33. startBtn.addTouchEventListener(function(object,touchType){
  34.  
  35. if(touchType == cc.TOUCH_ENDED)
  36. {
  37. cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);
  38. cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");
  39. }
  40.  
  41. }.bind(this) ,this);
  42. },
  43.  
  44. onExit:function()
  45. {
  46.  
  47. this._super();
  48. }
  49.  
  50. });
  51.  
  52. StartLayer.create = function()
  53. {
  54. var obj = new StartLayer();
  55. if(obj && obj.init())
  56. {
  57. return obj;
  58. }
  59. return null;
  60. }

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. cc.AudioEngine.getInstance().preloadSound(s_sound_bg);
  24. cc.AudioEngine.getInstance().preloadSound(s_sound_btn);
  25. cc.AudioEngine.getInstance().preloadSound(s_sound_kick);
  26. cc.AudioEngine.getInstance().preloadSound(s_sound_lose);
  27. cc.AudioEngine.getInstance().preloadSound(s_sound_win);
  28.  
  29. cc.AudioEngine.getInstance().playMusic(s_sound_bg,true);
  30.  
  31. cc.NotificationCenter.getInstance().addObserver(this,this.changeToGameLayer,"changeToGameLayer");
  32. cc.NotificationCenter.getInstance().addObserver(this,this.gameOver,"gameOver");
  33.  
  34. },
  35. changeToGameLayer:function()
  36. {
  37. this.removeChildByTag(this.TAG_CurrentView,true);
  38.  
  39. var gameLayer = GameLayer.create();
  40. this.addChild(gameLayer,1,this.TAG_CurrentView);
  41. },
  42. gameOver:function(isWin)
  43. {
  44. this.removeChildByTag(this.TAG_CurrentView,true);
  45. var overLayer = GameOverLayer.create(isWin);
  46. this.addChild(overLayer,1,this.TAG_CurrentView);
  47. }
  48.  
  49. });

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. onExit:function()
  81. {
  82.  
  83. this._super();
  84. }
  85.  
  86. });
  87.  
  88. GameOverLayer.create = function(isWin)
  89. {
  90. var obj = new GameOverLayer(isWin);
  91. if(obj && obj.init(isWin))
  92. {
  93. return obj;
  94. }
  95. return null;
  96. }

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. var label = cc.LabelTTF.create("你认为我会告诉你鼠标按着不动瞄准,\n松开射门这句话么?","Microsoft Yahei Font",25);
  65. label.setPosition(cc.p(winSize.width/2,70));
  66. label.setColor(cc.c3b(255,0,0));
  67. this.addChild(label);
  68.  
  69. if( 'touches' in sys.capabilities )
  70. this.setTouchEnabled(true);
  71. else if ('mouse' in sys.capabilities )
  72. this.setMouseEnabled(true);
  73.  
  74. return true;
  75. }
  76. return false;
  77. },
  78.  
  79. touchenable:true,
  80. haveMobileTouch:false,
  81.  
  82. onTouchesBegan:function()
  83. {
  84. if(!this.touchenable)
  85. {
  86. this.haveMobileTouch = false;
  87. return false;
  88. }
  89. this.touchenable = false;
  90. this.haveMobileTouch = true;
  91. this.ready();
  92. return true;
  93. },
  94. onMouseDown:function (event)
  95. {
  96. if(!this.touchenable)
  97. {
  98. this.havePcMouseDown = false;
  99. return;
  100. }
  101. this.touchenable = false;
  102. this.havePcMouseDown = true;
  103. this.ready();
  104. },
  105.  
  106. onTouchesEnded:function()
  107. {
  108. if(this.haveMobileTouch)
  109. {
  110. this.run();
  111. }
  112. },
  113. onMouseUp:function()
  114. {
  115.  
  116. if(this.havePcMouseDown)
  117. {
  118. this.run();
  119. }
  120. },
  121.  
  122. ready:function()
  123. {
  124. this.schedule(this.update,0.016);
  125. },
  126. update:function()
  127. {
  128. var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);
  129. var rot = arrow.getRotation();
  130. if(rot <= -135 || rot >= -45)
  131. {
  132. this.rotationSpeed = this.rotationSpeed * -1;
  133. }
  134. arrow.setRotation(rot + this.rotationSpeed);
  135. },
  136. run:function()
  137. {
  138. this.unschedule(this.update);
  139.  
  140. var man = this.getChildByTag(this.TAG_MAN);
  141. man.getAnimation().playWithIndex(0);
  142.  
  143. var action = cc.Sequence.create(
  144. cc.MoveBy.create(2,cc.p(150,50)),
  145. cc.DelayTime.create(0.3),
  146. cc.CallFunc.create(function(){
  147. this.kick();
  148. }.bind(this),this)
  149. );
  150. man.runAction(action);
  151. },
  152. kick:function()
  153. {
  154. var man = this.getChildByTag(this.TAG_MAN);
  155. man.getAnimation().playWithIndex(1);
  156. man.getAnimation().setMovementEventCallFunc(function(armature, movementType, movementID){
  157. if (movementType == ccs.MovementEventType.complete)
  158. {
  159. cc.AudioEngine.getInstance().playEffect(s_sound_kick,false);
  160.  
  161. var ball = this.getChildByTag(this.TAG_Ball);
  162. ball.getAnimation().playWithIndex(0);
  163.  
  164. var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);
  165. var rotation = arrow.getRotation();
  166. var door = this.getChildByTag(this.TAG_DOOR);
  167. var doorWidth = door.getContentSize().width * door.getScale();
  168. var doorHeight = door.getContentSize().height * door.getScale();
  169.  
  170. var doorLeftX = door.getPositionX();
  171. var doorRightX = door.getPositionX() + doorWidth;
  172.  
  173. var minX = doorLeftX - 300;
  174. var maxX = doorRightX + 300;
  175. var targetX = (rotation + (this.MIN_ROTATION * -1)) / (this.MAX_ROTATION + (this.MIN_ROTATION * -1)) * (maxX - minX) + minX;
  176.  
  177. var action = cc.Sequence.create(
  178. cc.MoveTo.create(1,cc.p(targetX,door.getPositionY() - doorHeight + 30)),
  179. cc.CallFunc.create(function(){
  180. var win = false;
  181. if(targetX > doorLeftX && targetX < doorRightX)
  182. {
  183. win = true;
  184. }
  185. this.gameOVer(win);
  186. }.bind(this),this)
  187. );
  188. ball.runAction(action);
  189. }
  190. }.bind(this),this);
  191.  
  192. },
  193. gameOVer:function(isWin)
  194. {
  195. cc.NotificationCenter.getInstance().postNotification("gameOver",isWin);
  196. }
  197.  
  198. });
  199.  
  200. GameLayer.create = function()
  201. {
  202. var obj = new GameLayer();
  203. if(obj && obj.init())
  204. {
  205. return obj;
  206. }
  207. return null;
  208. };

【代码分享】简单html5足球射门游戏分享的更多相关文章

  1. [置顶] 63行代码完美实现html5 贪吃蛇游戏

    以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...

  2. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  3. 简单跳转到微信分享,基于libWeiChatSDK 和简单的自定义UIActivityViewController

    一.自定义UIActivity: 如果想要自定义UIActivity必须知道UIActivityViewController.首先这个类主要是用于接受字符串,RUL类型和图片类型的数据用于分享和操作的 ...

  4. 一处折腾笔记:Android内嵌html5加入原生微信分享的解决的方法

    有一段时间没有瞎折腾了. 这周一刚上班萌主过来反映说:微信里面打开聚客宝.分享功能是能够的(这里是用微信自身的js-sdk实现的).可是在android应用里面打开点击就没反应了:接下来狡猾的丁丁在产 ...

  5. 分享一组Rpg Marker人物行走,游戏素材图片,共20张图片

    分享一组Rpg Marker人物行走,游戏素材图片,共20张图片 上面的下载地址链接是图片,无法直接复制哦!下载请直接点击: 游戏素材下载  或者复制以下链接:http://***/view/13.h ...

  6. 使用TypeScript实现简单的HTML5贪吃蛇游戏

    TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...

  7. (转)Java中使用正则表达式的一个简单例子及常用正则分享

    转自:http://www.jb51.net/article/67724.htm 这篇文章主要介绍了Java中使用正则表达式的一个简单例子及常用正则分享,本文用一个验证Email的例子讲解JAVA中如 ...

  8. 实训六(Cocos2dx游戏分享到微信朋友圈----AppID的获取)

    考虑把游戏分享到微信朋友圈,前面的博文已经写到,shareSDK是一个很好的选择,但是学习了几天时间,遇到了很多问题,与其在一棵树上吊死,还不如退一步海阔天空,先暂时放一放,于是我考虑了一下既然是分享 ...

  9. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

随机推荐

  1. UESTC 2016 Summer Training #1 Div.2

    最近意志力好飘摇..不知道坚不坚持得下去.. 这么弱还瞎纠结...可以滚了.. 水题都不会做.. LCS (A) 水 LCS (B) 没有看题 Gym 100989C 水 1D Cafeteria ( ...

  2. EF5.X Code First表关联与延迟加载

    1-指定导航属性,会自动生成外键,命名规则为:“表名_主键名”2-默认情况下与导航属性的主键名称相同的字段会自动被标记为外键3-通过[ForeignKey]标记指定实体类的属性为外键,4-方式2的升级 ...

  3. Linux CC攻击脚本

    CC(ChallengeCollapsar)主要是用来攻击页面的.大家都有这样的经历,就是在访问论坛时,如果这个论坛比较大,访问的人比较多,打开页面的速度会比较慢,访问的人越多,论坛的页面越多,数据库 ...

  4. MapReduce 重要组件——Recordreader组件 [转]

    (1)以怎样的方式从分片中读取一条记录,每读取一条记录都会调用RecordReader类: (2)系统默认的RecordReader是LineRecordReader,如TextInputFormat ...

  5. 一天完成把PC网站改为自适应!原来这么简单!

    http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html 一天完成把PC网站改为自适应!原 ...

  6. 各种主流数据库的比较(所以说我觉得Oracle这个keng?入的不错?)

    随着计算机技术不断发展,各种数据库编程工具也随着发展,使当今的大多数程序开发人员可以摆脱枯燥无味的用计算机指令或汇编语言开发软件,而是利用一系列高效的.具有良好可视化的编程工具去开发各种数据库软件,从 ...

  7. Redis系列-存储篇hash主要操作函数小结

    阳光透过玻璃,洒在身上,一杯暖茶在手,说不尽的安逸自得,让我有种想再写篇blog的冲动.上篇主要谈了string,这里谈谈hash吧!hash是一些列key value(field value)的映射 ...

  8. visualsvn server 安装提示无法启动

    需要在服务里面给visualsvn server 用本地账户登陆权限

  9. C++-new操作符

    1,new操作符实际上包含三部分:operator new分配内存和调用构造函数初始化刚刚分配的内存,类型转换刚刚的指针. string* ps = new string("lalalala ...

  10. wp8.1 Study13:在WP8.1中分享文件和数据

    绪论:不同于windows, 在wp8.1中,如果不止一个程序可以接受其Uri或者文件,shell会提供一个界面让用户选择用哪个程序.而在windows中,用户可以在设置那里设置各种文件和Uri的默认 ...