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 タイムゾーンの罠を回避する方法

ブログ    

推薦する

クリックイメージ反転効果を実現するJavaScript

最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...

UTF-8 および GB2312 ウェブエンコーディング

最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...

ウェブページの画像の回転を実現するjs

この記事では、Webページの画像の回転を実現するためのjsの具体的なコードを参考までに共有します。具...

ビジュアルデザイナーの成長の3つの段階のまとめ

この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...

mysql トリガーの作成と使用例

目次トリガーとは何かトリガーを作成するMySQL 作成構文のキーワードの説明: 1. MySQL ト...

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...

MySQL サブクエリ (ネストされたクエリ)、結合テーブル、複合クエリの詳細な説明

1. サブクエリMySQL 4.1以降はサブクエリをサポートしていますサブクエリ:別のクエリ内にネス...

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

Linux で 1 つのファイルの内容を別のファイルの末尾にコピーする

問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...

MySQL の binlog ログと、binlog ログを使用してデータを回復する方法を説明します。

ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...

Linux環境にJDKとTomcatをインストールする詳細な手順

目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...

Dockerを使用してSpring Bootプロジェクトをデプロイする手順

目次シンプルなSpringbootプロジェクトを作成する1. pom.xmlでSpring Boot...

VMware WorkStation を Docker for Windows で使用するための詳細なチュートリアル

目次1. はじめに2. Windows用Dockerをインストールする1. Windows用Dock...

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

CentOS 7 で RPM パッケージを使用して MySQL 5.7.9 をインストールするチュートリアル

MySQL 5.7.9 のインストールチュートリアルを録画してみんなと共有しましょう環境の紹介:オペ...