CocosCreatorを使ってシューティングゲームを作る方法

CocosCreatorを使ってシューティングゲームを作る方法

製造手順を分析します。

1. リソースを準備してシーンを構築する

オンラインでリソースを探すか、私のリソースを使用できます。フォルダーを作成し、リソースを res フォルダーに配置します。

シーンを構築する:
ステップ 1: 単色のスプライト (スクリプト) 背景を作成し、色を設定して、ウィジェット コンポーネントを追加して画面全体に表示します。

ステップ 2: bgノードの下の上部と下部として、 topbutton空ノードを作成し、2 つの空ノードにトゲのあるノードを追加します (画像を最上位階層マネージャーにドラッグするだけです)。次にtop與button Layout組件を追加し、図に示すようにプロパティを設定する必要があります。このようにして、画面の上部と下部にトゲがあることがわかります。

ステップ 3: 同じ方法でプレイヤー、弾丸、敵機をシーンに追加し、スコアを表示するラベル ノードを作成し、位置を調整します。

2. コードがゲームを制御する

ステップ 1: gameスクリプトを作成し、 dgノードにマウントします。

ステップ 2: コードを編集し、 propertiesにプロパティを追加して、プレーヤー、弾丸、敵のノードを関連付け、エディターで関連付けます。

ステップ 3: プレイヤー、弾丸、敵の初期化、監視イベントの登録、アクション関数の記述、スコアリング判定などを含むロジック制御をコーディングします。

完全なコード:

cc.クラス({
    拡張: cc.Component、

    プロパティ:
        プレイヤーノード: cc.Node,
        敵ノード: cc.Node,
        ファイアノード: cc.Node,
        スコアノード: cc.Label、
    },
    
     オンロード(){
        これを再生ロードします。
        this.fireLoad();
        this.enemyLoad();
         this.node.on("touchstart",this.fire,this);
         
     },

     更新 (dt) {
          (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("敵機を撃破");
              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();//敵機を初期化します}

     },

     // イベントリスニングを閉じる onDestroy(){
        this.node.off("touchstart",this.fire,this);
     },
    // 初期プレーヤー playLoad(){
        this.score=0;
        this.playerNode.y=-cc.winSize.height/4;
        
    },
    //弾丸を初期化する fireLoad(){
        アクティブノードを true に設定します。
        this.isFire=false;
        this.fireNode.x = this.playerNode.x;
        this.fireNode.y=this.playerNode.y+this.playerNode.height;
    },
    // 敵を初期化するenemyLoad(){
        this.enemyNode.active=true;
        this.enemyNode.x=Math.random()* cc.winSize.width;
        this.enemyNode.y=cc.winSize.height/3;
        x = cc.winSize.width/2 - this.enemyNode.width/2 とします。
        y=Math.random()* cc.winSize.height/4 とします。
        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("ゲームシーン");
    },


    // 弾丸を発射する fire(){
         if(this.isFire) 戻り値:
         this.isFire=true;
        console.log("起動を開始します");
         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("起動終了");
     }

});

最終結果

上記は、CocosCreatorを使用してシューティングゲームを実現する方法の詳細です。CocosCreatorを使用してシューティングゲームを実現する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • cocoscreatorプレハブの詳しい説明
  • CocosCreator でレイヤー管理に常駐ノードを使用する方法
  • ゲーム開発におけるサウンド処理にCocosCreatorを使用する方法
  • CocosCreator ScrollView 最適化シリーズ: フレーム読み込み
  • CocosCreatorプロジェクト構造の仕組みの詳細な説明
  • CocosCreatorオブジェクトプールの使い方
  • CocosCreatorでスワイプした位置にテクスチャを表示する方法
  • CocosCreatorの共通知識ポイントを整理する
  • CocosCreatorのホットアップデートの包括的な説明
  • CocosCreator クラシック エントリー プロジェクト flappybird
  • CocosCreator ユニバーサルフレームワークデザインネットワーク
  • CocosCreatorでゲームコントローラーを使用する方法

<<:  Nginx try_files ディレクティブの使用例

>>:  MySQL で URL タイムゾーンの罠を回避する方法

推薦する

LinuxでのMySQLのインストール手順

1. mysql tar ファイルをダウンロードします。参考: 2. インストールパッケージがあるデ...

nginx+uwsgi で Django プロジェクトを開始するための詳細な手順

Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...

Vue でスロットを使用する方法についての簡単な説明

定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...

フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介

1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...

Alibaba Cloud CentOS 7 に yum を使用して MySQL をインストールする正しい方法 (推奨)

yum クイックインストール mysql yumリポジトリを追加する rpm -Uvh http:...

Nginx http ヘルスチェック構成プロセス分析

パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...

HTML要素を非表示にするいくつかの方法

1. CSSを使用するコードをコピーコードは次のとおりです。スタイル="display:n...

CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

Dockerでnginxをデプロイし、設定ファイルを変更する方法

Dockerでnginxをデプロイするのはとても簡単ですたった 1 行のコマンド: docker 実...

CSS でハートを描く 3 つの方法

以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプル...

HTML テーブルインライン形式の詳細な説明

インライン形式<colgroup>...</colgroup>属性名 属性値...

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

ReactとReduxの配列処理の説明

この記事では、reduce()、filter()、map()、every()、some()、spre...

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...