AI game creator

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

No:50747

109

←

Prev Next

→

Fix the pie
Developer User21395｜Date and time 24/3/9 13:40:02
Build time 5.134 sec｜Game capacity 1.597KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Fix the Pie Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const pieImage = new Image();
    pieImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Keylimepie.jpg/220px-Keylimepie.jpg';
    const pieWidth = 100;
    const pieHeight = 100;
    let pieX = Math.random() * (canvas.width - pieWidth);
    let pieY = Math.random() * (canvas.height - pieHeight);

let isGameOver = false;

canvas.addEventListener('click', (event) => {
      const rect = canvas.getBoundingClientRect();
      const clickX = event.clientX - rect.left;
      const clickY = event.clientY - rect.top;

if (clickX > pieX && clickX < pieX + pieWidth && clickY > pieY && clickY < pieY + pieHeight) {
        isGameOver = true;
        alert('You fixed the pie! Refresh the page to play again.');
      }
    });

function draw() {
      if (!isGameOver) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(pieImage, pieX, pieY, pieWidth, pieHeight);
      }
    }

function update() {
      if (!isGameOver) {
        pieX = Math.random() * (canvas.width - pieWidth);
        pieY = Math.random() * (canvas.height - pieHeight);
      }
    }

function gameLoop() {
      draw();
      update();
      requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>