Maison >interface Web >tutoriel CSS >Du concept au code : créer un jeu simple Endless Runner
Du concept au code : créer un jeu simple Endless Runner
- Patricia Arquetteoriginal
- 2024-11-07 01:51:02208parcourir
Créer un jeu de course sans fin est une façon amusante de se plonger dans le développement de jeux. Ces jeux sont simples, addictifs et permettent de nombreux ajustements créatifs. Pensez-y : avec seulement quelques mécanismes simples (courir, sauter, esquiver) vous pouvez créer quelque chose qui gardera les joueurs collés à leur écran.
Des jeux comme Temple Run, Flappy Bird et Subway Surfers ont tous commencé avec cette même idée simple, et pourtant ils ont diverti des millions de personnes dans le monde.
Dans ce guide, je vais vous montrer comment créer votre propre coureur sans fin à partir de zéro. Nous garderons les choses simples et passerons en revue les étapes essentielles pour qu'un jeu de base soit opérationnel.
Étape 1 : Comprendre les mécanismes de base
Avant de plonger dans le code, décomposons ce qui fait fonctionner un jeu de coureur sans fin. Les mécanismes de base sont simples :
Mouvement automatique : le personnage principal avance automatiquement, le joueur n'a donc pas besoin de contrôler le mouvement vers l'avant.
Obstacles : ceux-ci apparaissent à l'écran et les joueurs doivent réagir rapidement pour les éviter.
Actions des joueurs : généralement, les joueurs peuvent sauter, esquiver ou peut-être tirer pour interagir avec les obstacles.
Ces mécanismes de base nous donnent un plan de ce que nous devrons construire. L'idée est de garder les choses aussi simples que possible tout en garantissant une expérience fluide.
Étape 2 : Commencez par la structure de base
Pour créer un coureur sans fin de base, vous pouvez commencer par configurer une structure en HTML, CSS et JavaScript.
Configuration du canevas HTML
Tout d'abord, créez un fichier HTML de base avec un élément canevas. Voici à quoi cela pourrait ressembler :
Tout d'abord, créez un fichier HTML de base avec un élément canvas :
<!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>
Configuration du canevas en JavaScript
Ensuite, nous devrons créer une boucle de jeu de base en JavaScript pour que notre jeu continue de fonctionner. La boucle de jeu est le "cœur" du jeu, mettant à jour l'écran à chaque image.
Voici une version simple d'une boucle de jeu :
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();
Explication : Nous utilisons requestAnimationFrame pour exécuter la fonction gameLoop en continu, qui mettra à jour le jeu à chaque image. Cette fonction efface l'écran, et plus tard nous ajouterons ici nos objets de jeu.
Étape 3 : Ajout du personnage du joueur
Dans les coureurs sans fin, le personnage du joueur n'a souvent qu'une ou deux actions, comme sauter ou esquiver. Pour ce guide, restons simples et concentrons-nous sur le saut.
Création d'un objet joueur simple
Nous définirons le joueur comme un objet avec des propriétés telles que la position, la taille et la vitesse. Voici un exemple :
<!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>
Cela nous donne un "joueur" carré qui peut sauter. La propriété isJumping nous aidera à contrôler si le joueur peut sauter à nouveau ou non.
Dessiner le joueur sur l'écran
Ajoutez ce qui suit au gameLoop pour dessiner le joueur :
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();
Appelez drawPlayer() dans la boucle du jeu :
const player = {
x: 50,
y: canvas.height - 60,
width: 50,
height: 50,
color: "blue",
velocityY: 0,
isJumping: false
};
Étape 4 : Ajout de mécanismes de saut
Pour faire sauter le joueur, nous écouterons les entrées au clavier. Lorsque le joueur appuie sur la touche "Espace", le personnage du joueur doit sauter.
Gérer l'action de saut
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
Lorsque Espace est enfoncé, nous réglons la vitesse verticale du joueur à une valeur négative afin qu'il se déplace vers le haut. Nous définissons également isJumping sur true, empêchant les doubles sauts.
Implémenter la gravité
La gravité ramènera le joueur vers le bas après son saut. Cela peut être fait en ajoutant une force constante tirant le joueur vers le bas de chaque image :
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
requestAnimationFrame(gameLoop);
}
Maintenant, appelez updatePlayer() dans le gameLoop pour faire retomber le joueur après avoir sauté.
Étape 5 : Créer des obstacles
Les obstacles rendent les coureurs sans fin difficiles. Ils apparaissent du côté droit de l’écran et se déplacent vers la gauche. Si le joueur heurte un obstacle, la partie est terminée.
Définir les propriétés des obstacles
Voici une façon simple de mettre en place des obstacles :
document.addEventListener("keydown", (event) => {
if (event.code === "Space" && !player.isJumping) {
player.velocityY = -10;
player.isJumping = true;
}
});
Cette fonction crée un nouvel obstacle sur le bord droit du canevas. Nous pouvons ensuite le déplacer vers la gauche de chaque image.
Obstacles mobiles
Dans gameLoop, ajoutez une fonction pour déplacer et dessiner des obstacles :
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;
}
}
Ajoutez updateObstacles() et drawObstacles() à gameLoop.
Étape 6 : Détection des collisions
Maintenant, ajoutons la détection de collision. Si le joueur heurte un obstacle, le jeu s'arrêtera ou redémarrera.
const obstacles = [];
function createObstacle() {
obstacles.push({
x: canvas.width,
y: canvas.height - 50,
width: 20,
height: 50,
color: "red"
});
}
Exécutez checkCollision() dans gameLoop.
Étape 7 : Rassembler le tout
Voici le gameLoop complet après avoir ajouté toutes ces fonctions :
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);
});
}
Enfin...
Les jeux Endless Runner sont simples à créer mais offrent beaucoup de place à la créativité. Vous pouvez ajouter différents obstacles, power-ups et même progression de niveau. Commencez petit et, à mesure que vous grandissez, ajoutez plus de fonctionnalités pour rendre votre jeu unique.
Qui se cache derrière ce post ?
Voici donc Chipm0nk, un développeur de jeux Scratch, qui travaille actuellement sur un projet visant à faire de Geometry Dash un jeu de course sans fin. Rendez-vous dans la zone de commentaires !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!