AI game creator

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

No:48018

←

Prev Next

→

Merge Game
Developer User20684｜Date and time 24/3/1 7:34:08
Build time 9.158 sec｜Game capacity 1.661KB｜

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");

// Define pictograms
  const pictogram1 = { x: 50, y: 50, width: 50, height: 50 };
  const pictogram2 = { x: 150, y: 50, width: 50, height: 50 };
  let mergedPictogram = { x: 100, y: 150, width: 100, height: 100 };

// Draw function
  function drawPictograms() {
    ctx.fillStyle = "blue";
    ctx.fillRect(pictogram1.x, pictogram1.y, pictogram1.width, pictogram1.height);
    
    ctx.fillStyle = "red";
    ctx.fillRect(pictogram2.x, pictogram2.y, pictogram2.width, pictogram2.height);
    
    ctx.fillStyle = "purple";
    ctx.fillRect(mergedPictogram.x, mergedPictogram.y, mergedPictogram.width, mergedPictogram.height);
  }

// Merge function
  function mergePictograms() {
    mergedPictogram.width = pictogram1.width + pictogram2.width;
    mergedPictogram.height = pictogram1.height + pictogram2.height;
    
    pictogram2.x = 250;
    pictogram2.y = 350;
    
    drawPictograms();
  }

// Event listener for merging
  canvas.addEventListener("click", function(event) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;
    
    if (mouseX >= mergedPictogram.x && mouseX <= mergedPictogram.x + mergedPictogram.width && 
        mouseY >= mergedPictogram.y && mouseY <= mergedPictogram.y + mergedPictogram.height) {
      mergePictograms();
    }
  });

// Initial draw
  drawPictograms();
</script>
</body>
</html>