Créer un jeu de déplacement de blocs web amusant | HTML, CSS, JavaScript

Introduction

Dans ce projet, nous allons construire un jeu amusant et simple de déplacement de blocs où le joueur doit cliquer sur les blocs noirs pour marquer des points et éviter de cliquer sur les blocs blancs. Commençons à le construire étape par étape!

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment concevoir la mise en page du jeu avec HTML
Comment ajouter un style au jeu avec CSS
Comment implémenter la logique de base du jeu avec JavaScript
Comment initialiser le jeu et créer l'ensemble initial de blocs
Comment implémenter les fonctionnalités de jeu, y compris la détection de clic sur les blocs, les scénarios de fin de partie, la création et le déplacement des blocs
Comment finaliser la gestion du score et de la vitesse du jeu

🏆 Réalisations

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

Concevoir des mises en page web avec HTML
Appliquer des techniques de style avec CSS
Implémenter la logique de jeu avec JavaScript
Manipuler le Document Object Model (DOM)
Gérer les événements et les interactions utilisateur
Créer et gérer des variables d'état de jeu
Modifier et mettre à jour dynamiquement l'affichage du jeu
Tester et déboguer l'implémentation du jeu

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/variables -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} javascript/arith_ops -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} javascript/cond_stmts -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} javascript/loops -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} javascript/functions -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} javascript/dom_select -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} javascript/dom_manip -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} javascript/event_handle -.-> lab-445707{{"Création d'un jeu de déplacement de blocs web"}} end

Conception de la mise en page du jeu avec HTML

Exigences :

Ouvrir le fichier index.html.
Être familier avec les balises et la structure HTML.

Fonctionnalités :

Mettre en page le conteneur principal du jeu.
Afficher le score du jeu.
Fournir un bouton de démarrage pour lancer le jeu.

Étapes :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Évitez le bloc blanc</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h2>score</h2>
    <h2 id="score">0</h2>
    <div id="main">
      <div id="con"></div>
      <!-- Conteneur du jeu -->
    </div>
    <div class="btn">
      <button class="start" onclick="start()">Démarrer</button>
      <!-- Bouton de démarrage -->
    </div>
  </body>
  <script src="script.js"></script>
</html>

Dans le code ci-dessus, nous avons créé une structure HTML de base pour notre jeu. Nous avons un div avec id="main" qui sera notre conteneur de jeu. À l'intérieur du conteneur de jeu, nous avons un autre div avec id="con" qui sera notre joueur. Nous avons également créé un bouton avec class="start" qui sera utilisé pour démarrer le jeu.

✨ Vérifier la solution et pratiquer

Ajouter un style au jeu

Exigences :

Ouvrir le fichier styles.css.
Connaissance de base des propriétés et sélecteurs CSS.
Compréhension des techniques de style pour les designs responsifs.

Fonctionnalités :

Améliorer l'attrait visuel du jeu.
Rendre l'interface du jeu responsive à différentes tailles d'écran.

Étapes :

body {
  background-color: #f0f0f0;
  font-family: "Arial", sans-serif;
}
h2 {
  text-align: center;
  color: #333;
  margin-bottom: 8px;
}
#main {
  width: 408px;
  height: 408px;
  background: white;
  border: 8px solid #ccc;
  border-radius: 10px;
  /* Ajout de border-radius pour un aspect plus doux */
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  /* Ajout de positionnement relatif pour le positionnement des enfants */
}
#con {
  width: 100%;
  height: 400px;
  position: absolute;
  /* Changé en absolu */
  top: -408px;
}
.row {
  height: 100px;
  width: 100%;
}
.cell {
  height: 100px;
  width: 100px;
  float: left;
  border-bottom: rgb(200, 200, 200) 1px solid;
  /* Couleur de bordure plus claire */
}
.black {
  background: #444;
  /* Gris foncé au lieu de noir pour un aspect plus doux */
}
.btn {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.start {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 25px;
  /* Augmentation du border-radius pour une forme de pastille */
  background: #4caf50;
  /* Bouton vert */
  color: #fff;
  font-size: 16px;
  /* Augmentation de la taille de police */
  border: none;
  /* Suppression de la bordure par défaut */
  cursor: pointer;
  /* Effet de curseur */
  transition: background 0.3s;
  /* Effet de transition */
}
.start:hover {
  background: #45a049;
  /* Vert plus foncé au survol */
}

Dans le code ci-dessus, nous avons ajouté un peu de style de base à notre jeu. Nous avons ajouté une couleur d'arrière-plan au body et une famille de polices au texte. Nous avons également ajouté un rayon de bordure au conteneur du jeu pour le rendre plus doux. Nous avons également ajouté un position: relative au conteneur du jeu et position: absolute au joueur. Cela nous permettra de positionner le joueur à l'intérieur du conteneur du jeu. Nous avons également ajouté un effet de transition au bouton de démarrage.

✨ Vérifier la solution et pratiquer

Implémenter la logique de base du jeu

Exigences :

Ouvrir le fichier script.js.
Compréhension préliminaire des bases de JavaScript.
Comprendre le concept du Document Object Model (DOM).

Fonctionnalités :

Configurer des fonctions utilitaires essentielles.
Initialiser des variables d'état clés du jeu.

Étapes :

// Fonctions utilitaires et initialisation des variables
// Obtenir un élément par son id
function $(id) {
  return document.getElementById(id);
}

// Créer un élément div avec un nom de classe donné
function creatediv(className) {
  var div = document.createElement("div");
  div.className = className;
  return div;
}
// Initialiser l'identifiant d'intervalle à null au départ
var clock = null;
// État du jeu (0 signifie arrêté et 1 signifie démarré)
var state = 0;
// Vitesse du déplacement des blocs du jeu
var speed = 6;
// Drapeau pour vérifier si le jeu a démarré ou non
var flag = false;

Dans le code ci-dessus, nous avons créé deux fonctions utilitaires. La première fonction $(id) est utilisée pour obtenir un élément par son id. La deuxième fonction creatediv(className) est utilisée pour créer un élément div avec un nom de classe donné. Nous avons également initialisé quelques variables qui seront utilisées plus tard dans le jeu.

✨ Vérifier la solution et pratiquer

Initialiser le jeu

Exigences :

Capacité à écrire des fonctions JavaScript.
Connaissance des écouteurs d'événements JavaScript.

Fonctionnalités :

Préparer le jeu pour être prêt à être lancé.
Créer l'ensemble initial de blocs du jeu.

Étapes :

// Cliquez sur le bouton de lancement du jeu pour démarrer le jeu
function start() {
  if (!flag) {
    init();
  } else {
    alert("Le jeu a déjà commencé! Pas besoin de cliquer à nouveau!");
  }
}

// Fonction d'initialisation (init)
function init() {
  flag = true;
  for (var i = 0; i < 4; i++) {
    createrow();
  }

  // Ajout d'écouteurs d'événements avec addEventListener
  $("main").addEventListener("click", function (ev) {
    judge(ev);
  });

  // Appel de la fonction move() toutes les 30 millisecondes avec un timer
  clock = setInterval(move, 30);
}

Dans le code ci-dessus, nous avons créé une fonction start() qui sera appelée lorsque le bouton de démarrage est cliqué. À l'intérieur de la fonction start(), nous avons appelé la fonction init() qui initialisera le jeu. À l'intérieur de la fonction init(), nous avons défini la variable flag sur true qui sera utilisée pour vérifier si le jeu a commencé ou non. Nous avons également créé quatre rangées de blocs en utilisant la fonction createrow(). Nous avons également ajouté un écouteur d'événements au conteneur du jeu qui sera utilisé pour détecter l'événement de clic sur le conteneur du jeu. Nous avons également configuré un minuteur qui appellera la fonction move() toutes les 30 millisecondes.

✨ Vérifier la solution et pratiquer

Implémenter la fonctionnalité du jeu

Exigences :

Maîtrise des boucles et conditions JavaScript.
Savoir manipuler le DOM à l'aide de JavaScript.

Fonctionnalités :

Construire la dynamique principale du jeu.
Concevoir des scénarios de fin de partie.
Implémenter les mécanismes de création et de mouvement des blocs.

Étapes :

Vérifier si le joueur a cliqué sur un bloc blanc ou noir. Mettre à jour l'état du jeu en fonction du clic du joueur.

// Déterminer si l'on clique sur un bloc blanc ou noir
function judge(ev) {
  if (
    ev.target.className.indexOf("black") == -1 &&
    ev.target.className.indexOf("cell") !== -1
  ) {
    ev.target.parentNode.pass1 = 1; // Définit l'attribut pass, qui indique que le bloc blanc de cette ligne a été cliqué
  }

  if (ev.target.className.indexOf("black") !== -1) {
    // Cliquez sur une cible avec "black" dans le nom de la classe, c'est un bloc noir
    ev.target.className = "cell";
    ev.target.parentNode.pass = 1; // Définit l'attribut pass, indiquant que le bloc noir de cette ligne a été cliqué
    score();
  }
}

Déterminer quand la partie est terminée en fonction des interactions du joueur. Démarrer les actions de fin de partie lorsque la partie est terminée.

// Vérifier si la partie est terminée
function over() {
  var rows = con.childNodes;
  if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
    fail();
  }
  for (let i = 0; i < rows.length; i++) {
    if (rows[i].pass1 == 1) {
      fail();
    }
  }
}

// Fin de partie
function fail() {
  clearInterval(clock);
  flag = false;
  confirm("Le score final est " + parseInt($("score").innerHTML));
  var con = $("con");
  con.innerHTML = "";
  $("score").innerHTML = 0;
  con.style.top = "-408px";
}

Générer des rangées de blocs pour le jeu. Positionner aléatoirement le bloc "noir" parmi les autres.

// Crée un <div class="row"> avec quatre enfants <div class="cell">
function createrow() {
  var con = $("con");
  var row = creatediv("row"); // Crée un div : className=row
  var arr = createcell(); // Définit le nom de la classe du div cell, dont l'un est cell black

  con.appendChild(row); // Ajoute un nœud enfant avec row comme con

  for (var i = 0; i < 4; i++) {
    row.appendChild(creatediv(arr[i])); // Ajoute les nœuds enfants de la cellule row
  }

  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// Crée un tableau de noms de classes ; l'un d'entre eux est "cell black", les autres sont "cell"
function createcell() {
  var temp = ["cell", "cell", "cell", "cell"];
  var i = Math.floor(Math.random() * 4); // Génère aléatoirement la position du bloc noir Math.random() fonction paramètres 0~1 nombre aléatoire
  temp[i] = "cell black";
  return temp;
}

Faire descendre les blocs en continu. Supprimer les anciennes rangées lorsqu'elles sortent de vue.

// Fait descendre les blocs noirs
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"; // Continue de déplacer la valeur du haut pour qu'il se déplace
  over();
  if (top == 0) {
    createrow();
    con.style.top = "-102px";
    delrow();
  }
}

// Supprime une ligne
function delrow() {
  var con = $("con");
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

✨ Vérifier la solution et pratiquer

Finaliser la gestion du scoring et de la vitesse du jeu

Exigences :

Comprendre les variables JavaScript et les opérations arithmétiques.
Capacité à écrire une logique de jeu complexe en JavaScript.

Fonctionnalités :

Établir un système de récompenses.
Créer un système pour augmenter progressivement la difficulté du jeu.

Étapes :

// Fonction d'accélération, augmente la vitesse
function speedup() {
  speed += 2;
  if (speed == 20) {
    alert("C'est génial!");
  }
}
// Calcul du score
function score() {
  var newscore = parseInt($("score").innerHTML) + 1; // Augmente le score de 1 point
  $("score").innerHTML = newscore; // Modifie le score
  if (newscore % 10 == 0) {
    // Utilise la fonction d'accélération lorsque le score est un multiple de 10, le jeu devient de plus en plus rapide
    speedup();
  }
}

Dans le code ci-dessus, nous avons créé une fonction speedup() qui sera utilisée pour augmenter la vitesse du jeu. Nous avons également créé une fonction score() qui sera utilisée pour augmenter le score du jeu. Nous avons également ajouté une condition dans la fonction score() qui appellera la fonction speedup() lorsque le score est un multiple de 10.

✨ Vérifier la solution et pratiquer

Testez votre jeu

Ouvrez index.html dans un navigateur web.

Jouez au jeu en vous assurant que toutes les fonctionnalités fonctionnent comme prévu.
L'effet de la page est le suivant :

Sommaire

Félicitations ! Vous venez de créer de zéro un jeu simple mais amusant de déplacement de blocs en utilisant HTML, CSS et JavaScript. Ce projet vous a initié à la gestion de l'interaction utilisateur, à la logique du jeu et au style CSS dynamique en fonction des changements d'état du jeu. Vous pouvez étendre ce jeu de base avec plus de fonctionnalités telles que des niveaux, des limites de temps ou divers modes de difficulté. Amusez-vous à expérimenter avec votre nouveau jeu !