fork download 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8" />
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6.   <title>Catch the Box Game</title>
  7.   <style>
  8.     body {
  9.       margin: 0;
  10.       padding: 0;
  11.       overflow: hidden;
  12.       font-family: Arial, sans-serif;
  13.       background: #282c34;
  14.       color: white;
  15.       text-align: center;
  16.     }
  17.  
  18.     h1 {
  19.       margin-top: 20px;
  20.     }
  21.  
  22.     #gameCanvas {
  23.       background: #1e1e1e;
  24.       border: 2px solid white;
  25.       margin: auto;
  26.       display: block;
  27.       margin-top: 20px;
  28.     }
  29.  
  30.     #score {
  31.       font-size: 24px;
  32.       margin-top: 10px;
  33.     }
  34.   </style>
  35. </head>
  36. <body>
  37.  
  38. <h1>🎯 Catch the Box Game</h1>
  39. <div id="score">Score: 0</div>
  40. <canvas id="gameCanvas" width="600" height="400"></canvas>
  41.  
  42. <script>
  43.   const canvas = document.getElementById("gameCanvas");
  44.   const ctx = canvas.getContext("2d");
  45.  
  46.   let box = {
  47.     x: Math.random() * 550,
  48.     y: Math.random() * 350,
  49.     size: 50,
  50.     color: "red"
  51.   };
  52.  
  53.   let score = 0;
  54.  
  55.   function drawBox() {
  56.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  57.     ctx.fillStyle = box.color;
  58.     ctx.fillRect(box.x, box.y, box.size, box.size);
  59.   }
  60.  
  61.   canvas.addEventListener("click", function (e) {
  62.     const rect = canvas.getBoundingClientRect();
  63.     const clickX = e.clientX - rect.left;
  64.     const clickY = e.clientY - rect.top;
  65.  
  66.     if (
  67.       clickX >= box.x &&
  68.       clickX <= box.x + box.size &&
  69.       clickY >= box.y &&
  70.       clickY <= box.y + box.size
  71.     ) {
  72.       score++;
  73.       document.getElementById("score").innerText = "Score: " + score;
  74.       moveBox();
  75.     }
  76.   });
  77.  
  78.   function moveBox() {
  79.     box.x = Math.random() * (canvas.width - box.size);
  80.     box.y = Math.random() * (canvas.height - box.size);
  81.     drawBox();
  82.   }
  83.  
  84.   drawBox();
  85. </script>
  86.  
  87. </body>
  88. </html>
  89.  
Success #stdin #stdout 0.03s 25940KB
comments (?)
stdin 
3
1
p 3 3 

2
c 10 10 20
c 20 20 10

1
l 0 0 100 20
stdout 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Catch the Box Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
      background: #282c34;
      color: white;
      text-align: center;
    }

    h1 {
      margin-top: 20px;
    }

    #gameCanvas {
      background: #1e1e1e;
      border: 2px solid white;
      margin: auto;
      display: block;
      margin-top: 20px;
    }

    #score {
      font-size: 24px;
      margin-top: 10px;
    }
  </style>
</head>
<body>

<h1>🎯 Catch the Box Game</h1>
<div id="score">Score: 0</div>
<canvas id="gameCanvas" width="600" height="400"></canvas>

<script>
  const canvas = document.getElementById("gameCanvas");
  const ctx = canvas.getContext("2d");

  let box = {
    x: Math.random() * 550,
    y: Math.random() * 350,
    size: 50,
    color: "red"
  };

  let score = 0;

  function drawBox() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = box.color;
    ctx.fillRect(box.x, box.y, box.size, box.size);
  }

  canvas.addEventListener("click", function (e) {
    const rect = canvas.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;

    if (
      clickX >= box.x &&
      clickX <= box.x + box.size &&
      clickY >= box.y &&
      clickY <= box.y + box.size
    ) {
      score++;
      document.getElementById("score").innerText = "Score: " + score;
      moveBox();
    }
  });

  function moveBox() {
    box.x = Math.random() * (canvas.width - box.size);
    box.y = Math.random() * (canvas.height - box.size);
    drawBox();
  }

  drawBox();
</script>

</body>
</html>
https://ideone.com/mfOwL7
language:
PHP (php 7.3.5)
created:
1 day ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!