JS を使用して航空機戦争の小さなゲームを実装する

var キャンバス = document.getElementById("キャンバス");
            var ctx = canvas.getContext("2d");
            var start = 0; // フェーズの開始var starting = 1; // ロードの開始phasevar running = 2; // ゲームphasevar pause = 3; // 一時停止phasevar gameover = 4; // フェーズの終了var state = start; // 現在の状態var width = canvas.width; // キャンバスの幅を取得var height = canvas.height; // キャンバスの高さを取得var score = 0; // スコアvar life = 3; // 自分の飛行機のライフ値var bg = new Image(); // 背景画像の作成bg.src = "img/background.png";
            var BG = {
                画像: 背景、
                幅: 480,
                高さ: 852,
            };
            // 背景画像を生成するコンストラクターを作成します。 function Bg(config) { // パラメーターは BG オブジェクトです。 this.imgs = config.imgs;
                config.width を設定します。
                config.height を設定します。
                // アニメーション用の背景画像を 2 つ定義します。this.x1 = 0;
                y1 = 0;
                x2 = 0;
                // 2 番目の背景画像の初期の高さは背景の高さより上に配置されます (固定) this.y2 = -this.height;
                // 背景画像描画メソッド this.paint = function() {
                    // 2 つの背景画像をそれぞれ描画します ctx.drawImage(this.imgs, this.x1, this.y1);
                    ctx.drawImage(this.imgs、this.x2、this.y2);
                };
                // 背景画像の移動方法 this.step = function() {
                    //背景画像を 1 つ下に移動し、タイマーを使用して背景画像をアニメーション化します。this.y1++;
                    これを y2++ します。
                    //画像の高さの臨界点を判断し、
                    （this.y1 == this.height）の場合{
                        this.y1 = -this.height;
                    }
                    （this.y2 == this.height）の場合{
                        this.y2 = -this.height;
                    }
                }
            };
            // 背景画像オブジェクトを作成します。var sky = new Bg(BG);
            // ゲーム名のテキストを生成します var logo = new Image();
            ロゴ.src = "img/start.png";
            // ゲームの読み込みプロセスの 4 つの画像を配列に保存します。var loadings = [];
            loadings[0] = 新しいイメージ();
            ローディング[0].src = "img/game_loading1.png";
            loadings[1] = 新しいImage();
            ローディング[1].src = "img/game_loading2.png";
            loadings[2] = 新しいImage();
            ローディング[2].src = "img/game_loading3.png";
            loadings[3] = 新しいImage();
            ローディング[3].src = "img/game_loading4.png";
            var LOADING = {
                画像: 読み込み中、
                長さ: loadings.length、
                幅: 186,
                高さ: 38,
            };
            // コンストラクタ関数 Loading(config) {
                config.imges を設定します。
                config.length は、次のようになります。
                config.width を設定します。
                config.height を設定します。
                this.startIndex = 0; // どの画像を表示するかを決定するために使用されます // 描画メソッド this.paint = function() {
                    ctx.drawImage(this.images[this.startIndex], 0, 高さ - this.height)
                };
                this.time = 0; // 読み込み時の画像切り替え速度 // 画像切り替え方法 this.step = function() {
                    this.time++;
                    （this.time % 4 === 0）の場合{
                        this.startIndex++;
                    }
                    (this.startIndex === this.length) の場合 {
                        // 読み込みフェーズが終了し、ゲームフェーズが開始されます。state = running;
                    }
                }
            };
  // ロードフェーズ用のオブジェクトを作成します。var loading = new Loading(LOADING);

 // 私たちの飛行機 var heros = [];
            heros[0] = 新しいイメージ();
            ヒーロー[0].src = "img/hero1.png";
            heros[1] = 新しいImage();
            ヒーロー[1].src = "img/hero2.png";
            heros[2] = 新しいImage();
            ヒーロー[2].src = "img/hero_blowup_n1.png";
            heros[3] = 新しいImage();
            ヒーロー[3].src = "img/hero_blowup_n2.png";
            heros[4] = 新しいImage();
            ヒーロー[4].src = "img/hero_blowup_n3.png";
            heros[5] = 新しいImage();
            ヒーロー[5].src = "img/hero_blowup_n4.png";
            var HEROS = {
                画像: ヒーロー、
                長さ: heros.length,
                幅: 99,
                高さ: 124,
                フレーム: 2
            };
            // 航空機のコンストラクター function Hero(config) {
                config.imgs を次のように変更します。
                config.length は、次のようになります。
                config.width を設定します。
                config.height を設定します。
                config.frame をオーバーライドします。
                this.startIndex = 0; // 航空機の現在の状態を判断するために使用されます // 航空機の位置を定義します this.x = width / 2 - this.width / 2;
                this.y = 高さ - this.height;
                // 飛行機が衝突しなかったことを示す飛行機衝突フラグを定義します。this.down = false;
                // 飛行機が爆発したかどうかを定義します。飛行機が完全に爆発していないことを示します。this.candel = false;
                // 描画メソッド this.paint = function() {
                    ctx.drawImage(this.imgs[this.startIndex], this.x, this.y)
                };
                // 航空機の移動方法 this.step = function() {
                    if (!this.down) { // 航空機は通常状態ですif (this.startIndex === 0) {
                            this.startIndex = 1;
                        } それ以外 {
                            this.startIndex = 0
                        }
                    } else { // 爆発状態 this.startIndex++;
                        if (this.startIndex === this.length) { // 爆発が完了したかどうかをチェック // 完了している場合は、ライフ -1
                            人生 - ;
                            if (life === 0) { // ゲームが終了しているかどうかを確認します state = gameover;
                                this.startIndex = this.length - 1;
                            } else { // 新しい人生を始める hero = new Hero(HEROS)
                            }
                        }
                    }
                };
                // 飛行機が衝突します this.bang = function() {
                    this.down = true;
                };

var bullet = 新しい画像();
            箇条書き.src = "img/bullet1.png";
            // 初期化 var BULLETS = {
                画像: 弾丸、
                幅: 9,
                高さ: 21,
            };
            // 弾丸コンストラクタ関数を作成する Bullet(config) {
                config.imgs を次のように変更します。
                config.width を設定します。
                config.height を設定します。
                // 弾丸の座標 this.x = hero.x + hero.width / 2 - this.width / 2;
                this.y = hero.y - this.height;
                // 描画メソッド this.paint = function() {
                    ctx.drawImage(this.imgs, this.x, this.y)
                };
                // 移動方法 this.step = function() {
                    y = 10;
                };
                this.candel = false; // 弾丸が衝突するかどうかを判定するために使用されます // 弾丸衝突メソッド this.bang = function() {
                    this.candel = true;
                }
            };
            // すべての新しい箇条書きオブジェクトを配列に格納します var bullets = [];
            // 横断して箇条書きを描画する function bulletdPaint() {
                (var i = 0; i < bullets.length; i++) の場合 {
                    弾丸[i].paint();
                }
            };
            // トラバースして弾丸の動きを呼び出します。
            関数bulletdStep() {
                (var i = 0; i < bullets.length; i++) の場合 {
                    箇条書き[i].step();
                }
            };
            //箇条書き削除関数 function bulletDel() {
                // 弾丸が衝突したら削除する // キャンバスの高さ、つまり弾丸の負の高さを超える場合 for (var i = 0; i < bullets.length; i++) {
                    もし（bullets[i].candel || bullets[i].y < -bullets[i].height）{
                        弾丸.splice(i, 1)
                    }
                }
            };

 //弾丸発射 this.time = 0; //初期設計速度は0
                this.shoot = 関数() {
                    this.time++;
                    if (this.time % 2 === 0) { // 2歩ごとに撃つ bullets.push(new Bullet(BULLETS))
                    }
                };
            };
            // 航空機のオブジェクト インスタンスを作成します。var hero = new Hero(HEROS);
            // マウス移動イベント canvas.onmousemove = function(event) {
                // console.log("onmousemove");
                var イベント = イベント || window.event;
                if (state == running) { //現在のゲーム状態を判定 //取得したページ内のマウスの水平座標の値を航空機の水平座標（位置）に代入する
                    hero.x = event.offsetX - hero.width / 2;
                    //取得したページ内のマウス座標の値を航空機の座標（位置）に代入する
                    hero.y = event.offsetY - hero.height / 2;
                }
            };

// 敵機の描画 var enemies1 = []; // 小型飛行機 enemies1[0] = new Image();
            敵1[0].src = "img/敵1.png";
            敵1[1] = 新しい画像();
            敵1[1].src = 'img/enemy1_down1.png';
            敵1[2] = 新しい画像();
            敵1[2].src = 'img/enemy1_down2.png';
            敵1[3] = 新しい画像();
            敵1[3].src = 'img/enemy1_down3.png';
            敵1[4] = 新しい画像();
            敵1[4].src = 'img/enemy1_down4.png';
            var enemies2 = []; // 中間平面 enemies2[0] = new Image();
            敵2[0].src = "img/敵2.png";
            敵2[1] = 新しい画像();
            敵2[1].src = "img/敵2_down1.png";
            敵2[2] = 新しい画像();
            敵2[2].src = "img/敵2_down2.png";
            敵2[3] = 新しい画像();
            敵2[3].src = "img/enemy2_down3.png";
            敵2[4] = 新しい画像();
            敵2[4].src = "img/enemy2_down4.png";
            var enemies3 = []; //大きな飛行機 enemies3[0] = new Image();
            敵3[0].src = "img/敵3_n1.png";
            敵3[1] = 新しい画像();
            敵3[1].src = "img/enemy3_n2.png";
            敵3[2] = 新しい画像();
            敵3[2].src = "img/敵3_down1.png";
            敵3[3] = 新しい画像();
            敵3[3].src = "img/enemy3_down2.png";
            敵3[4] = 新しい画像();
            敵3[4].src = "img/enemy3_down3.png";
            敵3[5] = 新しい画像();
            敵3[5].src = "img/enemy3_down4.png";
            敵3[6] = 新しい画像();
            敵3[6].src = "img/enemy3_down5.png";
            敵3[7] = 新しい画像();
            敵3[7].src = "img/enemy3_down6.png";
            // データを初期化する var ENEMY1 = {
                画像: 敵1,
                長さ: 敵1.長さ、
                幅: 57,
                高さ: 51,
                タイプ: 1,
                フレーム: 2,
                ライフ: 1,
                スコア: 1,
            };
            var 敵2 = {
                画像: 敵2,
                長さ: 敵2.長さ、
                幅: 69,
                高さ: 95,
                タイプ: 2,
                フレーム: 2,
                ライフ: 5,
                スコア: 5,
            };
            var 敵3 = {
                画像: 敵3,
                長さ: 敵3.長さ、
                幅: 165,
                高さ: 261,
                タイプ: 3,
                フレーム: 2,
                ライフ: 15,
                スコア: 20,
            };
            // 敵機のコンストラクタ function Enemy(config) {
                config.imgs を次のように変更します。
                config.length は、次のようになります。
                config.width を設定します。
                config.height を設定します。
                config.type は、次のようになります。
                config.frame をオーバーライドします。
                config.life をオーバーライドします。
                config.score を設定します。
                // 敵機の座標 this.x = Math.random() * (width - this.width);
                this.y = -this.height;
                this.startIndex = 0; // 下付き文字の判定に使用 this.down = false; // 衝突の有無の判定に使用 this.candel = false; // 爆発が完了したかどうかの判定に使用 //描画メソッド this.paint = function() {
                    ctx.drawImage(this.imgs[this.startIndex], this.x, this.y);
                };
                //移動方法 this.step = function() {
                    if (!this.down) { // 敵機は通常状態 // 小型機と中型機の添え字は常に0
                        //大型航空機のインデックスは0と1の間で切り替えられます this.startIndex++;
                        this.startIndex = this.startIndex % this.frame;
                        // 平面の下向きのアニメーション this.y += 2;
                    } else { // 飛行機が衝突した後 this.startIndex++;
                        (this.startIndex == this.length) の場合 {
                            this.candel = true;
                            this.startIndex = this.length - 1;
                        }
                    }
                };
                // 衝突したかどうかをチェックする this.checkHit = function(wo) { // 4辺をチェックする return wo.y + wo.height > this.y &&
                        wo.x + wo.width > this.x &&
                        wo.y < this.y + this.height &&
                        wo.x < this.x + this.width;
                };
                //敵機が衝突した後 this.bang = function() {
                    この.life--;
                    （this.life === 0）の場合{
                        this.down = true;
                        スコア += this.score;
                    }
                }
            };
            //配列に敵機が格納されます var enemise = [];
            // 敵機配列にデータを追加する function enterEnemise() {
                var rand = Math.floor(Math.random() * 100)
                （ランダム値<10）の場合{
                    // 小さな飛行機を追加します。enemy.push(new Enemy(ENEMY1));
                } そうでない場合 (rand < 55 && rand > 50) {
                    // 航空機の追加 enemies.push(new Enemy(ENEMY2));
                } そうでない場合 (rand === 88) {
                    // 大きな平面を追加する if (enemise[0].type !== 3 && enemise.length > 0) {
                        enemise.splice(0, 0, 新しい敵(ENEMY3));
                    }
                }
            };
            // 敵機を描画する function enemiesPaint() {
                (var i = 0; i < enemise.length; i++) の場合 {
                    敵[i].paint();
                }
            };
            //敵機の移動関数enemyStep() {
                (var i = 0; i < enemise.length; i++) の場合 {
                    敵[i].step();
                }
            };
            // 敵機を削除する関数 function delenemy() {
                (var i = 0; i < enemise.length; i++) の場合 {
                    // console.log(enemise[i].candel)
                    （enemise[i].y > 高さ || enemise[i].candel）の場合{
                        敵対するスプライス(i, 1)
                    }
                }
            };
            // 衝突後の関数 function hitEnemise() {
                (var i = 0; i < enemise.length; i++) の場合 {
                    // 飛行機を発射して敵の飛行機に衝突した場合 if (enemise[i].checkHit(hero)) {
                        // 敵機が衝突すると衝突状態が変わります。enemy[i].bang();
                        // 飛行機が衝突すると、衝突ステータスが変わります。hero.bang();
                    };
                    // 弾丸が敵機に命中する for (var j = 0; j < bullets.length; j++) {
                        敵[i].checkHit(bullets[j])の場合{
                            敵[i].bang();
                            // 弾が衝突すると衝突状態が変わります bullets[j].bang();
                        }
                    }
                }
            };

 // スコアと体力を描画する function scoreText() {
                ctx.font = "30px 太字"
                ctx.fillText("スコア:" + スコア, 10, 30);
                ctx.fillText("life:" + life, 300, 30);
            };
            // ゲームは一時停止します canvas.onmouseout = function() {
                if (状態 === 実行中) {
                    状態 = 一時停止;
                }
            };
            //キャンバスのマウスオーバーイベントを呼び出す canvas.onmouseover = function() {
                if (状態 === 一時停止) {
                    状態 = 実行中;
                }
            };
            // 画像を一時停止する var pause = new Image()
            pause.src = "img/game_pause_nor.png";
            // ゲームオーバー関数 gameoverfn() {
                ctx.font = "50px 太字"
                ctx.fillText("ゲームオーバー!!!", 80, 300);
                ctx.fillText("もう一度!!!", 80, 400);
            };
            // キャンバスクリックイベント canvas.addEventListener("click", function(e) {
                p = getEventPosition(e);
                // キャンバスをクリックしたときに、ゲームが開始したかどうかを判断します if (state === start) {
                    状態 = 開始;
                }
                コンソールログ(123);
                // ゲームの再起動に問題がありますか? ? ?
                if (状態 === ゲームオーバー) {
                    py >= 350 && py < 450 の場合
                        console.log('もう一度クリックしました!!!');
                        状態 = 実行中;
                    }
                }
            });

            関数 getEventPosition(e) {
                var x, y;
                e.layerX || ev.layerX === 0 の場合 {
                    レイヤーX
                    y = e.layerY;
                } そうでない場合 (e.offsetX || ev.offsetX === 0) {
                    x = e.offsetX;
                    y = e.offsetY;
                }
                戻る {
                    x: x,
                    y: y
                };
            };

setInterval(関数() {
                //背景画像とその動的効果はすべての状態で使用可能ですsky.paint(); //背景を描画しますsky.step(); //背景アニメーションif (state === start) { //最初のステージctx.drawImage(logo, 35, 0)
                } else if (state === starting) { // 2 番目のステージ loading.paint(); // 背景を描画 loading.step(); // 背景アニメーション } else if (state === running) { // 3 番目の状態 // 飛行機を飛ばしている自分を描画 hero.paint();
                    // 航空機の動き hero.step();
                    //自機の射撃方法 hero.shoot();
                    // 弾丸の描画 bulletdPaint();
                    //弾丸の移動 bulletdStep();
                    // 弾丸を削除します bulletDel();
                    // 敵機を作成する enterEnemise();
                    // 敵機を描画するenemyPaint();
                    // 敵機の動きを描画するenemyStep();
                    // 敵機を削除する delenemy();
                    // ヒットしたかどうかを判定する hitEnemise();
                    // スコアと体力値を描画する scoreText()
                } else if (state === pause) { // 4 番目の状態 sky.paint(); // 背景を描画します sky.step(); // 背景アニメーション // 飛行機を飛ばしている私を描画します hero.paint();
                    // 弾丸描画 bulletdPaint();
                    // 敵機を描画するenemyPaint();
                    // スコアと体力値を描画します scoreText();
                    ctx.drawImage(一時停止、220、300)
                } else if (state === gameover) { // 5番目の状態 sky.paint(); // 背景を描画 sky.step(); // 背景アニメーション hero.paint();
                    // 弾丸の描画 bulletdPaint();
                    // 敵機を描画するenemyPaint();
                    // スコアと体力値を描画します scoreText();
                    // ゲームオーバー gameoverfn();
                }
            }, 10)
        })()