A block Game and include a main menu at the start's game

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

No:33427

←

Prev Next

→

A block Game and include a main menu at the start
Developer User3879｜Date and time 24/1/4 5:24:06
Build time 18.342 sec｜Game capacity 2.857KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bloc Game</title>
    <style>
        #game-board {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            width: 90vw;
            margin: 20px auto;
        }
        .block {
            width: 90%;
            height: 90%;
            border-radius: 50%;
            cursor: pointer;
        }
        .red {
            background-color: red;
        }
        .blue {
            background-color: blue;
        }
        .green {
            background-color: green;
        }
        .yellow {
            background-color: yellow;
        }
        .main-menu {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="main-menu">
        <p>Cliquez pour commencer le jeu</p>
    </div>
    <div id="game-board"></div>

// Ajouter les blocs au plateau de jeu
        function addBlocks() {
            var gameBoard = document.getElementById("game-board");
            gameBoard.innerHTML = '';

for (var i = 0; i < 7; i++) {
                var block = document.createElement('div');
                block.classList.add('block');
                block.setAttribute('onclick', 'onClickBlock(' + i + ')');

var randomColor = colors[Math.floor(Math.random() * colors.length)];
                block.classList.add(randomColor);
                blocks[i] = randomColor;

gameBoard.appendChild(block);
            }
        }

// Gérer le clic sur un bloc
        function onClickBlock(index) {
            var selectedColor = blocks[index];
            blocks.splice(index, 1);

if (index - 1 >= 0 && blocks[index - 1] === selectedColor) {
                blocks.splice(index - 1, 1);
            }
            if (index + 1 < blocks.length && blocks[index + 1] === selectedColor) {
                blocks.splice(index + 1, 1);
            }

if (blocks.length === 0) {
                alert("Félicitations, vous avez terminé le jeu !");
                addBlocks();
            } else {
                addBlocks();
            }
        }

// Lancer le jeu au chargement de la page
        window.onload = function() {
            document.querySelector('.main-menu').addEventListener('click', function() {
                this.style.display = 'none';
                addBlocks();
            });
        };
    </script>
</body>
</html>