Rumah >hujung hadapan web >tutorial css >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:02203semak imbas
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!