分析下制作步驟:
1. 準(zhǔn)備好資源,搭建場(chǎng)景
資源的話可以自己到網(wǎng)上找,也可以直接用我的也行;創(chuàng)建好相應(yīng)文件夾,把資源放到res文件夾下;
搭建場(chǎng)景:
第一步:創(chuàng)建一個(gè)單色精靈(Script) bg 背景, 設(shè)置好顏色,加一個(gè)Widget組件,使其充滿屏幕;
第二步: 在bg
節(jié)點(diǎn)下創(chuàng)建top
和button
空節(jié)點(diǎn)作為頂與底部,然后在兩個(gè)空節(jié)點(diǎn)加入帶刺的節(jié)點(diǎn)(直接將圖片拖到top層級(jí)管理器就可以),現(xiàn)在我們需要給top與button
節(jié)點(diǎn)添加一個(gè)Layout組件
,屬性設(shè)置如圖,這樣可以看到屏幕上下都有刺了。
第三步: 將玩家小人、子彈、敵機(jī)同樣的方法加入到場(chǎng)景中,再創(chuàng)建一個(gè)Label節(jié)點(diǎn)用來顯示分?jǐn)?shù),調(diào)節(jié)一下位置;
2. 代碼控制游戲
第一步: 創(chuàng)建一個(gè)game
腳本,掛載到dg
節(jié)點(diǎn)上;
第二步: 編輯代碼,在 properties
添加屬性,用來關(guān)聯(lián)玩家、子彈、敵人節(jié)點(diǎn),再編輯器關(guān)聯(lián);
第三步: 代碼邏輯控制,包括初始化玩家、子彈、敵人;注冊(cè)監(jiān)聽事件;寫動(dòng)作函數(shù);計(jì)分判斷等;
全部代碼:
- cc.Class({
- extends: cc.Component,
- properties: {
- playerNode: cc.Node,
- enemyNode: cc.Node,
- fireNode: cc.Node,
- scoreNode: cc.Label,
- },
- onLoad () {
- this.playLoad();
- this.fireLoad();
- this.enemyLoad();
- this.node.on("touchstart",this.fire,this);
- },
- update (dt) {
- if(Math.abs(this.fireNode.y-this.enemyNode.y)<(this.fireNode.height/3+this.enemyNode.height/3)
- &&Math.abs(this.fireNode.x-this.enemyNode.x)<(this.fireNode.width/3+this.enemyNode.width/3)){
- console.log("擊敗敵機(jī)");
- this.scoreNode.string= ++this.score;//擊中得分
- this.fireNode.stopAction(this.fireAction);
- this.enemyNode.stopAction(this.enemyAction);
- this.enemyNode.active=false;
- this.fireNode.active=false;
- this.fireLoad();//初始化子彈
- this.enemyLoad();// 初始化敵機(jī)
- }
- },
- // 關(guān)閉事件監(jiān)聽
- onDestroy(){
- this.node.off("touchstart",this.fire,this);
- },
- // 初始玩家
- playLoad(){
- this.score=0;
- this.playerNode.y=-cc.winSize.height/4;
- },
- //初始化子彈
- fireLoad(){
- this.fireNode.active=true;
- this.isFire=false;
- this.fireNode.x=this.playerNode.x;
- this.fireNode.y=this.playerNode.y+this.playerNode.height;
- },
- // 初始化敵機(jī)
- enemyLoad(){
- this.enemyNode.active=true;
- this.enemyNode.x=Math.random()* cc.winSize.width;
- this.enemyNode.y=cc.winSize.height/3;
- let x=cc.winSize.width/2-this.enemyNode.width/2;
- let y=Math.random()* cc.winSize.height/4;
- let seq=cc.repeatForever(cc.sequence(cc.moveTo(1.5,cc.v2(-x,y)),cc.moveTo(1.5,cc.v2(x,y))));
- this.enemyAction=this.enemyNode.runAction(seq);
- },
- // 死亡 重新加載游戲
- dear(){
- console.log("死亡");
- cc.director.loadScene("game_scenes");
- },
- // 發(fā)射子彈
- fire(){
- if(this.isFire) return;
- this.isFire=true;
- console.log("開始發(fā)射");
- var fireaction=cc.sequence(
- cc.moveTo(1,cc.v2(this.playerNode.x,cc.winSize.height/2)),
- cc.callFunc(()=>{
- this.dear();
- }));
- this.fireAction=this.fireNode.runAction(fireaction);
- console.log("結(jié)束發(fā)射");
- }
- });
最終效果
以上就是如何用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