Du concept au code : créer un jeu simple Endless Runner-tutoriel CSS-php.cn

From Concept to Code: Building a Simple Endless Runner Game

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>

Copier après la connexion

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();

Copier après la connexion

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>

Copier après la connexion

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();

Copier après la connexion

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
};

Copier après la connexion

É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);
}

Copier après la connexion

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);
}

Copier après la connexion

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;
  }
});

Copier après la connexion

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;
  }
}

Copier après la connexion

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"
  });
}

Copier après la connexion

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);
  });
}

Copier après la connexion

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!