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

No:46174

109

←

Prev Next

→

Match The Block
Developer User13970｜Date and time 24/2/23 21:46:11
Build time 9.84 sec｜Game capacity 2.657KB｜

Script

Match The Block

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Match The Block</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }
    #gameBoard {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid black;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .block {
        background-color: lightblue;
        border: 1px solid blue;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>Match The Block</h1>
<div id="gameBoard"></div>

for (let i = 0; i < shuffledBlocks.length; i++) {
            const block = document.createElement("div");
            block.className = "block";
            block.textContent = shuffledBlocks[i];
            block.addEventListener("click", function() {
                if (flippedBlocks.length < 2 && !flippedBlocks.includes(block) && !matchedBlocks.includes(block)) {
                    flippedBlocks.push(block);
                    block.style.backgroundColor = "lightgreen";
                    if (flippedBlocks.length === 2) {
                        if (flippedBlocks[0].textContent === flippedBlocks[1].textContent) {
                            matchedBlocks.push(...flippedBlocks);
                            flippedBlocks = [];
                            if (matchedBlocks.length === shuffledBlocks.length) {
                                alert("Congratulations! You matched all the blocks!");
                            }
                        } else {
                            setTimeout(() => {
                                flippedBlocks.forEach(flippedBlock => {
                                    flippedBlock.style.backgroundColor = "lightblue";
                                });
                                flippedBlocks = [];
                            }, 1000);
                        }
                    }
                }
            });
            gameBoard.appendChild(block);
        }
    });
</script>
</body>
</html>