Click on the fast-moving mouse's game

Click here for free DL of the app version that can save data.

No:11648

201

←

Prev Next

→

Click on the fast-moving mouse
Developer User4917｜Date and time 23/8/11 16:25:50
Build time 10.083 sec｜Game capacity 2.184KB｜

Script

Voici un exemple d'un jeu simple où vous devez cliquer sur une souris qui se déplace rapidement sur l'écran :

Ce jeu crée un canvas où une souris rouge apparaît à une position aléatoire à l'intérieur du canvas. Lorsque vous cliquez sur la souris, le score augmente et une nouvelle position pour la souris est générée. Le score est affiché en haut à gauche du canvas. Le jeu se répète en boucle grâce à la fonction `gameLoop` et `requestAnimationFrame`.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

Voici un exemple d'un jeu simple où vous devez cliquer sur une souris qui se déplace rapidement sur l'écran :

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jeu de la souris</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Déclarer les variables du jeu
    var score = 0;
    var mouseX = 0;
    var mouseY = 0;
    var mouseSize = 30;

// Gérer les clics sur le canvas
    canvas.addEventListener("mousedown", function(event) {
      if (isMouseHit(event.clientX, event.clientY)) {
        score++;
        randomizeMouse();
      }
    });

// Générer une position aléatoire pour la souris
    function randomizeMouse() {
      mouseX = Math.random() * (canvas.width - mouseSize);
      mouseY = Math.random() * (canvas.height - mouseSize);
    }

// Vérifier si le clic a touché la souris
    function isMouseHit(clickX, clickY) {
      return clickX >= mouseX && clickX <= mouseX + mouseSize &&
             clickY >= mouseY && clickY <= mouseY + mouseSize;
    }

// Dessiner la souris sur le canvas
    function drawMouse() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(mouseX, mouseY, mouseSize, mouseSize);
    }

// Mettre à jour et afficher le score
    function updateScore() {
      ctx.font = "24px Arial";
      ctx.fillStyle = "#000000";
      ctx.fillText("Score: " + score, 10, 30);
    }

// Boucle de jeu
    function gameLoop() {
      drawMouse();
      updateScore();
      requestAnimationFrame(gameLoop);
    }

// Démarrer le jeu
    randomizeMouse();
    gameLoop();
  </script>
</body>
</html>
```