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
So exportieren Sie die MySQL-Tabellenstruktur nach Excel
Die Voraussetzungen sind wie folgt Exportieren Si...
So erstellen Sie eine automatisierte Bereitstellungsumgebung für Docker, Jenkins und Node.js von Grund auf
Dieser Fall basiert auf dem CentOS 7-System Geeig...
Singleton-Entwurfsmuster in JavaScript
Inhaltsverzeichnis 1. Was ist ein Entwurfsmuster?...
Analyse des Kompilierungsprozesses des Remax-Frameworks zum Schreiben kleiner Programme mit React (empfohlen)
Remax ist ein von Ant entwickeltes Open-Source-Fr...
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
Implementierungsidee zur Linksausrichtung der letzten Zeile des Flexbox-Layouts
Wenn es sich bei der Verwendung des Flex-Layouts ...
Einführung in die Verwendung von window.open, einem Sprungmenü, das in einem neuen Fenster geöffnet wird
Code kopieren Der Code lautet wie folgt: <vor&...
CSS-Klicks auf das Radio wechseln zwischen zwei Bildstilen und nur eines der mehreren Radios kann aktiviert werden
Wir implementieren einen roten Bildstil für die a...
Ist Ihre Website für IE8 geeignet?
Während der Olympischen Spiele wird IE 8 Beta 2 ve...
So konfigurieren Sie die Linux-Firewall und öffnen die Ports 80 und 3306
Port 80 ist ebenfalls konfiguriert. Geben Sie zun...
Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur
Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...
Verstehen Sie kurz die MySQL-Datenbankoptimierungsphase
Einführung Haben Sie schon einmal eine Situation ...
Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7
Da die in der MySQL-Datenbank gespeicherten Daten...
JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien
In diesem Artikel wird der spezifische Code zur V...
So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox
1. Einleitung Vagrant ist ein Tool zum Erstellen ...