Stacking Tower :

Stacking Tower est un jeu d’adresse et de réflexion où les joueurs doivent empiler des blocs les uns sur les autres avec précision. Avec des visuels en 3D captivants et une progression de difficulté, ce jeu combine habileté et stratégie.

Caractéristiques Clés

1. Mécanique d’Empilement : Chaque bloc doit être placé précisément sur le précédent pour éviter qu’il ne tombe ou soit coupé.
2. Progression de la Difficulté : Les blocs se déplacent de plus en plus vite à chaque niveau.
3. Visuels en 3D : Graphismes immersifs rendus avec Three.js, offrant une expérience réaliste et esthétique.
4. Système de Score : Suivi en temps réel du score basé sur le nombre de blocs empilés avec succès.
5. Effets Dynamiques : Animation fluide et effets de lumière pour une expérience visuelle améliorée.

Détails Techniques

• Technologie : Développé avec HTML, CSS, JavaScript et Three.js.
• Type de Jeu : Jeu de réflexion et d’adresse, jouable en solo.
• Plateforme : Application web, accessible via navigateur.

Points Forts du Développement

Ce projet met en avant :

• Gestion Précise des Blocs : Une logique permettant de calculer les chevauchements pour déterminer la taille du bloc restant.
• Utilisation de Three.js : Création d’un environnement 3D interactif avec des effets de lumière et de matériaux texturés.
• Animation Immersive : Intégration de Tween.js pour des transitions fluides et une caméra dynamique qui suit la progression du joueur.

Classe Block: Construction et Placement des Blocs

La classe Block gère la logique des blocs dans le jeu, y compris leur dimension, position, mouvement, et couleur.

class Block {
  constructor(block) {
    this.STATES = { ACTIVE: 'active', STOPPED: 'stopped', MISSED: 'missed' };
    this.dimension = {
      width: block ? block.dimension.width : 10,
      height: 2,
      depth: block ? block.dimension.depth : 10,
    };
    this.position = {
      x: block ? block.position.x : 0,
      y: this.dimension.height * (block ? block.index + 1 : 0),
      z: block ? block.position.z : 0,
    };
    this.state = this.STATES.ACTIVE;
    this.speed = -0.1 - (this.index * 0.005); // Vitesse des blocs
    this.direction = this.speed;

    let geometry = new THREE.BoxGeometry(
      this.dimension.width,
      this.dimension.height,
      this.dimension.depth
    );
    this.material = new THREE.MeshToonMaterial({ color: this.color });
    this.mesh = new THREE.Mesh(geometry, this.material);
    this.mesh.position.set(this.position.x, this.position.y, this.position.z);
  }

  place() {
    // Vérifie le chevauchement entre le bloc actuel et le précédent
    let overlap =
      this.targetBlock.dimension[this.workingDimension] -
      Math.abs(this.position[this.workingPlane] -
        this.targetBlock.position[this.workingPlane]);

    if (overlap > 0) {
      // Crée des parties coupées et placées
      this.dimension[this.workingDimension] = overlap;
      let placedMesh = new THREE.Mesh(
        new THREE.BoxGeometry(this.dimension.width, this.dimension.height, this.dimension.depth),
        this.material
      );
      return { placed: placedMesh };
    } else {
      this.state = this.STATES.MISSED; // Bloc manqué
      return {};
    }
  }

  tick() {
    if (this.state === this.STATES.ACTIVE) {
      this.position[this.workingPlane] += this.direction;
      this.mesh.position[this.workingPlane] = this.position[this.workingPlane];
    }
  }
}

Classe Game: Gestion du Jeu

class Game {
  constructor() {
    this.blocks = [];
    this.state = 'ready';
    this.scoreContainer = document.getElementById('score');

    document.addEventListener('keydown', (e) => {
      if (e.keyCode === 32) this.onAction(); // Espace pour placer un bloc
    });

    this.addBlock(); // Ajoute le premier bloc
    this.tick();
  }

  addBlock() {
    const lastBlock = this.blocks[this.blocks.length - 1];
    if (lastBlock && lastBlock.state === 'missed') {
      return this.endGame();
    }
    let newBlock = new Block(lastBlock); // Création d’un nouveau bloc
    this.blocks.push(newBlock);
  }

  placeBlock() {
    let currentBlock = this.blocks[this.blocks.length - 1];
    let result = currentBlock.place();
    if (result.placed) this.blocks.push(new Block(currentBlock)); // Ajouter un nouveau bloc si placé correctement
  }

  endGame() {
    this.state = 'ended';
    console.log('Game Over');
  }

  tick() {
    this.blocks[this.blocks.length - 1].tick(); // Met à jour le dernier bloc
    requestAnimationFrame(() => this.tick());
  }
}

Fonctionnalités Clés du Jeu

1. Ajout Progressif des Blocs: Les blocs sont ajoutés dynamiquement en fonction de l'état du jeu.
2. Placement Précis des Blocs: Les blocs doivent être alignés avec le bloc précédent pour être empilés. Toute erreur réduit leur taille ou termine le jeu.
3. Gestion des États du Jeu: États disponibles : Prêt, En Jeu, et Terminé. Ces états contrôlent les actions disponibles, comme recommencer ou continuer à jouer.
4. Utilisation de la 3D (Three.js): Le jeu utilise Three.js pour le rendu des blocs en 3D, avec des effets de lumière et des matériaux colorés.
5. Interface Joueur: Une interface intuitive avec des instructions à l'écran et un affichage du score en temps réel pour suivre les performances.