Wie schreibe ich Minispiele in Javascript?-Front-End-Fragen und Antworten-php.cn

JavaScript ist heutzutage zu einer unverzichtbaren Fähigkeit in der Front-End-Entwicklung geworden. Es kann nicht nur interaktive Effekte für Webseiten entwickeln, sondern auch einfache Minispiele implementieren. In diesem Artikel erfahren Sie, wie Sie Minispiele in JavaScript schreiben.

1. Vorbereitung

Erstellen Sie einen neuen Ordner auf Ihrem lokalen Computer und geben Sie ihm einen passenden Namen. Erstellen Sie eine neue HTML-Datei im Ordner und fügen Sie am Kopf der Datei den folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Game</title>
</head>
<body>
    
</body>
<script src="main.js"></script>
</html>

Nach dem Login kopieren

Die main.js hier ist die zu schreibende JavaScript-Skriptdatei, und die hier referenzierte Datei ist die Datei, die erstellt wurde. Erstellen Sie die Datei main.js und legen Sie sie im selben Ordner wie die HTML-Datei ab. An diesem Punkt können wir mit dem Schreiben von JavaScript-Code beginnen. main.js就是将要编写的JavaScript脚本文件，这里引用的是已创建完成的文件。创建main.js文件，和HTML文件放在同一个文件夹下，此时我们就可以开始编写JavaScript代码了。

二、编写游戏

创建画布

首先，在 HTML 文件中创建一个canvas元素，用来渲染游戏画面。

<body>
    <canvas id="myCanvas"></canvas>
</body>

Nach dem Login kopieren

在 JavaScript 文件中，获取该元素的上下文（context），并将其保存在变量中。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Nach dem Login kopieren

现在，我们已经可以在canvas画布上绘制图形了。

绘制游戏背景和其他物体

接下来，我们需要绘制游戏的背景和其他物体。在这里，我们可以分别定义不同的函数来绘制不同的物体，比如背景、球和挡板等。在这里，我们先定义一个函数，来绘制游戏的背景。

function drawBackground() {
    ctx.fillStyle = "#3c3c3c";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

Nach dem Login kopieren

在这个函数里，我们首先定义了一个颜色值用来填充画布背景，然后使用fillRect()方法来填充整个画布。

动态更新游戏

现在，我们已经拥有了用来绘制画布上各种物体的函数，该开始让游戏开始“动起来”了。

在这里，我们可以使用函数的递归调用方式来实现不断刷新游戏画面。这里我们定义一个函数update()，然后用window.requestAnimationFrame()来调用它，开始刷新游戏。

function update() {
    drawBackground();

    requestAnimationFrame(update);
}

update(); // 调用 update() 函数以开始刷新游戏

Nach dem Login kopieren

在这个函数里，我们首先调用了drawBackground()函数来绘制游戏的背景。然后，我们使用requestAnimationFrame()函数调用了update()函数本身，来实现不断重复更新游戏画面的效果。

控制球移动方向

现在，我们已经可以在画布上绘制物体了，接下来我们需要加入控制球移动方向的操作。首先，我们定义一个小球保存用来记录它的位置信息，和方向信息。

var ball = {
    x: canvas.width/2,
    y: canvas.height-30,
    dx: 2,
    dy: -2,
    radius: 10
};

Nach dem Login kopieren

在这个对象中，我们定义了球的起始位置（即画布的中心位置），dx和dy表示球的初始移动方向，radius为球的半径。

在update()函数中，我们可以添加对球移动、碰撞检测等操作的代码。

function update() {
    drawBackground();

    // 移动球
    ball.x += ball.dx;
    ball.y += ball.dy;

    // 碰撞检测
    if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
    }
    if(ball.y + ball.dy > canvas.height-ball.radius || ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
    }

    requestAnimationFrame(update);
}

update();

Nach dem Login kopieren

在这个函数中，我们首先计算了球的移动，然后通过碰撞检测来检测球是否触碰了画布边缘。若是，则将球的运动方向反转，然后继续移动。

控制挡板移动

现在我们已经控制好了球的方向和行动，接下来需要加入控制挡板移动的操作。

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

var rightPressed = false;
var leftPressed = false;

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

function update() {
    drawBackground();
    drawPaddle();

    // 移动球
    ball.x += ball.dx;
    ball.y += ball.dy;

    // 控制挡板移动
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }

    // 碰撞检测
    if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
    }
    if(ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
    }
    else if(ball.y + ball.dy > canvas.height-ball.radius) {
        if(ball.x > paddleX && ball.x < paddleX + paddleWidth) {
            ball.dy = -ball.dy;
        }
        else {
            alert("游戏结束");
            document.location.reload();
            clearInterval(interval);
        }
    }

    requestAnimationFrame(update);
}

update();

Nach dem Login kopieren

在这里，我们首先定义了一个挡板的位置，和其长度、高度。然后我们通过drawPaddle()函数来绘制挡板，接下来监听keydown和keyup

2. Schreiben Sie das Spiel

Erstellen Sie eine Leinwand

Erstellen Sie zunächst ein canvas-Element in der HTML-Datei, um den Spielbildschirm darzustellen.

rrreee

Erhalten Sie in der JavaScript-Datei den Kontext des Elements und speichern Sie ihn in einer Variablen.

rrreee

Jetzt können wir Grafiken auf der Leinwand canvas zeichnen.

Zeichnen Sie den Spielhintergrund und andere Objekte

Als nächstes müssen wir den Spielhintergrund und andere Objekte zeichnen. Hier können wir verschiedene Funktionen definieren, um verschiedene Objekte wie Hintergründe, Bälle und Leitbleche zu zeichnen. Hier definieren wir zunächst eine Funktion zum Zeichnen des Hintergrunds des Spiels.

rrreee

In dieser Funktion definieren wir zunächst einen Farbwert, um den Leinwandhintergrund zu füllen, und verwenden dann die Methode fillRect(), um die gesamte Leinwand zu füllen. 🎜

Aktualisieren Sie das Spiel dynamisch

🎜Da wir nun über die Funktionen zum Zeichnen verschiedener Objekte auf der Leinwand verfügen, ist es an der Zeit, das Spiel in Bewegung zu setzen. 🎜🎜Hier können wir die rekursive Aufrufmethode der Funktion verwenden, um den Spielbildschirm kontinuierlich zu aktualisieren. Hier definieren wir eine Funktion update() und rufen sie dann mit window.requestAnimationFrame() auf, um mit der Aktualisierung des Spiels zu beginnen. 🎜rrreee🎜In dieser Funktion rufen wir zunächst die Funktion drawBackground() auf, um den Hintergrund des Spiels zu zeichnen. Dann verwenden wir die Funktion requestAnimationFrame(), um die Funktion update() selbst aufzurufen, um den Effekt einer wiederholten Aktualisierung des Spielbildschirms zu erzielen. 🎜

Steuern Sie die Bewegungsrichtung des Balls

🎜Da wir nun Objekte auf der Leinwand zeichnen können, müssen wir Operationen hinzufügen, um die Bewegungsrichtung des Balls zu steuern Ball. Zuerst definieren wir einen kleinen Ball zum Speichern, um dessen Positions- und Richtungsinformationen aufzuzeichnen. 🎜rrreee🎜In diesem Objekt definieren wir die Startposition des Balls (d. h. die Mittelposition der Leinwand), dx und dy stellen die anfängliche Bewegungsrichtung des Balls dar und radius ist der Radius des Balls. 🎜🎜In der Funktion update() können wir Code für Ballbewegung, Kollisionserkennung und andere Vorgänge hinzufügen. 🎜rrreee🎜In dieser Funktion berechnen wir zunächst die Bewegung des Balls und verwenden dann die Kollisionserkennung, um zu erkennen, ob der Ball den Rand der Leinwand berührt. Wenn ja, kehren Sie die Bewegungsrichtung des Balls um und bewegen Sie sich weiter. 🎜

Steuern Sie die Bewegung der Schallwand

🎜Da wir nun die Richtung und Bewegung des Balls gesteuert haben, müssen wir den Vorgang zur Steuerung der Bewegung hinzufügen der Schallwand. 🎜rrreee🎜Hier definieren wir zunächst die Position einer Schallwand, ihre Länge und Höhe. Dann zeichnen wir die Blende mit der Funktion drawPaddle() und hören dann auf die Ereignisse keydown und keyup, um zu erkennen, ob der Benutzer die entsprechende Taste drückt Bewegen Sie die Lünette. 🎜🎜Gleichzeitig müssen Sie in dieser Funktion auch Code hinzufügen, um die Kollision zwischen dem Ball und der Schallwand zu erkennen. Wenn der Ball die Schallwand berührt, wird die Y-Richtung des Balls direkt umgekehrt. Standardmäßig bewegt sich der Ball weiter und kann nicht anhalten. Das Spiel endet, wenn der Ball die Unterseite der Leinwand vollständig berührt. 🎜🎜3. Zusammenfassung🎜🎜Bisher haben wir das Schreiben eines kleinen JavaScript-Spiels abgeschlossen. Dies ist ein einfaches Beispiel für ein kleines Spiel. Wir haben gerade ein einfaches Spiel mit HTML5-Canvas und JavaScript-Skript fertiggestellt. 🎜🎜Natürlich sind diese Codes in diesem Artikel nur Beispiele und können als Grundlage für das Schreiben von Spielen verwendet werden. Wenn wir umfangreiche Spiele mit komplexerem Gameplay schreiben möchten, müssen wir uns tiefergehende JavaScript-Grundlagen und Spieleentwicklungsfähigkeiten aneignen. 🎜🎜Wenn Sie mit diesem Bereich noch nicht in Berührung gekommen sind, dann versuchen Sie, der Einleitung in diesem Artikel zu folgen und selbst ein kleines Spiel zu schreiben! 🎜

Das obige ist der detaillierte Inhalt vonWie schreibe ich Minispiele in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!