KodikKodik
{}const=>[]async()letfn</>var
WebPratiqueDéveloppement

Tower Blocks - Un jeu JavaScript 3D passionnant

Apprenez à créer Tower Blocks Game, un jeu en 3D où vous construisez une tour de blocs. Apprenez à utiliser Three.js et GSAP pour créer des animations, compter les points et contrôler le processus de jeu.

К

Kodik

Auteur

8 min de lecture

Tower Blocks Game est un jeu d'arcade passionnant dans lequel le joueur doit construire une tour en plaçant des blocs les uns sur les autres. Le but est de placer les blocs aussi précisément que possible pour que la tour reste stable.

Dans ce guide, nous allons créer un jeu Tower Blocks en utilisant HTML, CSS et JavaScript. Nous allons utiliser Three.js pour la visualisation 3D et GSAP pour des animations fluides. Le jeu comprend :

  1. Animation des blocs qui se déplacent et s'arrêtent.

  2. Modification de la taille et de la position des blocs en fonction de la précision du placement.

  3. Score et interface de jeu.

Description du jeu

Tower Blocks Game - est un jeu où vous devez construire une tour en plaçant des blocs mobiles. Plus vous placez les blocs avec précision, plus la tour sera haute. Si le bloc dépasse le précédent, une partie du bloc est coupée. Le jeu se termine si les blocs passent complètement à côté de la tour.

Caractéristiques :

  • Contrôle pratique (clic ou espace).

  • Graphiques 3D colorés.

  • Un jeu qui se complique progressivement.

Étapes de création du jeu

1. Création d'une structure HTML

  • Ajoutez les éléments de base : un conteneur pour le jeu, des blocs pour l'interface (score, instructions, écran de fin de jeu).

  • Connectez les styles et les scripts : Three.js, GSAP, et le fichier JavaScript principal.

2. Style avec CSS

  • Utilisez les styles pour centrer le conteneur de jeu.

  • Créez des animations pour l'apparition des éléments d'interface.

  • Personnalisez l'adaptabilité de l'interface pour différents écrans.

3. Logique du jeu en JavaScript

  • Classe Stage: réglage de la scène, de la caméra et de l'éclairage.

  • Classe Block: gestion des blocs individuels (dimensions, mouvement, placement).

  • Classe Game: gestion du processus de jeu (ajout de blocs, comptage des points, état du jeu).

4. Mise en œuvre de la mécanique du bloc

  • Mouvement du bloc sur l'axe.

  • Détermination du point de contact avec le bloc précédent.

  • Découper le bloc s'il dépasse les limites.

5. Réglage de la commande

  • Réagissez aux touches et aux clics de souris pour placer les blocs.

6. Calcul des points et fin de la partie

  • Augmentez le score pour chaque bloc correctement placé.

  • Terminez le jeu si le bloc échoue.

7. Tests et optimisation

  • Assurez-vous que le jeu fonctionne sur tous les appareils et écrans.

  • Vérifiez que les transitions entre les états du jeu sont fluides.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Tower Blocks Game</title>
    <link rel="stylesheet" href="style.css"> <!-- Подключение стилей -->
</head>
<body>
    <div id="container">
        <!-- Основная область игры -->
        <div id="game"></div>
        
        <!-- Счет игры -->
        <div id="score">0</div>
        
        <!-- Инструкции -->
        <div id="instructions">Кликните, чтобы разместить блок</div>
        
        <!-- Экран окончания игры -->
        <div class="game-over">
            <h2>Игра окончена</h2>
            <p>Вы отлично справились, вы лучший.</p>
            <p>Кликните, чтобы начать заново</p>
        </div>
        
        <!-- Экран готовности к началу игры -->
        <div class="game-ready">
            <div id="start-button">Начать</div>
        </div>
    </div>

    <!-- Подключение скриптов -->
    <script src="https:// codepen.io/steveg3003/pen/zBVakw.js "> </ script> <!-- Bibliothèque pour les fonctions auxiliaires ->
    <script src="https:// cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js "> </ script> <!-- Three.js pour travailler avec la 3D ->
    <script src="https:// cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> < !-- GSAP pour l'animation -- >
    <script src="script.js"></script> <!-- Основная логика игры -->
</body>
</html>

Que faisons-nous dans ce HTML ?

  1. Ajout de la structure du jeu :

    • Créons un conteneur avec id="container", qui sera la zone principale du jeu.

    • À l'intérieur du conteneur, nous plaçons :

      • #game - zone de rendu des graphiques 3D avec Three.js.

      • #score - compte de jeu mis à jour en temps réel.

      • #instructions - un indice pour le joueur qui s'affiche au début du jeu.

      • .game-over - l'écran qui apparaît lorsque le jeu est terminé.

      • .game-ready - écran avec un bouton pour démarrer le jeu.

  2. Connectez les styles :

    • Nous utilisons <link> pour connecter le fichier style.css, qui définit l'apparence du jeu et stylise l'interface.

  3. Connectez les bibliothèques et les scripts :

    • Three.js - bibliothèque pour créer et travailler avec des graphiques 3D.

    • GSAP — bibliothèque pour une animation fluide des éléments.

    • script.js - fichier principal avec la logique du jeu.

  4. Ajoutons des balises méta :

    • <meta charset="UTF-8"> — définit l'encodage UTF-8 pour afficher correctement le texte en russe.

    • <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - assure l'adaptabilité de l'interface du jeu sur les appareils mobiles.

  5. Scénarios d'interaction :

    • Les scripts connectés implémentent la mécanique du jeu :

      • #start-button commence le jeu.

      • L'interaction avec #instructions se produit au début du jeu.

      • L'écran .game-over apparaît si le joueur fait une erreur.

Ajoutons des styles CSS

Pour le style de Tower Blocks Game, nous utilisons CSS pour créer une interface agréable et conviviale qui prend en charge l'adaptabilité et les animations.

Les éléments de base et leurs styles

1. Paramètres de base

Nous désactivons les retraits et le défilement par défaut pour que le jeu occupe tout l'écran :

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: "Comfortaa", cursive;
}

2. Conteneur de jeu

Le conteneur occupe tout l'écran et sert de zone principale pour le jeu :

#container {
  width: 100%;
  height: 100%;
}

3. Facture

Le score du jeu est affiché en haut de l'écran, il est de grande taille et a une animation fluide :

#container #score {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 10vh;
  color: #333344;
  transition: transform 0.5s ease;
}

4. Graphisme du jeu

La zone #game est destinée à l'affichage de graphiques 3D à l'aide de Three.js et occupe tout l'écran :

#container #game {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

5. Écrans de fin et de début de jeu

Les écrans .game-over et .game-ready apparaissent au centre de l'écran avec une animation :

#container .game-over, #container .game-ready {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Où trouver le code complet ?

Le code CSS complet est disponible dans l'application Code ou sur Projet GitHub. Cela vous permettra d'étudier tout le style et, si nécessaire, de personnaliser l'apparence selon vos besoins.

Description de la logique du jeu Tower Blocks Game (JavaScript)

JavaScript est la base pour la mise en œuvre de toute la logique de jeu de Tower Blocks Game. Il est responsable de la gestion de la scène 3D, du mouvement des blocs, du comptage des points et de l'interaction avec le joueur.

Les principaux éléments de JavaScript et leurs fonctionnalités

1. Création d'une scène 3D

Pour travailler avec des graphiques 3D, nous utilisons la bibliothèque Three.js. Avec la classe Stage on crée une scène, une caméra et un éclairage :

class Stage {
  constructor() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(...);
    this.light = new THREE.DirectionalLight(0xffffff, 0.5);
    this.scene.add(this.light);
  }
}

Ce que nous faisons :

  • Nous configurons la caméra pour la projection orthographique (adaptée aux jeux avec une « vue de dessus »).

  • Nous ajoutons de l'éclairage pour créer du volume visuel.

2. Création de blocs

La classe Block contrôle les blocs individuels, leurs tailles, leurs mouvements et leur placement :

class Block {
  constructor(previousBlock) {
    this.dimension = { width: 10, height: 2, depth: 10 };
    this.position = { x: 0, y: ..., z: 0 };
    this.mesh = new THREE.Mesh(new THREE.BoxGeometry(...), new THREE.MeshToonMaterial(...));
  }

  tick() {
    // Gère le mouvement du bloc
    this.position[this.workingPlane] += this.direction;
  }

  place() {
    // Logique de découpage du bloc en cas de non-concordance avec le précédent
  }
}

Ce que nous faisons :

  • Définissons les dimensions et les positions initiales des blocs.

  • Nous réalisons le mouvement des blocs et leur arrêt lorsque vous appuyez dessus.

3. Contrôle du jeu

La classe Game combine la logique du jeu, la gestion des états, l'ajout de nouveaux blocs et le calcul des points :

class Game {
  constructor() {
    this.blocks = [];
    this.stage = new Stage();
    this.state = 'READY';
    this.score = 0;
  }

  addBlock() {
    // Ajoute un nouveau bloc à la tour
  }

  placeBlock() {
    // Place le bloc actuel et vérifie la fin du jeu
  }

  restartGame() {
    // Réinitialise le jeu à la fin
  }
}

Ce que nous faisons :

  • Nous traitons les états du jeu : début, jeu, fin, redémarrage.

  • Gestion de l'ajout de nouveaux blocs et de la mise à jour de la scène.

  • Nous comptons les points pour les blocs placés avec succès.

4. Interaction avec le joueur

Le jeu réagit aux actions de l'utilisateur : appui sur la barre d'espace ou clic de la souris pour placer les blocs :

document.addEventListener('click', () => game.onAction());
document.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) game.onAction(); // Appuyer sur la barre d'espace
});

5. Animations

Avec l'aide de la bibliothèque GSAP nous réalisons un mouvement fluide de la caméra et des blocs d'animation :

TweenLite.to(this.camera.position, 0.3, { y: newY });
TweenLite.to(block.position, 1, { x: ... });

Ce que nous faisons :

  • La caméra se lève doucement, en suivant les blocs.

  • Les blocs qui ne correspondent pas s'envolent et disparaissent.

Où trouver le code complet ?

Le code JavaScript complet est disponible dans l'application Code ou sur Projet GitHub. Vous pourrez l'étudier plus en détail et, si nécessaire, l'adapter à vos besoins.

Conclusion

Création du jeu Tower Blocks Game est un processus passionnant qui combine le travail avec des graphiques 3D, des animations et des mécanismes de jeu. Nous avons examiné les points clés du développement : la configuration de la scène, la gestion des blocs, la mise en œuvre des interactions et le style de l'interface.

Où jouer et apprendre à créer un jeu ?

Jouer à Tower Blocks Game et vous pouvez étudier le code en détail dans l'application Code. C'est une excellente occasion non seulement de profiter du jeu, mais aussi d'apprendre à développer vos propres projets en étudiant un exemple pratique. Le code source complet est également disponible sur Projet GitHub, où vous pouvez le télécharger et l'adapter à vos besoins.

Essayez de créer un jeu vous-même, expérimentez les paramètres et améliorez-le : c'est la magie de la programmation ! 🚀

🎯Arrête de reporter

Tu as aimé l'article ?
Place à la pratique !

Avec Kodik, tu ne lis pas seulement — tu codes immédiatement. Théorie + pratique = vraies compétences.

⚡Pratique instantanée
🧠L'IA explique le code
🏆Certificat

Sans inscription • Sans carte