AI game creator

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

No:45539

←

Prev Next

→

Catch the lion game
Developer User19614｜Date and time 24/2/20 20:06:11
Build time 7.513 sec｜Game capacity 1.743KB｜

Script

Just copy and paste this code into a single HTML file and open it in a browser to play the "Catch the Lion" game. Use your mouse to move the player (blue square) and try to catch the lion (brown square) to win the game.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Catch the Lion Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let lionX = Math.random() * (canvas.width - 50);
    let lionY = Math.random() * (canvas.height - 50);
    let isLionCaught = false;
    
    function drawLion() {
      ctx.fillStyle = 'brown';
      ctx.fillRect(lionX, lionY, 50, 50);
    }
    
    function drawPlayer(x, y) {
      ctx.fillStyle = 'blue';
      ctx.fillRect(x, y, 20, 20);
    }
    
    function checkCollision(playerX, playerY) {
      if (
        playerX < lionX + 50 &&
        playerX + 20 > lionX &&
        playerY < lionY + 50 &&
        playerY + 20 > lionY
      ) {
        isLionCaught = true;
      }
    }
    
    function updateGame() {
      if (!isLionCaught) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawLion();
        drawPlayer(playerX, playerY);
        checkCollision(playerX, playerY);
      } else {
        ctx.fillStyle = 'green';
        ctx.font = '30px Arial';
        ctx.fillText('Lion Caught! 🦁👏', 100, 200);
      }
    }
    
    let playerX = canvas.width / 2;
    let playerY = canvas.height / 2;
    
    canvas.addEventListener('mousemove', function(event) {
      playerX = event.offsetX;
      playerY = event.offsetY;
    });
    
    setInterval(updateGame, 1000 / 60);
  </script>
</body>
</html>
```
Just copy and paste this code into a single HTML file and open it in a browser to play the "Catch the Lion" game. Use your mouse to move the player (blue square) and try to catch the lion (brown square) to win the game.