AI game creator

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

No:47722

←

Prev Next

→

Merge Game
Developer User20606｜Date and time 24/2/29 6:35:18
Build time 8.714 sec｜Game capacity 2.264KB｜

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>

let score = 0;
        let blocks = [];

const blockWidth = 50;
        const blockHeight = 50;
        const blockColors = ["red", "blue", "green", "yellow"];

canvas.addEventListener("click", mergeBlocks);

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++) {
                const block1 = blocks[i];
                const block2 = blocks[i + 1];

if (Math.abs(block1.x - block2.x) < blockWidth && Math.abs(block1.y - block2.y) < blockHeight) {
                    const mergedColor = block1.color === block2.color ? block1.color : getRandomColor();
                    blocks.splice(i, 2);
                    blocks.push({ x: block1.x, y: block1.y, color: mergedColor });
                    score++;
                }
            }
        }

function getRandomColor() {
            return blockColors[Math.floor(Math.random() * blockColors.length)];
        }

function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, blockWidth, blockHeight);
        }

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

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

blocks.forEach(block => {
                drawBlock(block.x, block.y, block.color);
            });

drawScore();
        }

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