JavaScript zur Implementierung des Flugzeugkriegsspiels
|
In diesem Artikel erfahren Sie, wie Sie mit Canvas und JS einen einfachen Flugzeugkrieg implementieren. Der spezifische Inhalt ist wie folgt Vorschaubild:
Code:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
Leinwand {
Anzeige: Block;
Rand: 0 automatisch;
Rand: 1px durchgezogen #000;
}
</Stil>
</Kopf>
<Text>
<Leinwand></Leinwand>
<Skript>
// Canvas-Element abrufen var canvas = document.getElementsByTagName('canvas')[0];
// Pinsel abrufen var ctx = canvas.getContext('2d');
// Canvas-Informationen var canvasParam = {
Breite: 480,
Höhe: 852
}
Leinwand.Breite = LeinwandParam.Breite;
Leinwand.Höhe = LeinwandParam.Höhe;
// Spielstatus initialisieren var ready = 0; // Vorbereitung var loading = 1; // Wird geladen var running = 2; // Im Spiel var pause = 3; // Pause var gameOver = 4; // Ende // Aktuellen Spielstatus ermitteln var gameState = ready;
// Lebenswert initialisieren var life = 3;
// Spielstand initialisieren var score = 0;
// Hintergrund/
// Hintergrundbild erstellen var bgSrc = new Image();
bgSrc.src = "img/hintergrund.png";
// Hintergrundbildinformationen var bgParam = {
bgSrc: bgSrc,
x: 0,
y: 0,
Breite: 480,
Höhe: 852
}
// Konstruktor: Hintergrundfunktion Bg(param) {
dies.bgSrc = param.bgSrc;
dies.x = param.x;
dies.y = param.y;
dies.y1 = param.y1;
diese.Breite = Param.Breite;
diese.Höhe = Param.Höhe;
// Abwechselnde Bildkoordinaten this.y1 = -this.height;
// Zeichne das Hintergrundbild this.paint = function() {
ctx.drawImage(dieses.bgSrc, dieses.x, dieses.y, diese.Breite, diese.Höhe);
ctx.drawImage(dieses.bgSrc, dieses.x, dieses.y1, diese.Breite, diese.Höhe);
}
// Das Hintergrundbild bewegt sich abwechselnd this.sport = function() {
dies.y += 5;
dies.y1 += 5;
wenn (dieses.y >= diese.höhe) {
dies.y = -diese.höhe;
}
wenn (diese.y1 >= diese.höhe) {
dies.y1 = -diese.höhe;
}
}
}
// Hintergrundbild instanziieren var bgObj = new Bg(bgParam);
// Erstelle das Logo
var logoSrc = neues Bild();
logoSrc.src = "img/start.png";
//Logo-Informationen var logoParam = {
logoSrc: logoSrc,
x: 0,
y: 0,
Breite: 480,
Höhe: 852
}
// Konstrukteur-Logo
Funktion Logo(Param) {
dies.logoSrc = param.logoSrc;
dies.x = param.x;
dies.y = param.y;
diese.Breite = Param.Breite;
diese.Höhe = Param.Höhe;
// Zeichne das Logo
dies.paint = Funktion() {
ctx.drawImage(dieses.logoObj, dieses.x, dieses.y, diese.Breite, diese.Höhe);
}
}
// Instanziieren Sie das Logo-Objekt var logoObj = new Logo(logoParam);
// Klicken Sie auf die Leinwand, um zur nächsten Ladephase zu gelangen
canvas.onclick = Funktion() {
wenn (gameState === bereit) {
gameState = wird geladen;
}
}
// Spielladephase wird geladen
// Flugzeug im Anflug // Bild von Flugzeug im Anflug var loadImgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png', 'img/game_loading4.png']
// Ein leeres Array zum Speichern der Bilder des sich nähernden Flugzeugs var loadingImg = [];
// Schleife zum Erzeugen von Flugzeuganflugbildern und Speichern dieser im Array loadingImg for (var i = 0; i < loadImgArr.length; i++) {
loadingImg[i] = neues Bild();
wird geladenImg[i].src = loadImgArr[i];
}
// Bildinformationen zum Anflug des Flugzeugs var loadingParam = {
Bild wird geladen: Bild wird geladen,
x: 0,
Breite: 186,
Höhe: 38
}
// Konstruktor: Flugzeuganfluginformationen Funktion Loading(param) {
this.loadingImg = wird geladenImg;
diese.Breite = Param.Breite;
diese.Höhe = Param.Höhe;
dies.x = param.x;
dies.y = canvasParam.height - param.height;
// Definieren Sie den Index des zu ladenden Bildes. this.index = 0;
// Definieren Sie num, um die Anzahl der Ausführungen des Timers zu bestimmen. this.num = 0;
// Zeichne das Ladebild this.paint = function() {
ctx.drawImage(dieses.loadingImg[dieser.index], dieses.x, dieses.y, diese.breite, diese.höhe);
}
// Ändere das Ladebild this.sport = function() {
diese.num++;
wenn (diese.num % 5 == 0) {
dies.index++;
wenn (dieser.index === dieses.loadingImg.length) {
Spielstatus = läuft;
}
}
}
}
//Instanziieren Sie das zu ladende Flugzeugobjekt var loadingObj = new Loading(loadingParam);
//Unser Flugzeug///
// Bilder unserer Flugzeuge in verschiedenen Zuständen var heroImgs = [
„img/hero1.png“,
'img/hero2.png',
'img/hero1.png',
'img/hero_blowup_n1.png',
'img/hero_blowup_n2.png',
'img/hero_blowup_n3.png',
„img/hero_blowup_n4.png“
]
// Erstellen Sie ein leeres Array, um Bilder unseres Flugzeugs in verschiedenen Zuständen zu speichern. var heroRunning = [];
// Schleife, um unsere Flugzeugbilder zu erstellen und sie im Array heroRunning zu speichern for (var i = 0; i < heroImgs.length; i++) {
heroRunning[i] = neues Bild();
heroRunning[i].src = heroImgs[i];
}
// Unsere Flugzeuginformationen var heroParam = {
haroRunning: heroRunning,
Breite: 99,
Höhe: 124
}
// Unsere Flugzeugkonstrukteurfunktion Hero(param) {
dies.heroRunning = heroRunning;
dies.x = CanvasParam.width / 2 – Param.width / 2;
dies.y = CanvasParam.Höhe - Param.Höhe * 1,2;
diese.Breite = Param.Breite;
diese.Höhe = Param.Höhe;
// Unser Flugzeugbild-Index this.index = 0;
// Bestimmen, ob das Flugzeug getroffen wurde this.down = false;
//Intervallauslöser this.num = 0;
// Zeichne unser Flugzeug this.paint = function() {
ctx.drawImage(dieses.heroRunning[dieses.index], dieses.x, dieses.y, diese.breite, diese.höhe);
}
// Zeichnen Sie abwechselnd Bilder unseres Flugzeugs, wenn Sie this.sport = function() { ausführen.
wenn (!dies.nach unten) {
diese.num++;
// Jedes Mal, wenn der Timer dreimal ausgeführt wird, wechselt das Flugbild unseres Flugzeugs, if (this.num % 3 === 0) {
wenn (dieser.index === 0) {
dieser.index = 1;
} anders {
dieser.index = 0;
}
}
} anders {
// Unser Flugzeug wurde getroffen this.index++; // Bild-Array-Index + 1, zeige das Trefferbild an if (this.index === this.heroRunning.length) {
Leben--; // Lebenswert -1
wenn (Leben == 0) {
// Der Spielstatus ändert sich auf „Beendet“ gamerState = gameOver;
// Nachdem das Spiel endet, lass das Flugzeug im rauchenden Zustand. this.index = this.heroRunning.length - 1;
} anders {
// Erstelle unser neues Flugzeug heroObj = new Hero(heroParam);
}
}
}
}
// Aufzählungsintervall erstellen this.bulletTime = 0;
// Erstelle ein Aufzählungszeichen this.newBullet = function() {
dies.bulletTime++;
// Der Timer wird dreimal ausgeführt, um ein Aufzählungszeichen zu erstellen, if (this.bulletTime % 2 === 0) {
bullets.push(neue Kugel(bulletParam));
}
}
}
// Instanziieren Sie unser Flugzeug var heroObj = new Hero(heroParam);
// Binden Sie die Leinwand an das Bewegungsereignis, sodass sich unsere Ebene mit der Maus bewegt canvas.onmousemove = function(e) {
wenn (Spielstatus === läuft) {
heroObj.x = e.offsetX - heroObj.width / 2;
heroObj.y = e.offsetY - heroObj.höhe / 2;
}
}
//Kugel//
var bulletImg = neues Bild();
bulletImg.src = "img/bullet1.png";
var bulletParam = {
Aufzählungszeichen: Aufzählungszeichen,
Breite: 9,
Höhe: 21
}
// Konstruktor: Bullet Funktion Bullet(param) {
dies.bulletImg = param.bulletImg;
dies.x = heroObj.x + heroObj.width / 2 – param.width / 2;
dies.y = heroObj.y - param.höhe;
diese.Breite = Param.Breite;
diese.Höhe = Param.Höhe;
// Zeichne die Kugel this.paint = function() {
ctx.drawImage(dieses.bulletImg, dieses.x, dieses.y, diese.breite, diese.höhe);
}
// Bestimmen Sie, ob die Kugel das feindliche Flugzeug trifft. this.down = false;
// Geschossbewegungsgeschwindigkeit this.sport = function() {
dies.y -= 50;
}
}
//Magazin var bullets = [];
// Aufzählungszeichen-Funktion erstellen bulletsPaint() {
für (var i = 0; i < Aufzählungszeichen.Länge; i++) {
Aufzählungszeichen[i].paint();
}
}
// Kugeln abfeuern Funktion bulletsSport() {
für (var i = 0; i < Aufzählungszeichen.Länge; i++) {
Kugeln[i].sport();
}
}
// Die Kugel fliegt aus dem Bildschirm // Die Kugel kollidiert mit dem feindlichen Flugzeug function bulletsDelete() {
für (var i = 0; i < Aufzählungszeichen.Länge; i++) {
wenn (bullets[i].y < -this.height || bullets[i].down) {
Aufzählungszeichen.spleißen(i, 1);
}
}
}
//Feindliches Flugzeug//Kleines feindliches Flugzeugvar enemy1Arr = [
'img/enemy1.png',
'img/enemy1_down1.png',
'img/enemy1_down2.png',
'img/enemy1_down3.png',
„img/enemy1_down4.png“
];
var enemy1Img = [];
für (var i = 0; i < enemy1Arr.length; i++) {
enemy1Img[i] = neues Bild();
feind1Img[i].src = feind1Arr[i];
}
//Mittlere feindliche Flugzeuge var enemy2Arr = [
'img/enemy2.png',
'img/enemy2_down1.png',
'img/enemy2_down2.png',
'img/enemy2_down3.png',
„img/enemy2_down4.png“
];
var enemy2Img = [];
für (var i = 0; i < feind2Arr.länge; i++) {
enemy2Img[i] = neues Bild();
feind2Img[i].src = feind2Arr[i];
}
// Große feindliche Flugzeuge var enemy3Arr = [
'img/enemy3_n1.png',
'img/enemy3_n2.png',
'img/enemy3_hit.png',
'img/enemy3_down1.png',
'img/enemy3_down2.png',
'img/enemy3_down3.png',
'img/enemy3_down4.png',
'img/enemy3_down5.png',
„img/enemy3_down6.png“
];
var enemy3Img = [];
für (var i = 0; i < enemy3Arr.length; i++) {
enemy3Img[i] = neues Bild();
feind3Img[i].src = feind3Arr[i];
}
// Informationen zu kleinen feindlichen Flugzeugen var enemy1Param = {
Feindbild: Feind1Bild,
Breite: 57,
Höhe: 51,
Leben: 3,
Punktzahl: 1
}
// Informationen zu mittleren feindlichen Flugzeugen var enemy2Param = {
Feindbild: Feind2Bild,
Breite: 69,
Höhe: 95,
Leben: 10,
Punktzahl: 3
}
// Informationen zu großen feindlichen Flugzeugen var enemy3Param = {
Feindbild: Feind3Bild,
Breite: 169,
Höhe: 258,
Leben: 20,
Punktzahl: 10
}
// Konstruktor: feind Funktion Feind(param) {
dies.enemyImg = param.enemyImg;
diese.Breite = Param.Breite;
diese.Höhe = Param.Höhe;
dies.Leben = Param.Leben;
dies.score = param.score;
dies.x = Math.random() * (canvasParam.width - diese.width);
dies.y = -diese.höhe;
// Bildindex this.index = 0;
// Bestimmen Sie, ob das feindliche Flugzeug kollidiert. this.down = false;
// Ist die Explosion abgeschlossen? this.bang = false;
// Zeichne den Feind this.paint = function() {
ctx.drawImage(dieses.enemyImg[dieser.index], dieses.x, dieses.y, diese.breite, diese.höhe);
}
// Feindliches Flugzeug bewegt sich this.sport = function() {
wenn (!dies.nach unten) {
// Wenn das aktuelle feindliche Flugzeug nicht kollidiert ist, this.y += 3;
} anders {
// Die Gesundheit des Feindes nach der Kollision -1
dieses.Leben--;
// Nachdem der Gesundheitswert -1 beträgt, wird die Kollision falsch
dies.down = falsch;
// Wenn der Gesundheitswert 0 wird, wird es zu einem feindlichen Explosionsbild if (this.life <= 0) {
dies.index++;
dies.nach unten = wahr;
wenn (dieser.index === dieses.enemyImg.length) {
dieser.index = dieses.enemyImg.length - 1;
dies.bang = wahr;
}
}
}
}
// Bestimmen, ob es getroffen wurde this.hit = function(obj) {
return obj.x + obj.width >= this.x und obj.x <= this.x + this.width und
obj.y <= dieses.y + diese.höhe && obj.y + obj.höhe >= dieses.y;
}
}
// Erstellen Sie ein leeres Array zum Speichern feindlicher Flugzeuge var enemies = [];
// Erzeuge zufällig kleine, mittlere und große feindliche Flugzeuge function pushEnemy() {
var random = Math.random();
wenn (Zufall < 0,65) {
Feinde.push(neuer Feind(Feind1Param));
} sonst wenn (Zufall < 0,9) {
// Mittelgroße Flugzeuge enemies.push(new Enemy(enemy2Param));
} anders {
//Großes Flugzeug enemies.push(new Enemy(enemy3Param));
}
}
// Feindliche Objekte zeichnen und bewegen Funktion enemyPaint() {
für (var i = 0; i < Feinde.Länge; i++) {
Feinde[i].paint();
Feinde[i].sport();
}
}
//Zeichne das feindliche Flugzeug, wenn es angehalten ist Funktion enemyPaint1() {
für (var i = 0; i < Feinde.Länge; i++) {
Feinde[i].paint();
}
}
// Lösche feindliche Flugzeuge und erhöhe die Punktzahl Funktion enemyDelete() {
für (var i = 0; i < Feinde.Länge; i++) {
wenn (Feinde[i].bang) {
Punktzahl += Feinde[i].Punktzahl;
}
wenn (Feinde[i].y >= canvasParam.height || Feinde[i].bang) {
Feinde.spleißen(i, 1);
// Punktzahl += Feinde[i].score;
}
}
}
// So erkennen Sie, ob ein feindliches Flugzeug von einer Kugel oder unserem Flugzeug getroffen wurde Funktion checkHit() {
für (var i = 0; i < Feinde.Länge; i++) {
// Kugeln kollidieren mit feindlichen Flugzeugen for (var j = 0; j < bullets.length; j++) {
wenn (Feinde[i].Treffer(Kugeln[j])) {
Feinde[i].down = wahr;
Aufzählungszeichen[j].down = wahr;
}
}
// Feind und Held
wenn (Feinde[i].Treffer(Heldenobjekt)) {
Feinde[i].down = wahr;
heroObj.down = wahr;
}
}
}
// Punktefunktion scoreText() {
ctx.font = "20px fett";
ctx.fillText('Punktzahl: ' + Punktzahl, 20, 30);
ctx.fillText('Lebenswert: ' + Leben, 360, 30)
}
// Das Spiel wird angehalten, wenn die Maus herausbewegt wird canvas.onmouseout = function() {
wenn (Spielstatus === läuft) {
Spielstatus = Pause;
}
};
// Bewegen Sie die Maus, um das Spiel zu starten canvas.onmouseover = function() {
wenn (Spielstatus === Pause) {
Spielstatus = läuft;
}
};
//Spielpausen-Schnittstellenfunktion pausePanit() {
var pauseImg = neues Bild()
pauseImg.src = "img/game_pause_nor.png";
heroObj.paint();
// Aufzählungszeichen zeichnen bulletsPaint();
// Zeichne den Feind enemyPaint1();
PunktzahlText();
ctx.drawImage(pauseImg, 220, 420);
}
// Spiel vorbei Funktion gameOverText() {
ctx.font = '50px fett';
ctx.fillText('Spiel vorbei', 120, 420);
ctx.font = "30px fett";
ctx.fillText('Zum Neustart klicken', 160, 520);
}
// Klickereignis, um das Spiel neu zu starten canvas.addEventListener("click", function(e) {
wenn (Spielstatus === Spielende) {
gameState = bereit;
Ladeobjekt.num = 0;
LadeObj.index = 0;
Feinde = [];
Aufzählungszeichen = [];
Leben = 3;
Punktzahl = 0;
heroObj.down = falsch;
}
});
//Zeitintervall für die Erstellung feindlicher Flugzeuge var enemyNum = 0;
//Starte den Timer und zeichne das Bild setInterval(function() {
bgObj.paint();
bgObj.sport();
wenn (gameState === bereit) {
ctx.drawImage(logoSrc, 0, 0, 480, 852);
// logoObj.paint();
} sonst wenn (gameState === wird geladen) {
lädtObj.paint();
wird geladenObj.sport();
} sonst wenn (gameState === läuft) {
canvas.style.cursor = "keine";
heroObj.paint();
heroObj.sport();
heroObj.newBullet();
// Aufzählungszeichen zeichnen bulletsPaint();
bulletsSport();
// Aufzählungszeichen löschen bulletsDelete();
// Zeichne den Feind enemyNum++;
wenn (Feindzahl % 20 === 0) {
stoßenFeind();
}
feindseligeFarbe();
checkHit();
feindLöschen();
PunktzahlText();
wenn (Leben === 0) {
Spielstatus = Spiel vorbei;
}
} sonst wenn (Spielstatus === Pause) {
pausePanit();
} sonst wenn (gameState === gameOver) {
canvas.style.cursor = "Zeiger";
SpielOverText();
heroObj.paint();
}
}, 60)
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Installation von CUDA10.0 und Probleme in Ubuntu
>>: Tiefgreifendes Verständnis langer MySQL-Transaktionen
Artikel empfehlen
Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers
Wenn Sie Ihr MySQL-Anmeldekennwort vergessen, ist...
Navicat Premium betreibt MySQL-Datenbank (führt SQL-Anweisungen aus)
1. Einführung in Navicat 1. Was ist Navicat? Navi...
Vue kapselt die öffentliche Funktionsmethode zum Exportieren von Excel-Daten
vue+element UI kapselt eine öffentliche Funktion ...
Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung
Inhaltsverzeichnis Vorwort 1. Weniger 2. Importie...
Lassen Sie sich das Funktionsprinzip von JavaScript erklären
Inhaltsverzeichnis Browserkernel JavaScript-Engin...
HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel
In diesem Artikel werden hauptsächlich Beispiele ...
Der Unterschied zwischen Div und Tabelle in Geschwindigkeit, Laden, Webanwendung usw.
1: Unterschiede bei Geschwindigkeit und Lademethod...
MySQL-Sortierprinzipien und Fallanalyse
Vorwort Das Sortieren ist eine grundlegende Funkt...
Erstellen von Befehlszeilen-Anwendungen mit JavaScript
Inhaltsverzeichnis 1. Knoten installieren 2. Inst...
MySQL verwendet benutzerdefinierte Sequenzen zur Implementierung von row_number-Funktionen (detaillierte Schritte)
Nachdem ich einige Artikel gelesen hatte, habe ic...
Der visuelle Designpfad der Website sollte den Benutzergewohnheiten entsprechen
Cooper sprach über den visuellen Pfad des Benutze...
Vue Shuttle-Box ermöglicht Auf- und Abbewegung
In diesem Artikelbeispiel wird der spezifische Co...
Der HTML-Seitenkopfcode ist völlig klar
Alle folgenden Codes stehen zwischen <head>....
Klicken Sie auf die Schaltfläche, um den Text in ein Eingabefeld umzuwandeln. Klicken Sie auf „Speichern“, um ihn in Textimplementierungscode umzuwandeln.
Klicken Sie auf die Schaltfläche, um den Text in ...
Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen
Als Backend-Programmierer haben Sie an vielen Ste...