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.
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.
Untuk membina pelari tanpa penghujung asas, anda boleh mulakan dengan menyediakan struktur dalam HTML, CSS dan JavaScript.
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>
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.
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.
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.
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
};
Untuk membuat pemain melompat, kami akan mendengar input papan kekunci. Apabila pemain menekan kekunci "Ruang", watak pemain harus melompat.
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.
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.
Halangan membuat pelari yang tidak berkesudahan mencabar. Ia muncul dari sebelah kanan skrin dan bergerak ke kiri. Jika pemain melanggar halangan, permainan tamat.
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.
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.
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.
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);
});
}
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
