Cube Ninja

Créer un jeu complet avec HTML, CSS & JavaScript

Mission :

Développer un jeu de réflexes addictif sans framework, uniquement avec les technologies web natives. Résultat : une expérience complète en moins de 170 lignes de code !

Choix technologiques :

HTMLCSSJavaScripttechno prof

Défis Techniques

Chaque objet apparaît aléatoirement avec des probabilités équilibrées :

const random = Math.random(); let objetType; if (random < 0.6) { objetType='cube' ; } else if (random < 0.8) { objetType='bombe' ; } else { objetType='personnages' ; }

Création de l'élément HTML

const objet = document.createElement('div'); objet.className = objetType;

Position aléatoire sur l'écran

const x = Math.random() * (window.innerWidth - 100); const y = Math.random() * (window.innerHeight - 100); objet.style.left = x + 'px'; objet.style.top = y + 'px'

Arrêt du jeu après 3 sec si pas de click

setTimeout(() => { if (objet.parentNode) { objet.remove(); // Si c'était un cube ou cercle non cliqué, on perd une vie if (objetType !== 'bombe') { loseLife(); } } }, 3000); };

Fonction qui gére le clic sur l'objet et les ponctuations<

function handleObjectClick(objet, type) { if (!gameRunning) return; // Animation d'explosion objet.classList.add('explode'); // points selon le type d'objet if (type === 'cube') { // Cube normal : +10 points updateScore(10); } else if (type === 'personnages') { // Personnage bonus : +25 points updateScore(25); } else if (type === 'bombe') { // Bombe : game over immédiat gameOver(); return; }