3 Minuten, um ein Spiel mit JavaScript zu erstellen

Apr 02 2023

Sie können den vollständigen Code hier sehen https://github.com/phocaplaptrinh/simple-chrome-dinosaur-game Um Grafiken auf einer Webseite zu zeichnen, stellt HTML zunächst ein Tag namens <canvas> bereit.

Den vollständigen Code können Sie hier einsehenhttps://github.com/phocaplaptrinh/simple-chrome-dinosaur-game

Erstens stellt HTML zum Zeichnen von Grafiken auf einer Webseite ein Tag namens <canvas> bereit. Daher werde ich die two.js-Bibliothek verwenden, die mir hilft, die Leinwand einfacher und schneller zu manipulieren.

two.js-Bibliothek

Ich werde diese Bibliothek in meine index.html-Datei einbetten. Ich erstelle auch eine game.js-Datei, in die ich meinen gesamten Code schreibe und ihn dann in die Webseite einbette.

<!DOCTYPE html>
<html>
<head>
    <title>Dinosaur Game</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.8.10/two.min.js"></script>
    <script src="game.js"></script>
</body>
</html>

let screen = new Two({
    width: 500,
    height: 300,
    type: Two.Types.canvas
});
screen.appendTo(document.body);

Oh, fast hätte ich vergessen zu erwähnen, dass ich ein Minispiel mit einem springenden Dinosaurier erstellen werde, ähnlich dem, das in Google Chrome angezeigt wird, wenn keine Internetverbindung besteht .

Als Nächstes zeichne ich einen Dinosaurier auf meinen Spielbildschirm . Ich habe ein Bild eines Dinosauriers mit einer Größe von 140 x 140 Pixel vorbereitet.

Dinosaurier

Und ich werde den Dinosaurier an der Position mit der x-Koordinate von 50 und der y-Koordinate von 200 platzieren.

let dinosaur = screen.makeSprite('dinosaur.png', 50, 200);

Um das Spiel zu spielen, müssen wir die Play-Taste drücken, richtig?

screen.play();

Ich werde seine Größe um die Hälfte reduzieren.

dinosaur.scale = 0.5;

Als Nächstes zeichne ich den Boden, damit der Dinosaurier darauf steht, anstatt in der Luft zu schweben. Ich zeichne eine gerade Linie mit dem Startpunkt bei (0, 235) und dem Endpunkt bei (500, 235).

let ground = screen.makeLine(0, 235, 500, 235);

Jetzt zeichne ich den Feind des Dinosauriers, einen Kaktus . Ich habe auch ein Bild von einem Kaktus mit einer Größe von 60 x 140 Pixel.

Kaktus

Und ich zeichne es genauso wie den Dinosaurier.

let cactus = screen.makeSprite('cactus.png', 400, 200);
cactus.scale = 0.5;

Als nächstes muss ich den Kaktus nach links bewegen. Ich werde eine Update- Funktion erstellen und diese kontinuierlich aufrufen.

function update() {

}

screen.bind('update', update);

function update() {
    cactus.position.x -= 5;
}

Deshalb möchte ich sicherstellen, dass ein neuer Kaktus erscheint, wenn ein Kaktus verschwindet. Also werde ich überprüfen, ob die x-Koordinate des Kaktus kleiner als 0 ist, was bedeutet, dass er aus dem Bildschirm verschwindet, ich werde die x-Koordinate des Kaktus auf seine Ausgangsposition zurücksetzen.

function update() {
    cactus.position.x -= 5;

    if (cactus.position.x < 0) {
        cactus.position.x = 400;
    }
}

Es sieht jedoch komisch aus, wenn der Kaktus in der Mitte des Bildschirms erscheint. Daher werde ich seine Anfangsposition außerhalb des Bildschirms platzieren, beispielsweise bei 600.

Wir können das Spiel immer noch nicht spielen. Jetzt muss ich den Dinosaurier zum Springen bringen, wenn ich die Leertaste drücke. Ich werde das Ereignis des Drückens einer Taste erfassen, und wenn die gedrückte Taste die Leertaste ist, lasse ich den Dinosaurier etwa 150 Pixel springen.

document.addEventListener('keypress', function(e) {
    if (e.key == ' ') {
        dinosaur.position.y -= 150;
    }
})

Also lasse ich den Dinosaurier herunterfallen, indem ich seinen y-Koordinatenwert kontinuierlich erhöhe.

dinosaur.position.y += 3;

Ich werde also eine Bedingung festlegen, dass der Dinosaurier nur fällt, wenn seine y-Koordinate niedriger als die Anfangskoordinate von 200 ist.

if (dinosaur.position.y <= 200) {
    dinosaur.position.y += 3;
}

if (e.key == ' ' && dinosaur.position.y >= 200) {
    dinosaur.position.y -= 150;
}

Der letzte Schritt besteht darin, eine Bedingung zu schreiben, um zu überprüfen, ob das Spiel stoppt, wenn der Dinosaurier den Kaktus berührt. Sie können darüber nachdenken, warum ich es so geschrieben habe.