一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務(wù)器之家:專注于服務(wù)器技術(shù)及軟件下載分享
分類導(dǎo)航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務(wù)器之家 - 編程語言 - JavaScript - js教程 - 如何用CocosCreator實(shí)現(xiàn)射擊小游戲

如何用CocosCreator實(shí)現(xiàn)射擊小游戲

2022-03-01 16:33戰(zhàn) 勝 js教程

這篇文章主要介紹了如何用CocosCreator實(shí)現(xiàn)射擊小游戲,此游戲難度不大,僅作為入門的練手小游戲,一小時(shí)就能完成,里面用到的知識(shí)很常用,喜歡游戲的同學(xué),可以參考下

分析下制作步驟:

1. 準(zhǔn)備好資源,搭建場(chǎng)景

資源的話可以自己到網(wǎng)上找,也可以直接用我的也行;創(chuàng)建好相應(yīng)文件夾,把資源放到res文件夾下;

搭建場(chǎng)景:
第一步:創(chuàng)建一個(gè)單色精靈(Script) bg 背景, 設(shè)置好顏色,加一個(gè)Widget組件,使其充滿屏幕;

如何用CocosCreator實(shí)現(xiàn)射擊小游戲

第二步: 在bg節(jié)點(diǎn)下創(chuàng)建topbutton空節(jié)點(diǎn)作為頂與底部,然后在兩個(gè)空節(jié)點(diǎn)加入帶刺的節(jié)點(diǎn)(直接將圖片拖到top層級(jí)管理器就可以),現(xiàn)在我們需要給top與button節(jié)點(diǎn)添加一個(gè)Layout組件,屬性設(shè)置如圖,這樣可以看到屏幕上下都有刺了。

如何用CocosCreator實(shí)現(xiàn)射擊小游戲

第三步: 將玩家小人、子彈、敵機(jī)同樣的方法加入到場(chǎng)景中,再創(chuàng)建一個(gè)Label節(jié)點(diǎn)用來顯示分?jǐn)?shù),調(diào)節(jié)一下位置;

如何用CocosCreator實(shí)現(xiàn)射擊小游戲

2. 代碼控制游戲

第一步: 創(chuàng)建一個(gè)game腳本,掛載到dg節(jié)點(diǎn)上;

第二步: 編輯代碼,在 properties添加屬性,用來關(guān)聯(lián)玩家、子彈、敵人節(jié)點(diǎn),再編輯器關(guān)聯(lián);

如何用CocosCreator實(shí)現(xiàn)射擊小游戲

第三步: 代碼邏輯控制,包括初始化玩家、子彈、敵人;注冊(cè)監(jiān)聽事件;寫動(dòng)作函數(shù);計(jì)分判斷等;

全部代碼:

  1. cc.Class({
  2. extends: cc.Component,
  3.  
  4. properties: {
  5. playerNode: cc.Node,
  6. enemyNode: cc.Node,
  7. fireNode: cc.Node,
  8. scoreNode: cc.Label,
  9. },
  10.  
  11. onLoad () {
  12. this.playLoad();
  13. this.fireLoad();
  14. this.enemyLoad();
  15. this.node.on("touchstart",this.fire,this);
  16.  
  17. },
  18.  
  19. update (dt) {
  20. if(Math.abs(this.fireNode.y-this.enemyNode.y)<(this.fireNode.height/3+this.enemyNode.height/3)
  21. &&Math.abs(this.fireNode.x-this.enemyNode.x)<(this.fireNode.width/3+this.enemyNode.width/3)){
  22. console.log("擊敗敵機(jī)");
  23. this.scoreNode.string= ++this.score;//擊中得分
  24. this.fireNode.stopAction(this.fireAction);
  25. this.enemyNode.stopAction(this.enemyAction);
  26. this.enemyNode.active=false;
  27. this.fireNode.active=false;
  28. this.fireLoad();//初始化子彈
  29. this.enemyLoad();// 初始化敵機(jī)
  30. }
  31.  
  32. },
  33.  
  34. // 關(guān)閉事件監(jiān)聽
  35. onDestroy(){
  36. this.node.off("touchstart",this.fire,this);
  37. },
  38. // 初始玩家
  39. playLoad(){
  40. this.score=0;
  41. this.playerNode.y=-cc.winSize.height/4;
  42.  
  43. },
  44. //初始化子彈
  45. fireLoad(){
  46. this.fireNode.active=true;
  47. this.isFire=false;
  48. this.fireNode.x=this.playerNode.x;
  49. this.fireNode.y=this.playerNode.y+this.playerNode.height;
  50. },
  51. // 初始化敵機(jī)
  52. enemyLoad(){
  53. this.enemyNode.active=true;
  54. this.enemyNode.x=Math.random()* cc.winSize.width;
  55. this.enemyNode.y=cc.winSize.height/3;
  56. let x=cc.winSize.width/2-this.enemyNode.width/2;
  57. let y=Math.random()* cc.winSize.height/4;
  58. let seq=cc.repeatForever(cc.sequence(cc.moveTo(1.5,cc.v2(-x,y)),cc.moveTo(1.5,cc.v2(x,y))));
  59.  
  60. this.enemyAction=this.enemyNode.runAction(seq);
  61. },
  62. // 死亡 重新加載游戲
  63. dear(){
  64. console.log("死亡");
  65. cc.director.loadScene("game_scenes");
  66. },
  67.  
  68. // 發(fā)射子彈
  69. fire(){
  70. if(this.isFire) return;
  71. this.isFire=true;
  72. console.log("開始發(fā)射");
  73. var fireaction=cc.sequence(
  74. cc.moveTo(1,cc.v2(this.playerNode.x,cc.winSize.height/2)),
  75. cc.callFunc(()=>{
  76. this.dear();
  77. }));
  78. this.fireAction=this.fireNode.runAction(fireaction);
  79. console.log("結(jié)束發(fā)射");
  80. }
  81.  
  82. });

最終效果

如何用CocosCreator實(shí)現(xiàn)射擊小游戲

以上就是如何用CocosCreator實(shí)現(xiàn)射擊小游戲的詳細(xì)內(nèi)容,更多關(guān)于CocosCreator實(shí)現(xiàn)射擊小游戲的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章!

原文鏈接:https://blog.csdn.net/qq_45021180/article/details/104347037

延伸 · 閱讀

精彩推薦
  • js教程JavaScript 實(shí)現(xiàn)繼承的幾種方式

    JavaScript 實(shí)現(xiàn)繼承的幾種方式

    這篇文章主要介紹了JavaScript 實(shí)現(xiàn)繼承的幾種方式,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下...

    him89882022-01-21
  • js教程一篇帶你快速上手 Esbuild

    一篇帶你快速上手 Esbuild

    為什么 Vite 那么快呢?除了使用了 ES modules 之外,Vite 內(nèi)部還使用了一個(gè)神器— esbuild。...

    全棧修仙之路6372022-02-24
  • js教程JS中循環(huán)遍歷數(shù)組的四種方式總結(jié)

    JS中循環(huán)遍歷數(shù)組的四種方式總結(jié)

    這篇文章主要給大家總結(jié)介紹了關(guān)于JS中循環(huán)遍歷數(shù)組的四種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,...

    前端小混混5492022-01-06
  • js教程原生js實(shí)現(xiàn)自定義滾動(dòng)條組件

    原生js實(shí)現(xiàn)自定義滾動(dòng)條組件

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義滾動(dòng)條組件的開發(fā),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一...

    蒲公英芽11542022-01-05
  • js教程如何利用JS檢查元素是否在視口內(nèi)

    如何利用JS檢查元素是否在視口內(nèi)

    這篇文章主要給大家介紹了關(guān)于如何利用JS檢查元素是否在視口內(nèi)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考...

    冷石4362022-03-01
  • js教程js實(shí)現(xiàn)拖拽拼圖游戲

    js實(shí)現(xiàn)拖拽拼圖游戲

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽拼圖游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下...

    一個(gè)學(xué)前端的小菜鳥11652022-01-12
  • js教程JavaScript實(shí)現(xiàn)下拉列表

    JavaScript實(shí)現(xiàn)下拉列表

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)下拉列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下...

    編程的牛牛11822022-01-05
  • js教程js中實(shí)現(xiàn)繼承的五種方法

    js中實(shí)現(xiàn)繼承的五種方法

    這篇文章主要介紹了js中實(shí)現(xiàn)繼承的五種方法,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下...

    菜小牛7542022-01-07
主站蜘蛛池模板: 精品国产在线观看 | 校园高h| 国产精品色拉拉免费看 | 污黄漫 | 日本三级香港三级久久99 | 亚洲好色网 | 欧美色成人tv在线播放 | 无遮免费网站在线入口 | 91粉色视频在线导航 | 国产成人免费片在线观看 | 亚洲六月丁香婷婷综合 | 青青色在线观看 | 亚洲精品一区二区三区在线观看 | 放荡的女老板bd中文字幕 | 翁熄性放纵交换300章 | 国内精品视频九九九九 | 亚洲网站在线播放 | 天天天天天天天操 | 国产在视频线精品视频 | av在线色 | 扒开老女人 | 99热在线观看免费 | 欧美日韩亚洲区久久综合 | 国产精品成人麻豆专区 | 人禽l交免费视频观看+视频 | 国产精品色图 | 国产良心大作白丝精厕 | 日本高清免费中文字幕不卡 | 高清视频大片免费观看 | 美女乳液| 欧美女孩videos | 男人影院在线观看 | 亚洲www美色 | 非洲一级毛片又粗又长aaaa | 色综合久久天天综合 | haodiaose在线精品免费观看 | 好男人社区www影院在线观看 | 特黄特黄一级高清免费大片 | 卫生间被教官做好爽HH视频 | 久久99亚洲AV无码四区碰碰 | 饭冈加奈子黑人解禁在线播放 |