<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Attrape le carré</title> <style> body { margin: 0; height: 100vh; background: #222; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, sans-serif; } h1 { margin-top: 10px; } #game-area { position: relative; width: 600px; height: 400px; background: #333; border: 3px solid #fff; overflow: hidden; } #target { position: absolute; width: 40px; height: 40px; background: red; cursor: pointer; border-radius: 6px; } #score { font-size: 24px; margin: 15px; } </style> </head> <body> <h1>Attrape le carré !</h1> <div id="score">Score : 0</div> <div id="game-area"> <div id="target"></div> </div> <script> const target = document.getElementById("target"); const gameArea = document.getElementById("game-area"); const scoreDisplay = document.getElementById("score"); let score = 0; // Déplace le carré à une position aléatoire function moveTarget() { const maxX = gameArea.clientWidth - target.clientWidth; const maxY = gameArea.clientHeight - target.clientHeight; const x = Math.random() * maxX; const y = Math.random() * maxY; target.style.left = x + "px"; target.style.top = y + "px"; } // Quand on clique sur le carré target.addEventListener("click", () => { score++; scoreDisplay.textContent = "Score : " + score; moveTarget(); }); // Déplace automatiquement le carré toutes les 900ms setInterval(moveTarget, 900); moveTarget(); </script> </body> </html>
Thiag0 : Je n'arrive pas à jouer au jeu.
29/11/2025 11:45