Rumah > Artikel > hujung hadapan web > Daripada Konsep kepada Kod: Membina Permainan Pelari Tanpa Kesudahan yang Mudah

Daripada Konsep kepada Kod: Membina Permainan Pelari Tanpa Kesudahan yang Mudah

Patricia Arquetteasal: 2024-11-07 01:51:02127semak imbas

From Concept to Code: Building a Simple Endless Runner Game

Mencipta permainan pelari tanpa henti ialah cara yang menyeronokkan untuk menyelami pembangunan permainan. Permainan ini adalah mudah, ketagihan dan membolehkan banyak tweak kreatif. Fikirkanlah: dengan hanya beberapa mekanik mudah-berlari, melompat, mengelak-anda boleh membuat sesuatu yang membuatkan pemain terpaku pada skrin mereka.

Permainan seperti Temple Run, Flappy Bird dan Subway Surfers semuanya bermula dengan idea mudah yang sama ini, namun ia telah menghiburkan jutaan orang di seluruh dunia.

Dalam panduan ini, saya akan menunjukkan kepada anda cara membina pelari tanpa henti anda sendiri dari awal. Kami akan memastikan perkara mudah dan melaksanakan langkah-langkah penting untuk menyediakan permainan asas dan berjalan.

Langkah 1: Fahami Mekanik Teras

Sebelum menyelami kod, mari kita pecahkan perkara yang membuatkan permainan pelari tanpa penghujung berfungsi. Mekanik teras adalah mudah:

Pergerakan automatik: Watak utama bergerak ke hadapan secara automatik, jadi pemain tidak perlu mengawal gerakan ke hadapan.

Halangan: Ini muncul pada skrin dan pemain perlu bertindak balas dengan cepat untuk mengelakkannya.

Tindakan pemain: Biasanya, pemain boleh sama ada melompat, itik atau mungkin menembak untuk berinteraksi dengan halangan.

Mekanik teras ini memberi kita pelan tindakan untuk perkara yang perlu kita bina. Ideanya adalah untuk memastikan perkara semudah mungkin sambil memastikan pengalaman yang lancar.

Langkah 2: Mulakan dengan Struktur Asas

Untuk membina pelari tanpa penghujung asas, anda boleh mulakan dengan menyediakan struktur dalam HTML, CSS dan JavaScript.

Menyediakan Kanvas HTML

Pertama, buat fail HTML asas dengan elemen kanvas. Begini rupanya:

Pertama, buat fail HTML asas dengan elemen kanvas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Endless Runner</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script src="game.js"></script>
</body>
</html>

Mengkonfigurasi Kanvas dalam JavaScript

Seterusnya, kami perlu membuat gelung permainan asas dalam JavaScript untuk memastikan permainan kami berjalan. Gelung permainan ialah "nadi" permainan, mengemas kini skrin setiap bingkai.

Berikut ialah versi ringkas gelung permainan:

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Game code goes here

  requestAnimationFrame(gameLoop); // keeps the loop going
}

gameLoop();

Penjelasan: Kami menggunakan requestAnimationFrame untuk menjalankan fungsi gameLoop secara berterusan, yang akan mengemas kini permainan setiap bingkai. Fungsi ini mengosongkan skrin, dan kemudian kami akan menambahkan objek permainan kami di sini.

Langkah 3: Menambah Watak Pemain

Dalam pelari tanpa henti, watak pemain selalunya hanya mempunyai satu atau dua aksi, seperti melompat atau merunduk. Untuk panduan ini, mari kita ringkaskan dan fokus pada melompat.

Mencipta Objek Pemain Mudah

Kami akan mentakrifkan pemain sebagai objek dengan sifat seperti kedudukan, saiz dan halaju. Berikut ialah contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Endless Runner</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script src="game.js"></script>
</body>
</html>

Ini memberikan kita "pemain" segi empat sama yang boleh melompat. Harta isJumping akan membantu kami mengawal sama ada pemain boleh melompat semula atau tidak.

Melukis Pemain pada Skrin

Tambah yang berikut pada GameLoop untuk menarik pemain:

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Game code goes here

  requestAnimationFrame(gameLoop); // keeps the loop going
}

gameLoop();

Panggil drawPlayer() dalam gelung permainan:

const player = {
  x: 50,
  y: canvas.height - 60,
  width: 50,
  height: 50,
  color: "blue",
  velocityY: 0,
  isJumping: false
};

Langkah 4: Menambah Mekanik Lompat

Untuk membuat pemain melompat, kami akan mendengar input papan kekunci. Apabila pemain menekan kekunci "Ruang", watak pemain harus melompat.

Mengendalikan Tindakan Lompat

function drawPlayer() {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

Apabila Ruang ditekan, kami menetapkan halaju menegak pemain kepada nilai negatif supaya ia bergerak ke atas. Kami juga menetapkan isMelompat kepada benar, menghalang lompatan berganda.

Melaksanakan Graviti

Graviti akan menjatuhkan pemain semula selepas mereka melompat. Ini boleh dilakukan dengan menambah daya berterusan menarik pemain ke bawah setiap bingkai:

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawPlayer();
  requestAnimationFrame(gameLoop);
}

Sekarang, panggil updatePlayer() dalam gameLoop untuk membuat pemain jatuh semula selepas melompat.

Langkah 5: Mencipta Halangan

Halangan membuat pelari yang tidak berkesudahan mencabar. Ia muncul dari sebelah kanan skrin dan bergerak ke kiri. Jika pemain melanggar halangan, permainan tamat.

Menentukan Sifat Halangan

Berikut ialah cara mudah untuk menyediakan halangan:

document.addEventListener("keydown", (event) => {
  if (event.code === "Space" && !player.isJumping) {
    player.velocityY = -10;
    player.isJumping = true;
  }
});

Fungsi ini mencipta halangan baharu di tepi kanan kanvas. Kemudian kita boleh mengalihkannya ke kiri setiap bingkai.

Menggerakkan Halangan

Dalam gameLoop, tambahkan fungsi untuk bergerak dan menarik halangan:

function updatePlayer() {
  player.y += player.velocityY;
  player.velocityY += 0.5; // Gravity effect

  // Ground detection
  if (player.y > canvas.height - player.height) {
    player.y = canvas.height - player.height;
    player.velocityY = 0;
    player.isJumping = false;
  }
}

Tambah updateObstacles() dan drawObstacles() pada gameLoop.

Langkah 6: Pengesanan Perlanggaran

Sekarang, mari tambahkan pengesanan perlanggaran. Jika pemain melanggar halangan, permainan akan berhenti atau dimulakan semula.

const obstacles = [];

function createObstacle() {
  obstacles.push({
    x: canvas.width,
    y: canvas.height - 50,
    width: 20,
    height: 50,
    color: "red"
  });
}

Jalankan checkCollision() di dalam gameLoop.

Langkah 7: Menyatukan Semuanya

Berikut ialah gameLoop lengkap selepas menambah semua fungsi ini:

function updateObstacles() {
  obstacles.forEach((obstacle, index) => {
    obstacle.x -= 5; // Speed of obstacle

    // Remove obstacles that go off-screen
    if (obstacle.x + obstacle.width < 0) {
      obstacles.splice(index, 1);
    }
  });
}

function drawObstacles() {
  obstacles.forEach(obstacle => {
    ctx.fillStyle = obstacle.color;
    ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
  });
}

Akhirnya...

Permainan pelari tanpa henti mudah dibuat tetapi menawarkan banyak ruang untuk kreativiti. Anda boleh menambah halangan yang berbeza, peningkatan kuasa dan juga kemajuan tahap. Mulakan dari kecil dan semasa anda berkembang, tambahkan lebih banyak ciri untuk menjadikan permainan anda unik.

Siapa di sebalik siaran ini?

Jadi ini ialah pembangun permainan Scratch Chipm0nk, sedang mengerjakan projek untuk menjadikan dash geometri sebagai permainan pelari yang tidak berkesudahan. Jumpa anda di ruangan komen!

Atas ialah kandungan terperinci Daripada Konsep kepada Kod: Membina Permainan Pelari Tanpa Kesudahan yang Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html edge dash Object define if for while break double using finally Property function this position canvas input idea

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah saya boleh mengalih keluar Gaya CSS Sebaris daripada Div dengan jQuery?Artikel seterusnya：Bagaimanakah saya boleh mengalih keluar Gaya CSS Sebaris daripada Div dengan jQuery?

Artikel berkaitan

Lihat lagi