Créer un jeu web captivant : 'Ne pas marcher sur la tuile blanche'

Introduction

Ce projet vous guide dans la création d'un jeu web simple mais captivant intitulé "Ne pas marcher sur la tuile blanche". En suivant ces étapes, vous apprendrez à combiner HTML, CSS et JavaScript pour construire un jeu interactif où les joueurs doivent éviter de marcher sur les tuiles blanches pour marquer des points. Ce projet est idéal pour les débutants souhaitant pratiquer leurs compétences en développement web.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous apprendrez :

Comment configurer une structure HTML de base pour organiser l'interface de votre jeu.
Comment utiliser CSS pour styliser le jeu, le rendant visuellement attrayant et convivial.
Comment implémenter JavaScript pour ajouter des fonctionnalités dynamiques telles que le déplacement des tuiles, les systèmes de scoring et la logique du jeu.
Comment gérer les interactions de l'utilisateur grâce à des événements tels que les clics, améliorant l'interactivité du jeu.
Comment manipuler le DOM pour mettre à jour dynamiquement l'état du jeu, comme le score et les conditions de fin de partie.
Comment appliquer des concepts de base de développement de jeux tels que les boucles de jeu, la détection de collisions et les ajustements de vitesse.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Montrer une compréhension solide de la manière dont HTML, CSS et JavaScript peuvent être combinés pour créer des applications web interactives.
Appliquer des expériences pratiques dans des concepts de développement de jeux tels que l'animation, la gestion de l'entrée utilisateur et les mises à jour en temps réel.
Manipuler le DOM et gérer des événements pour créer des applications web réactives.
Améliorer vos compétences de résolution de problèmes grâce à la mise en œuvre de la logique du jeu et la gestion de cas limites tels que les conditions de fin de partie.
Mettre en valeur votre créativité dans la conception web et l'esthétique du jeu, et explorer des personnalisations et améliorations supplémentaires.
Prendre une étape de base vers des projets de développement web et de conception de jeux plus complexes, posant les bases pour une étude et une exploration plus approfondies dans le domaine des technologies web.

Configuration de la structure HTML

Commencez par créer la structure HTML de base pour le jeu dans index.html. Cela inclut le titre du jeu, l'affichage du score, la zone principale du jeu (#main) et le bouton de démarrage. La zone principale du jeu contiendra les rangées de tuiles en mouvement.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ne pas marcher sur la tuile blanche</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h2>Score</h2>
    <h2 id="score">0</h2>
    <div id="main">
      <div id="con"></div>
    </div>
    <div class="btn">
      <button class="start" onclick="start()">Démarrer le jeu</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Dans cette étape, vous avez établi la structure HTML de base pour le jeu. La structure inclut un titre pour le jeu, un affichage pour le score, une zone principale du jeu identifiée par #main pour les tuiles en mouvement et un bouton de démarrage pour commencer le jeu. La zone #main sera plus tard peuplée de rangées de tuiles avec lesquelles les joueurs interagiront pendant le jeu. Cette configuration est cruciale car elle dispose le squelette du jeu, sur lequel CSS et JavaScript ajouteront du style et des fonctionnalités.

Création des styles CSS

Définissez les styles CSS pour structurer visuellement le jeu dans index.css. Cette étape consiste à styliser le conteneur principal du jeu, les tuiles individuelles (cellules) et le bouton de démarrage pour rendre le jeu visuellement attrayant.

#main {
  width: 408px;
  height: 408px;
  background: white;
  border: 2px solid gray;
  margin: 0 auto;
  overflow: hidden;
}

h2 {
  text-align: center;
}

#con {
  width: 100%;
  height: 400px;
  position: relative;
  top: -408px;
  border-collapse: collapse;
}

.row {
  height: 100px;
  width: 100%;
}

.cell {
  height: 100px;
  width: 100px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
}

.black {
  background: black;
}

.btn {
  width: 100%;
  text-align: center;
}

.start {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: yellowgreen;
  line-height: 50px;
  color: #fff;
}

Vous avez défini les styles CSS qui déterminent les aspects visuels du jeu. Les styles incluent la disposition de la zone principale du jeu, l'apparence des tuiles (ou cellules) et le style du bouton de démarrage. En définissant ces styles, vous avez rendu le jeu visuellement attrayant et défini les éléments d'interface utilisateur avec lesquels les joueurs vont interagir, tels que le plateau de jeu et le bouton de démarrage. Ces styles sont essentiels pour rendre le jeu captivant et accessible aux joueurs.

Initialisation du jeu

Dans cette étape, vous allez commencer à écrire le JavaScript nécessaire pour animer votre jeu dans index.js. Commencez par créer les fonctions start et init pour initialiser le jeu et créer dynamiquement l'ensemble initial de rangées pour la zone de jeu.

// Fonction d'aide pour obtenir un élément par son ID
function $(id) {
  return document.getElementById(id);
}

// Fonction pour créer un div avec un nom de classe donné
function createDiv(className) {
  var div = document.createElement("div");
  div.className = className;
  return div;
}

var gameStarted = false;

// Fonction pour démarrer le jeu
function start() {
  if (!gameStarted) {
    init();
  } else {
    alert("Le jeu a déjà commencé, pas besoin de cliquer à nouveau!");
  }
}

// Initialiser le jeu
function init() {
  gameStarted = true;
  for (var i = 0; i < 4; i++) {
    createRow();
  }
}

À ce stade, vous avez commencé à animer le jeu avec JavaScript. Le code que vous avez écrit initialise le jeu et met en place les mécanismes pour créer les rangées initiales de tuiles. Cela inclut la définition de fonctions d'aide pour la manipulation du DOM, la définition d'un drapeau pour empêcher de démarrer le jeu plusieurs fois et le lancement des bases pour ajouter dynamiquement des rangées à la zone de jeu. Cette étape est cruciale car elle configure les éléments dynamiques du jeu, en préparation pour la partie interactive du jeu où les tuiles se déplacent et où les joueurs peuvent commencer à interagir avec le jeu.

Gérer le mouvement des rangées et vérifier la fin du jeu

Étendez la fonctionnalité JavaScript pour inclure le déplacement des rangées vers le bas et la vérification si le jeu est terminé. Cela implique la création d'une boucle de jeu qui met à jour la position des rangées et vérifie si une rangée a dépassé la limite autorisée sans être "enfoncée".

// Continuer dans index.js

var speed = 6; // Vitesse initiale des rangées en mouvement
var clock = null;

// Faire descendre les rangées
function move() {
  var con = $("con");
  var top = parseInt(window.getComputedStyle(con, null)["top"]);
  if (speed + top > 0) {
    top = 0;
  } else {
    top += speed;
  }
  con.style.top = top + "px";
  checkGameOver();
  if (top == 0) {
    createRow();
    con.style.top = "-102px";
    deleteRow();
  }
}

// Vérifier si le jeu est terminé
function checkGameOver() {
  var con = $("con");
  var rows = con.childNodes;
  var conTop = parseInt(window.getComputedStyle(con, null)["top"]);
  var conHeight = con.offsetHeight;
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var rowTop = conTop + i * row.offsetHeight;
    if (rowTop >= conHeight && row.passed !== 1) {
      fail();
      break;
    }
  }
}

Ici, vous avez étendu la fonctionnalité du jeu en ajoutant la logique pour déplacer les rangées vers le bas et vérifier les conditions de fin de jeu. La fonction move met à jour la position des rangées, simulant le mouvement des tuiles que les joueurs doivent éviter de marcher dessus. La fonction checkGameOver surveille si une rangée a dépassé le bas de la zone de jeu sans être "enfoncée", ce qui signifierait la fin du jeu. Cette étape introduit le mécanisme principal de jeu et le défi, rendant le jeu interactif et captivant.

Implémentation de la notation et de l'augmentation de la vitesse

Dans cette étape, concentrez-vous sur la mise en œuvre du mécanisme de calcul du score du jeu et sur l'augmentation de la vitesse des rangées au fur et à mesure que le score du joueur augmente. Cela ajoute un niveau de difficulté au jeu, le rendant captivant.

// Continuer dans index.js

// Mettre à jour le score
function score() {
  var newScore = parseInt($("score").innerHTML) + 1;
  $("score").innerHTML = newScore;
  if (newScore % 10 == 0) {
    speedUp();
  }
}

// Augmenter la vitesse des rangées en mouvement
function speedUp() {
  speed += 2;
  if (speed == 20) {
    alert("Vitesse incroyable!");
  }
}

Dans cette étape, vous avez mis en œuvre le système de calcul du score du jeu et ajouté une fonctionnalité pour augmenter la vitesse des rangées en mouvement au fur et à mesure que le score du joueur augmente. Cela fournit non seulement des réponses au joueur sur ses performances, mais augmente également progressivement la difficulté du jeu. Le mécanisme de calcul du score récompense les joueurs pour avoir évité avec succès les tuiles blanches, et l'augmentation de la vitesse met à l'épreuve les réactions du joueur, rendant le jeu plus captivant et compétitif.

Gérer les interactions de l'utilisateur

Mettez en œuvre la logique pour gérer les clics de l'utilisateur sur les tuiles. Les joueurs devraient gagner des points en cliquant sur les tuiles noires et perdre en cliquant sur les tuiles blanches.

// Continuer dans index.js

// Juger l'action du joueur
function judge(ev) {
  ev = ev || event;
  if (ev.target.className.indexOf("black") !== -1) {
    ev.target.className = "cell";
    ev.target.parentNode.passed = 1;
    score();
  } else if (ev.target.className.indexOf("cell") !== -1) {
    fail();
  }
}

Dans cette étape, vous avez mis en œuvre la fonction judge pour gérer les clics de l'utilisateur dans le jeu. Lorsqu'un joueur clique sur une tuile, la fonction détermine si la tuile est noire ou non. Si la tuile est noire (coup correct), elle devient une cellule normale et le score est mis à jour. Si la tuile n'est pas noire (coup incorrect), elle déclenche la séquence de fin de jeu. Cette fonction est cruciale pour l'interactivité du jeu, permettant aux joueurs d'interagir avec le jeu en cliquant sur les tuiles et de recevoir immédiatement des réponses sur leurs actions.

Création et suppression de rangées

Développez des fonctions pour créer dynamiquement de nouvelles rangées de tuiles et supprimer la rangée la plus ancienne lorsqu'elle n'est plus visible pour maintenir le bon déroulement du jeu.

// Continuer dans index.js

// Affecter aléatoirement la cellule noire dans une rangée
function createCell() {
  var temp = ["cell", "cell", "cell", "cell"];
  var i = Math.floor(Math.random() * 4);
  temp[i] = "cell black";
  return temp;
}

// Créer une nouvelle rangée de tuiles
function createRow() {
  var con = $("con");
  var row = createDiv("row");
  var arr = createCell();
  for (var i = 0; i < 4; i++) {
    row.appendChild(createDiv(arr[i]));
  }
  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// Supprimer la dernière rangée s'il y a plus de 5 rangées
function deleteRow() {
  var con = $("con");
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

Vous avez ajouté la fonction createRow pour générer dynamiquement des rangées de tuiles avec une tuile noire dans une position aléatoire, améliorant l'imprévisibilité et le défi du jeu. La fonction deleteRow supprime la rangée la plus ancienne qui n'est plus visible, optimisant les performances du jeu et s'assurant que la zone de jeu ne déborde pas d'éléments inutilisés. Ces fonctions travaillent ensemble pour maintenir un flux continu de tuiles avec lesquelles les joueurs peuvent interagir.

Implémentation de la logique de fin de partie

Définissez les conditions dans lesquelles le jeu prendra fin, telles que le clic sur une tuile blanche ou la non-découverte d'une tuile noire. Affichez le score final du joueur et offrez une option pour redémarrer le jeu.

// Continuer dans index.js

// Finir le jeu
function fail() {
  clearInterval(clock);
  gameStarted = false;
  confirm("Votre score final est " + parseInt($("score").innerHTML));
  window.location.reload();
}

En définissant la fonction fail, vous avez établi les conditions dans lesquelles le jeu prend fin. Cette fonction est appelée lorsque le joueur effectue un coup incorrect ou manque une tuile noire. Elle arrête la boucle de jeu, affiche le score final du joueur et recharge la page pour un nouveau départ. Cette étape est cruciale pour offrir une expérience de jeu complète, y compris le défi d'éviter les erreurs et la fin du jeu.

Démarrer la boucle de jeu

Configurez la boucle principale du jeu qui fait descendre les tuiles vers le bas de l'écran. Ajustez la vitesse de déplacement en fonction du score du joueur pour augmenter la difficulté.

// Continuer dans index.js

// Démarrer la boucle de jeu
function start() {
  if (!gameStarted) {
    init();
    clock = setInterval("move()", 30);
  }
}

Vous avez configuré la boucle principale du jeu avec la fonction move, qui fait descendre continuellement les rangées vers le bas de l'écran, simulant le déroulement du jeu. La vitesse de déplacement augmente à mesure que le score du joueur augmente, augmentant ainsi la difficulté du jeu. Cette boucle est le cœur du jeu, entraînant la progression du jeu et mettant le joueur au défi de suivre le rythme croissant.

Ajout d'un écouteur d'événements

Attachez un écouteur d'événements à la zone de jeu pour détecter et répondre aux actions du joueur, telles que le clic sur les tuiles.

// Continuer dans index.js

// Ajouter un écouteur d'événements pour le conteneur principal du jeu
$("main").onclick = function (ev) {
  judge(ev);
};

Dans cette étape, vous avez attaché un écouteur d'événements à la zone principale de jeu, lui permettant de répondre aux clics du joueur. Cette fonctionnalité est essentielle pour capturer les interactions de l'utilisateur, permettant au jeu de traiter les coups du joueur et de mettre à jour l'état du jeu en conséquence. C'est ce qui rend le jeu interactif et réactif aux actions du joueur.

Pour voir les effets suivants, cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE, et basculez vers l'onglet "Web 8080".

Résumé

En terminant ce projet, vous avez créé un jeu web fonctionnel intitulé "Ne pas marcher sur la tuile blanche". Ce projet ne vous permet pas seulement d'améliorer votre compréhension de la manière dont HTML, CSS et JavaScript travaillent ensemble pour créer un contenu web interactif, mais il vous fournit également une base pour créer des jeux web plus complexes à l'avenir. Experimentez avec différents styles, fonctionnalités et caractéristiques pour rendre le jeu unique à vous. Bonne programmation!