Cat Finder in the dark's game | AI game creator

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

No:49183

80

Cat Finder in the dark
Developer User20944｜Date and time 24/3/4 2:30:49
Build time 7.627 sec｜Game capacity 1.692KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cat Finder in the Dark</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let catX = Math.floor(Math.random() * canvas.width);
    let catY = Math.floor(Math.random() * canvas.height);
    
    function drawPlayer(x, y) {
      ctx.fillStyle = 'blue';
      ctx.fillRect(x, y, 20, 20);
    }
    
    function drawCat(x, y) {
      ctx.fillStyle = 'orange';
      ctx.fillRect(x, y, 20, 20);
    }
    
    function checkCatFound(playerX, playerY, catX, catY) {
      if (playerX < catX + 20 && playerX + 20 > catX && playerY < catY + 20 && playerY + 20 > catY) {
        alert('You found the cat!');
      }
    }
    
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    function drawGame() {
      clearCanvas();
      drawPlayer(playerX, playerY);
      drawCat(catX, catY);
      
      checkCatFound(playerX, playerY, catX, catY);
    }
    
    let playerX = canvas.width / 2;
    let playerY = canvas.height / 2;
    
    document.addEventListener('keydown', function(event) {
      const key = event.key;
      if (key === 'ArrowUp' && playerY > 0) {
        playerY -= 10;
      } else if (key === 'ArrowDown' && playerY < canvas.height - 20) {
        playerY += 10;
      } else if (key === 'ArrowLeft' && playerX > 0) {
        playerX -= 10;
      } else if (key === 'ArrowRight' && playerX < canvas.width - 20) {
        playerX += 10;
      }
      
      drawGame();
    });
    
    drawGame();
  </script>
</body>
</html>
```