Mit JS ein kleines Flugzeugkriegsspiel implementieren

var Leinwand = document.getElementById("Leinwand");
            var ctx = canvas.getContext("2d");
            var start = 0; // Startphasevar starting = 1; // Ladephase wird gestartetvar running = 2; // Spielphasevar pause = 3; // Pausenphasevar gameover = 4; // Endphasevar state = start; // Aktueller Statusvar width = canvas.width; // Breite der Leinwand abrufenvar height = canvas.height; // Höhe der Leinwand abrufenvar score = 0; // Punktzahlvar life = 3; // Lebenswert meines Flugzeugsvar bg = new Image(); // Hintergrundbild erstellenbg.src = "img/background.png";
            var BG = {
                Bilder: bg,
                Breite: 480,
                Höhe: 852,
            };
            // Einen Konstruktor zum Generieren von Hintergrundbildern erstellen Funktion Bg(config) { // Der Parameter ist das BG-Objekt this.imgs = config.imgs;
                diese.Breite = Konfigurationsbreite;
                diese.Höhe = Konfigurationshöhe;
                // Definieren Sie zwei Hintergrundbilder für die Animation this.x1 = 0;
                dies.y1 = 0;
                dies.x2 = 0;
                //Die Anfangshöhe des zweiten Hintergrundbildes wird über der Hintergrundhöhe platziert (fest) this.y2 = -this.height;
                // Methode zum Zeichnen des Hintergrundbilds this.paint = function() {
                    //Zeichne jeweils zwei Hintergrundbilder ctx.drawImage(this.imgs, this.x1, this.y1);
                    ctx.drawImage(dieses.imgs, dieses.x2, dieses.y2);
                };
                // Hintergrundbild-Bewegungsmethode this.step = function() {
                    //Verschiebe das Hintergrundbild um eine Position nach unten und animiere das Hintergrundbild dann mithilfe des Timers this.y1++;
                    dies.y2++;
                    //Beurteilen Sie den kritischen Punkt der Bildhöhe,
                    wenn (diese.y1 == diese.höhe) {
                        dies.y1 = -diese.höhe;
                    }
                    wenn (diese.y2 == diese.höhe) {
                        dies.y2 = -diese.höhe;
                    }
                }
            };
            // Hintergrundbildobjekt erstellen var sky = new Bg(BG);
            // Text für den Spielnamen generieren var logo = neues Bild();
            logo.src = "img/start.png";
            // Speichere die 4 Bilder des Ladevorgangs des Spiels in einem Array var loadings = [];
            loadings[0] = neues Bild();
            loadings[0].src = "img/game_loading1.png";
            loadings[1] = neues Bild();
            loadings[1].src = "img/game_loading2.png";
            loadings[2] = neues Bild();
            loadings[2].src = "img/game_loading3.png";
            loadings[3] = neues Bild();
            loadings[3].src = "img/game_loading4.png";
            var LADEN = {
                Bilder: laden,
                Länge: Ladelänge,
                Breite: 186,
                Höhe: 38,
            };
            // Konstruktorfunktion Loading(config) {
                diese.imges = config.imges;
                diese.Länge = Konfigurationslänge;
                diese.Breite = Konfigurationsbreite;
                diese.Höhe = Konfigurationshöhe;
                this.startIndex = 0; // Wird verwendet, um zu bestimmen, welches Bild angezeigt werden soll // Zeichenmethode this.paint = function() {
                    ctx.drawImage(diese.Bilder[dieser.StartIndex], 0, Höhe - diese.Höhe)
                };
                this.time = 0; // Bildwechselgeschwindigkeit während des Ladens // Bildwechselmethode this.step = function() {
                    dieses Mal++;
                    wenn (diesmal % 4 === 0) {
                        dies.startIndex++;
                    }
                    wenn (dieser.StartIndex === diese.Länge) {
                        // Die Ladephase endet und die Spielphase beginnt. Zustand = läuft;
                    }
                }
            };
  // Erstelle ein Objekt für die Ladephase var loading = new Loading(LOADING);

 // Unser Flugzeug var heros = [];
            heros[0] = neues Bild();
            heros[0].src = "img/hero1.png";
            heros[1] = neues Bild();
            heros[1].src = "img/hero2.png";
            heros[2] = neues Bild();
            heros[2].src = "img/hero_blowup_n1.png";
            heros[3] = neues Bild();
            heros[3].src = "img/hero_blowup_n2.png";
            heros[4] = neues Bild();
            heros[4].src = "img/hero_blowup_n3.png";
            heros[5] = neues Bild();
            heros[5].src = "img/hero_blowup_n4.png";
            var HEROS = {
                Bilder: Helden,
                Länge: heros.length,
                Breite: 99,
                Höhe: 124,
                Rahmen: 2
            };
            // Konstruktor für unser Flugzeug function Hero(config) {
                diese.imgs = konfiguration.imgs;
                diese.Länge = Konfigurationslänge;
                diese.Breite = Konfigurationsbreite;
                diese.Höhe = Konfigurationshöhe;
                dieser.Rahmen = Konfigurationsrahmen;
                this.startIndex = 0; // Wird verwendet, um den aktuellen Zustand unseres Flugzeugs zu bestimmen // Definiert die Position unseres Flugzeugs this.x = width / 2 – this.width / 2;
                dies.y = Höhe - diese.Höhe;
                // Definieren Sie das Flag der Flugzeugkollision, das angibt, dass das Flugzeug nicht getroffen wurde. this.down = false;
                // Definieren Sie, ob das Flugzeug explodiert ist, und geben Sie an, dass das Flugzeug nicht vollständig explodiert ist. this.candel = false;
                // Zeichenmethode this.paint = function() {
                    ctx.drawImage(dieses.imgs[dieses.startIndex], dieses.x, dieses.y)
                };
                // Unsere Flugzeugbewegungsmethode this.step = function() {
                    if (!this.down) { // Flugzeug ist im Normalzustandif (this.startIndex === 0) {
                            dies.startIndex = 1;
                        } anders {
                            this.startIndex = 0
                        }
                    } sonst { // Explosionszustand this.startIndex++;
                        if (this.startIndex === this.length) { // Prüfen, ob die Explosion abgeschlossen ist // Wenn sie abgeschlossen ist, life -1
                            Leben--;
                            if (life === 0) { // Prüfen, ob das Spiel tot ist state = gameover;
                                dieser.startIndex = diese.länge - 1;
                            } else { // Beginne ein neues Leben hero = new Hero(HELDEN)
                            }
                        }
                    }
                };
                // Unser Flugzeug kollidiert this.bang = function() {
                    dies.nach unten = wahr;
                };

var bullet = neues Bild();
            bullet.src = "img/bullet1.png";
            // Initialisiere var BULLETS = {
                Bilder: Kugel,
                Breite: 9,
                Höhe: 21,
            };
            //Erstelle eine Bullet-Konstruktorfunktion Bullet(config) {
                diese.imgs = konfiguration.imgs;
                diese.Breite = Konfigurationsbreite;
                diese.Höhe = Konfigurationshöhe;
                // Aufzählungszeichenkoordinaten this.x = hero.x + hero.width / 2 – this.width / 2;
                dies.y = Held.y - diese.Höhe;
                // Zeichenmethode this.paint = function() {
                    ctx.drawImage(dieses.imgs, dieses.x, dieses.y)
                };
                // Bewegungsmethode this.step = function() {
                    dies.y -= 10;
                };
                this.candel = false; // Wird verwendet um zu bestimmen ob die Kugel kollidiert // Methode zur Kollision der Kugel this.bang = function() {
                    diese.Kerze = wahr;
                }
            };
            // Alle neuen Bullet-Objekte in ein Array einfügen var bullets = [];
            // Aufzählungszeichen durchlaufen und zeichnen Funktion bulletdPaint() {
                für (var i = 0; i < Aufzählungszeichen.Länge; i++) {
                    Aufzählungszeichen[i].paint();
                }
            };
            // Durchqueren und die Bewegung der Kugel aufrufen;
            Funktion bulletdStep() {
                für (var i = 0; i < Aufzählungszeichen.Länge; i++) {
                    Aufzählungszeichen[i].Schritt();
                }
            };
            //Funktion zum Löschen von Aufzählungszeichen function bulletDel() {
                // Aufzählungszeichen löschen wenn sie kollidieren // Überschreitung der Höhe der Leinwand, d.h. der negativen Höhe des Aufzählungszeichens for (var i = 0; i < bullets.length; i++) {
                    wenn (Bullets[i].candel || Bullets[i].y < -bullets[i].height) {
                        Aufzählungszeichen.spleißen(i, 1)
                    }
                }
            };

 //Kugelstart this.time = 0; //Die anfängliche Entwurfsgeschwindigkeit ist 0
                dies.shoot = Funktion() {
                    dieses Mal++;
                    if (this.time % 2 === 0) { // Alle 2 Schritte schießen bullets.push(new Bullet(BULLETS))
                    }
                };
            };
            // Erstellen Sie eine Objektinstanz unseres Flugzeugs var hero = new Hero(HEROS);
            // Mausbewegungsereignis canvas.onmousemove = function(event) {
                // console.log("bei Mausbewegung");
                var Ereignis = Ereignis || Fenster.Ereignis;
                if (state == running) { // Beurteile den aktuellen Spielstatus // Weise den Wert der horizontalen Mauskoordinate auf der erhaltenen Seite der horizontalen Koordinate (Position) des Flugzeugs zu
                    hero.x = EreignisoffsetX – hero.width / 2;
                    // Weisen Sie den Wert der Mausordinate auf der erhaltenen Seite der Ordinate (Position) des Flugzeugs zu
                    Held.y = EreignisoffsetY – Held.Höhe / 2;
                }
            };

// Zeichnung des feindlichen Flugzeugs var enemy1 = []; //Kleines Flugzeug enemy1[0] = new Image();
            feind1[0].src = "img/feind1.png";
            feind1[1] = neues Bild();
            feind1[1].src = "img/feind1_down1.png";
            Feind1[2] = neues Bild();
            feind1[2].src = 'img/feind1_down2.png';
            feind1[3] = neues Bild();
            feind1[3].src = "img/enemy1_down3.png";
            feind1[4] = neues Bild();
            feind1[4].src = "img/enemy1_down4.png";
            var enemy2 = []; //Mittelebene enemy2[0] = neues Image();
            feind2[0].src = "img/feind2.png";
            feind2[1] = neues Bild();
            enemy2[1].src = "img/enemy2_down1.png";
            feind2[2] = neues Bild();
            enemy2[2].src = "img/enemy2_down2.png";
            feind2[3] = neues Bild();
            enemy2[3].src = "img/enemy2_down3.png";
            feind2[4] = neues Bild();
            enemy2[4].src = "img/enemy2_down4.png";
            var enemy3 = []; //Großes Flugzeug enemy3[0] = new Image();
            enemy3[0].src = "img/enemy3_n1.png";
            feind3[1] = neues Bild();
            enemy3[1].src = "img/enemy3_n2.png";
            feind3[2] = neues Bild();
            enemy3[2].src = "img/enemy3_down1.png";
            feind3[3] = neues Bild();
            enemy3[3].src = "img/enemy3_down2.png";
            feind3[4] = neues Bild();
            enemy3[4].src = "img/enemy3_down3.png";
            feind3[5] = neues Bild();
            enemy3[5].src = "img/enemy3_down4.png";
            feind3[6] = neues Bild();
            enemy3[6].src = "img/enemy3_down5.png";
            feind3[7] = neues Bild();
            enemy3[7].src = "img/enemy3_down6.png";
            // Daten initialisieren var ENEMY1 = {
                Bilder: Feind1,
                Länge: feind1.Länge,
                Breite: 57,
                Höhe: 51,
                Typ: 1,
                Rahmen: 2,
                Leben: 1,
                Punktzahl: 1,
            };
            var ENEMY2 = {
                Bilder: Feind2,
                Länge: feind2.Länge,
                Breite: 69,
                Höhe: 95,
                Typ: 2,
                Rahmen: 2,
                Leben: 5,
                Punktzahl: 5,
            };
            var ENEMY3 = {
                Bilder: Feind3,
                Länge: feind3.Länge,
                Breite: 165,
                Höhe: 261,
                Typ: 3,
                Rahmen: 2,
                Leben: 15,
                Punktzahl: 20,
            };
            // Konstruktor für die feindlichen Flugzeuge Funktion Enemy(config) {
                diese.imgs = konfiguration.imgs;
                diese.Länge = Konfigurationslänge;
                diese.Breite = Konfigurationsbreite;
                diese.Höhe = Konfigurationshöhe;
                dieser.Typ = Konfigurationstyp;
                dieser.Rahmen = Konfigurationsrahmen;
                dies.leben = konfiguration.leben;
                dieser.score = konfiguration.score;
                // Die Koordinaten des feindlichen Flugzeugs this.x = Math.random() * (width - this.width);
                dies.y = -diese.höhe;
                this.startIndex = 0; // wird verwendet, um den Index zu beurteilen this.down = false; // wird verwendet, um zu beurteilen, ob eine Kollision vorliegt this.candel = false; // wird verwendet, um zu beurteilen, ob die Explosion abgeschlossen ist // Zeichenmethode this.paint = function() {
                    ctx.drawImage(dieses.imgs[dieses.startIndex], dieses.x, dieses.y);
                };
                //Bewegungsmethode this.step = function() {
                    if (!this.down) { // Das feindliche Flugzeug ist im Normalzustand // Die Indizes von kleinen und mittleren Flugzeugen sind immer 0
                        //Der Index des großen Flugzeugs wird zwischen 0 und 1 umgeschaltet this.startIndex++;
                        dieser.startIndex = dieser.startIndex % dieser.Rahmen;
                        // Abwärtsanimation des Flugzeugs this.y += 2;
                    } else { //Nachdem das Flugzeug kollidiert ist this.startIndex++;
                        wenn (dieser.StartIndex == diese.Länge) {
                            diese.Kerze = wahr;
                            dieser.startIndex = diese.länge - 1;
                        }
                    }
                };
                // Prüfen, ob es eine Kollision gegeben hat this.checkHit = function(wo) { // Prüfen der vier Seiten return wo.y + wo.height > this.y &&
                        wo.x + wo.width > dies.x &&
                        wo.y < dieses.y + diese.höhe &&
                        wo.x < dieses.x + diese.Breite;
                };
                //Nachdem das feindliche Flugzeug kollidiert ist this.bang = function() {
                    dieses.Leben--;
                    wenn (dieses.Leben === 0) {
                        dies.nach unten = wahr;
                        Punktzahl += diese.Punktzahl;
                    }
                }
            };
            //Array speichert feindliche Flugzeuge var enemise = [];
            // Daten zum Array der feindlichen Flugzeuge hinzufügen Funktion enterEnemise() {
                var rand = Math.floor(Math.random() * 100)
                wenn (rand < 10) {
                    // Füge ein kleines Flugzeug hinzu enemy.push(new Enemy(ENEMY1));
                } sonst wenn (rand < 55 && rand > 50) {
                    // Flugzeug hinzufügen enemy.push(new Enemy(ENEMY2));
                } sonst wenn (rand === 88) {
                    // Füge ein großes Flugzeug hinzu if (enemise[0].type !== 3 && enemise.length > 0) {
                        enemise.splice(0, 0, neuer Feind(ENEMY3));
                    }
                }
            };
            // Zeichne das feindliche Flugzeug Funktion enemyPaint() {
                für (var i = 0; i < enemise.length; i++) {
                    enemise[i].paint();
                }
            };
            //Bewegung feindlicher Flugzeuge Funktion enemyStep() {
                für (var i = 0; i < enemise.length; i++) {
                    enemise[i].schritt();
                }
            };
            // Lösche feindliche Flugzeuge Funktion function delenemy() {
                für (var i = 0; i < enemise.length; i++) {
                    // Konsole.log(Feind[i].candel)
                    wenn (enemise[i].y > Höhe || enemise[i].candel) {
                        enemise.splice(i, 1)
                    }
                }
            };
            // Funktion nach Kollision function hitEnemise() {
                für (var i = 0; i < enemise.length; i++) {
                    // Wenn ich mein Flugzeug starte und es ein feindliches Flugzeug trifft, if (enemise[i].checkHit(hero)) {
                        // Nachdem das feindliche Flugzeug kollidiert ist, ändert sich der Kollisionszustand enemy[i].bang();
                        // Nachdem unser Flugzeug kollidiert ist, ändert sich der Kollisionsstatus hero.bang();
                    };
                    // Die Kugel trifft das feindliche Flugzeug für (var j = 0; j < bullets.length; j++) {
                        wenn (Feind[i].checkHit(Bullets[j])) {
                            Feindseligkeit[i].bang();
                            // Nachdem die Kugel kollidiert ist, ändert sich der Kollisionszustand bullets[j].bang();
                        }
                    }
                }
            };

 // Punktestand und Gesundheitszustand ermitteln Funktion scoreText() {
                ctx.font = "30px fett"
                ctx.fillText("Punktzahl:" + Punktzahl, 10, 30);
                ctx.fillText("Leben:" + Leben, 300, 30);
            };
            // Das Spiel ist pausiert canvas.onmouseout = function() {
                wenn (Status === läuft) {
                    Zustand = Pause;
                }
            };
            //Rufe das Mouseover-Ereignis des Canvas auf canvas.onmouseover = function() {
                wenn (Zustand === Pause) {
                    Status = läuft;
                }
            };
            // Bild anhalten var pause = new Image()
            pause.src = "img/game_pause_nor.png";
            // Spiel vorbei Funktion gameoverfn() {
                ctx.font = "50px fett"
                ctx.fillText("SPIEL VORBEI !!!", 80, 300);
                ctx.fillText("NOCH EINMAL !!!", 80, 400);
            };
            // Canvas-Klickereignis canvas.addEventListener("click", function(e) {
                p = getEventPosition(e);
                // Durch Klicken auf die Leinwand feststellen, ob das Spiel gestartet wurde, if (state === start) {
                    Status = wird gestartet;
                }
                konsole.log(123);
                // Probleme beim Neustart des Spiels? ? ?
                wenn (Status === Spiel vorbei) {
                    wenn (py >= 350 und py < 450) {
                        console.log('Sie haben NOCH EINMAL geklickt!!!');
                        Status = läuft;
                    }
                }
            });

            Funktion getEventPosition(e) {
                var x, y;
                wenn (e.layerX || ev.layerX === 0) {
                    x = e.SchichtX;
                    y = e.SchichtY;
                } sonst wenn (e.offsetX || ev.offsetX === 0) {
                    x = e.offsetX;
                    y = e.OffsetY;
                }
                zurückkehren {
                    x: x,
                    j: j
                };
            };

setzeIntervall(Funktion() {
                //Das Hintergrundbild und seine dynamischen Effekte sind in allen Zuständen verfügbarsky.paint(); // Den Hintergrund zeichnensky.step(); // Hintergrundanimationif (state === start) { // Die erste Phasectx.drawImage(logo, 35, 0)
                } else if (state === starting) { // Die zweite Phase loading.paint(); // Den Hintergrund zeichnen loading.step(); // Hintergrundanimation } else if (state === running) { // Der dritte Zustand // Zeichne mich, wie ich das Flugzeug fliege hero.paint();
                    // Bewegung unseres Flugzeugs hero.step();
                    //Die Schießmethode unseres Flugzeugs hero.shoot();
                    // Zeichnen von Aufzählungszeichen bulletdPaint();
                    //Bewegung der Kugel bulletdStep();
                    // Aufzählungszeichen löschen bulletDel();
                    // Erstelle ein feindliches Flugzeug enterEnemise();
                    // Zeichne das feindliche Flugzeug enemyPaint();
                    // Zeichne die Bewegung des feindlichen Flugzeugs enemyStep();
                    // Lösche das feindliche Flugzeug delenemy();
                    // Bestimmen, ob es trifft hitEnemise();
                    // Zeichne den Punktestand und den Gesundheitswert scoreText()
                } else if (state === pause) { // Vierter Zustand sky.paint(); // Den Hintergrund zeichnen sky.step(); // Hintergrundanimation // Zeichne mich, wie ich das Flugzeug fliege hero.paint();
                    // Zeichnen von Aufzählungszeichen bulletdPaint();
                    // Zeichne das feindliche Flugzeug enemyPaint();
                    // Punktestand und Gesundheitswert zeichnen scoreText();
                    ctx.drawImage(Pause, 220, 300)
                } else if (state === gameover) { // Fünfter Zustand sky.paint(); // Hintergrund zeichnen sky.step(); // Hintergrundanimation hero.paint();
                    // Zeichnen von Aufzählungszeichen bulletdPaint();
                    // Zeichne das feindliche Flugzeug enemyPaint();
                    // Punktestand und Gesundheitswert zeichnen scoreText();
                    // Spiel vorbei gameoverfn();
                }
            }, 10)
        })()