Abschluss

Zurück

Dies ist der 10. und letzte Schritt des Gamedev Canvas Tutorials. Sie können den Quellcode, wie er nach Abschluss dieser Lektion aussehen soll, unter Gamedev-Canvas-workshop/lesson10.html finden.

Es gibt immer Raum für Verbesserungen in jedem Spiel, das wir schreiben. Zum Beispiel könnten wir dem Spieler mehr als ein Leben anbieten. Sie könnten ein oder zwei Fehler machen und dennoch das Spiel beenden. Wir könnten auch unsere Code-Darstellung verbessern.

Dem Spieler Leben geben

Das Implementieren von Leben ist ziemlich einfach. Lassen Sie uns zunächst eine Variable hinzufügen, um die Anzahl der Leben zu speichern, und zwar an derselben Stelle, an der wir unsere anderen Variablen deklariert haben:

let lives = 3;

Das Zeichnen des Lebenszählers sieht nahezu identisch aus wie das Zeichnen des Punktestandes — fügen Sie die folgende Funktion in Ihren Code ein, unterhalb der drawScore()-Funktion:

function drawLives() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "#0095DD";
  ctx.fillText(`Lives: ${lives}`, canvas.width - 65, 20);
}

Anstatt das Spiel sofort zu beenden, werden wir die Anzahl der Leben verringern, bis keine mehr verfügbar sind. Wir können auch die Position des Balls und des Schlägers zurücksetzen, wenn der Spieler mit seinem nächsten Leben beginnt. Ersetzen Sie in der draw()-Funktion die folgenden drei Zeilen:

alert("GAME OVER");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game

Damit können wir eine etwas komplexere Logik hinzufügen, wie unten angegeben:

lives--;
if (!lives) {
  alert("GAME OVER");
  document.location.reload();
  clearInterval(interval); // Needed for Chrome to end game
} else {
  x = canvas.width / 2;
  y = canvas.height - 30;
  dx = 2;
  dy = -2;
  paddleX = (canvas.width - paddleWidth) / 2;
}

Nun, wenn der Ball den unteren Rand des Bildschirms trifft, ziehen wir ein Leben von der lives-Variable ab. Wenn keine Leben mehr übrig sind, ist das Spiel verloren; wenn noch Leben übrig sind, werden die Position des Balls und des Schlägers zusammen mit der Bewegung des Balls zurückgesetzt.

Darstellung des Lebenszählers

Nun müssen Sie einen Aufruf von drawLives() innerhalb der draw()-Funktion hinzufügen und ihn unterhalb des drawScore()-Aufrufs platzieren.

drawLives();

Verbesserung der Darstellung mit requestAnimationFrame()

Arbeiten wir nun an etwas, das nicht mit den Spielmechaniken verbunden ist, sondern mit der Art und Weise, wie es dargestellt wird. requestAnimationFrame() hilft dem Browser, das Spiel besser zu rendern als die feste Bildrate, die wir derzeit mit setInterval() implementiert haben. Ersetzen Sie die folgende Zeile:

interval = setInterval(draw, 10);

durch:

draw();

und entfernen Sie jede Instanz von:

clearInterval(interval); // Needed for Chrome to end game

Fügen Sie dann ganz unten in der draw()-Funktion (direkt vor der schließenden geschweiften Klammer) folgende Zeile hinzu, die bewirkt, dass die draw()-Funktion sich immer wieder selbst aufruft:

requestAnimationFrame(draw);

Die draw()-Funktion wird nun innerhalb einer requestAnimationFrame()-Schleife immer wieder ausgeführt, aber anstatt der festen 10 Millisekunden Bildrate geben wir die Kontrolle der Bildrate zurück an den Browser. Er wird die Bildrate entsprechend synchronisieren und die Formen nur rendern, wenn es nötig ist. Dies erzeugt eine effizientere, flüssigere Animationsschleife als die ältere setInterval()-Methode.

Vergleichen Sie Ihren Code

Das war alles – die endgültige Version des Spiels ist bereit und kann losgehen!

<canvas id="myCanvas" width="480" height="320"></canvas>
<button id="runButton">Start game</button>

canvas {
  background: #eeeeee;
}
button {
  display: block;
}

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const ballRadius = 10;

let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;

const paddleHeight = 10;
const paddleWidth = 75;

let paddleX = (canvas.width - paddleWidth) / 2;
let rightPressed = false;
let leftPressed = false;

const brickRowCount = 5;
const brickColumnCount = 3;
const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
const brickOffsetTop = 30;
const brickOffsetLeft = 30;

let score = 0;
let lives = 3;

let bricks = [];

for (let c = 0; c < brickColumnCount; c++) {
  bricks[c] = [];
  for (let r = 0; r < brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0, status: 1 };
  }
}

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

function keyDownHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = true;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = false;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = false;
  }
}

function mouseMoveHandler(e) {
  let relativeX = e.clientX - canvas.offsetLeft;
  if (relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth / 2;
  }
}
function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      let b = bricks[c][r];
      if (b.status === 1) {
        if (
          x > b.x &&
          x < b.x + brickWidth &&
          y > b.y &&
          y < b.y + brickHeight
        ) {
          dy = -dy;
          b.status = 0;
          score++;
          if (score === brickRowCount * brickColumnCount) {
            alert("YOU WIN, CONGRATS!");
            document.location.reload();
          }
        }
      }
    }
  }
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}
function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}
function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      if (bricks[c][r].status === 1) {
        const brickX = r * (brickWidth + brickPadding) + brickOffsetLeft;
        const brickY = c * (brickHeight + brickPadding) + brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}
function drawScore() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "#0095DD";
  ctx.fillText(`Score: ${score}`, 8, 20);
}
function drawLives() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "#0095DD";
  ctx.fillText(`Lives: ${lives}`, canvas.width - 65, 20);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBricks();
  drawBall();
  drawPaddle();
  drawScore();
  drawLives();
  collisionDetection();

  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
    dx = -dx;
  }
  if (y + dy < ballRadius) {
    dy = -dy;
  } else if (y + dy > canvas.height - ballRadius) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      dy = -dy;
    } else {
      lives--;
      if (!lives) {
        alert("GAME OVER");
        document.location.reload();
      } else {
        x = canvas.width / 2;
        y = canvas.height - 30;
        dx = 3;
        dy = -3;
        paddleX = (canvas.width - paddleWidth) / 2;
      }
    }
  }

  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 7;
  } else if (leftPressed && paddleX > 0) {
    paddleX -= 7;
  }

  x += dx;
  y += dy;
  requestAnimationFrame(draw);
}

const runButton = document.getElementById("runButton");
runButton.addEventListener("click", () => {
  draw();
  runButton.disabled = true;
});

Hinweis: Versuchen Sie, die Anzahl der Leben und den Winkel, in dem der Ball vom Schläger abprallt, zu ändern.

Spiel vorbei – vorerst!

Sie haben alle Lektionen abgeschlossen - herzlichen Glückwunsch! An diesem Punkt sollten Sie nun die Grundlagen der Canvas-Manipulation und der Logik hinter 2D-Spielen kennen. Jetzt ist ein guter Zeitpunkt, einige Frameworks zu erlernen und die Spieleentwicklung fortzusetzen. Sie können das Gegenstück dieser Serie, 2D Breakout-Spiel mit Phaser oder das Cyber Orb in Phaser erstellt Tutorial ausprobieren. Sie können auch den Spielebereich auf MDN durchstöbern, um Inspiration und mehr Wissen zu erhalten.

Sie könnten auch zur Indexseite dieser Tutorialserie zurückkehren. Viel Spaß beim Programmieren!

Zurück

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden