AI game creator

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

No:51013

←

Prev Next

→

Merge Game
Developer User18896｜Date and time 24/3/10 11:48:21
Build time 6.279 sec｜Game capacity 2.002KB｜

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="canvas" width="400" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // Game variables
    let score = 0;
    let blocks = [];
    
    // Block class
    class Block {
      constructor(x, y, value) {
        this.x = x;
        this.y = y;
        this.value = value;
      }
      
      draw() {
        ctx.fillStyle = 'blue';
        ctx.fillRect(this.x, this.y, 50, 50);
        ctx.fillStyle = 'white';
        ctx.font = '20px Arial';
        ctx.fillText(this.value.toString(), this.x + 20, this.y + 30);
      }
    }
    
    // Initialize game
    function init() {
      canvas.addEventListener('click', mergeBlocks);
      
      for (let i = 0; i < 5; i++) {
        let block = new Block(i * 70, 50, Math.floor(Math.random() * 3) + 1);
        blocks.push(block);
      }
      
      draw();
    }
    
    // Draw function
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      for (let block of blocks) {
        block.draw();
      }
    }
    
    // Merge blocks function
    function mergeBlocks(event) {
      const rect = canvas.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;
      
      for (let i = 0; i < blocks.length - 1; i++) {
        if (blocks[i].x <= mouseX && mouseX <= blocks[i].x + 50 &&
            blocks[i].y <= mouseY && mouseY <= blocks[i].y + 50 &&
            blocks[i+1].x === blocks[i].x + 70) {
          if (blocks[i].value === blocks[i+1].value) {
            blocks[i].value *= 2;
            blocks.splice(i+1, 1);
            score += blocks[i].value;
          }
        }
      }
      
      draw();
    }
    
    // Game loop
    function gameLoop() {
      draw();
    }
    
    init();
    setInterval(gameLoop, 1000 / 60);
  </script>
</body>
</html>