AI game creator

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

No:52763

296

←

Prev Next

→

Merge Game
Developer User22126｜Date and time 24/3/24 14:08:21
Build time 12.719 sec｜Game capacity 2.069KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

let boxes = [];
    let score = 0;

function randomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

function createBox() {
      let box = {
        x: randomInt(10, canvas.width - 50),
        y: 10,
        width: 50,
        height: 50,
        color: `rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`,
        value: randomInt(1, 5)
      };

boxes.push(box);
    }

function drawBox(box) {
      ctx.fillStyle = box.color;
      ctx.fillRect(box.x, box.y, box.width, box.height);
      
      ctx.fillStyle = "white";
      ctx.font = "20px Arial";
      ctx.fillText(box.value, box.x + box.width/2 - 5, box.y + box.height/2 + 5);
    }

function drawScore() {
      ctx.fillStyle = "black";
      ctx.font = "30px Arial";
      ctx.fillText("Score: " + score, 10, 50);
    }

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawScore();

for (let i = 0; i < boxes.length; i++) {
        boxes[i].y += 2;

if (boxes[i].y + boxes[i].height > canvas.height) {
          boxes.splice(i, 1);
          score--;
        }

drawBox(boxes[i]);
      }

if (boxes.length < 5) {
        createBox();
      }

requestAnimationFrame(update);
    }

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

for (let i = 0; i < boxes.length; i++) {
        if (clickX >= boxes[i].x && clickX <= boxes[i].x + boxes[i].width && clickY >= boxes[i].y && clickY <= boxes[i].y + boxes[i].height) {
          score += boxes[i].value;
          boxes.splice(i, 1);
        }
      }
    });

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