キャンディークラッシュ's game

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

No:40041

←

Prev Next

→

キャンディークラッシュ
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/31 19:03:48
Build time 18.405 sec｜Game capacity 4.293KB｜

Script

了解です。以下にキャンディークラッシュの簡易版を実装したHTMLファイルのサンプルコードを示します。

このコードは、8x8のキャンディーの盤面を表示し、クリックしたキャンディーと同じ種類のキャンディーを削除して新しいキャンディーを生成するシンプルなキャンディークラッシュゲームです。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にキャンディークラッシュの簡易版を実装したHTMLファイルのサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>キャンディークラッシュ</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-gap: 5px;
        }
        .candy {
            width: 50px;
            height: 50px;
            font-size: 40px;
            text-align: center;
            line-height: 50px;
            background-color: #ffc125;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    
    <script>
        const container = document.querySelector('.container');
        const candies = ['🍬', '🍭', '🍫', '🍦', '🍰']; // キャンディーの種類
        
        // ゲーム盤の初期化
        function initializeBoard() {
            for (let i = 0; i < 64; i++) {
                const candy = document.createElement('div');
                candy.classList.add('candy');
                candy.textContent = getRandomCandy();
                container.appendChild(candy);
            }
        }

// ランダムなキャンディーを取得
        function getRandomCandy() {
            return candies[Math.floor(Math.random() * candies.length)];
        }
        
        // クリックしたキャンディーと同じ種類のキャンディーを削除
        function removeSameCandies(clickedCandy) {
            const candyText = clickedCandy.textContent;
            const adjacentCandies = getAdjacentCandies(clickedCandy);
            
            // クリックしたキャンディーと同じ種類のキャンディーを削除
            const matchedCandies = [clickedCandy];
            for (const candy of adjacentCandies) {
                if (candy.textContent === candyText) {
                    matchedCandies.push(candy);
                }
            }
            
            // 削除したキャンディーを表示から削除し、新しいキャンディーを生成
            for (const candy of matchedCandies) {
                container.removeChild(candy);
                const newCandy = document.createElement('div');
                newCandy.classList.add('candy');
                newCandy.textContent = getRandomCandy();
                container.appendChild(newCandy);
            }
        }
        
        // クリックしたキャンディーの周囲のキャンディーを取得
        function getAdjacentCandies(clickedCandy) {
            const candies = Array.from(document.querySelectorAll('.candy'));
            const clickedIndex = candies.indexOf(clickedCandy);
            const adjacentIndices = getAdjacentIndices(clickedIndex);
            const adjacentCandies = adjacentIndices.map(index => candies[index]);
            return adjacentCandies;
        }
        
        // クリックしたキャンディーの周囲のインデックスを取得
        function getAdjacentIndices(clickedIndex) {
            const indices = [];
            if (clickedIndex % 8 !== 0) indices.push(clickedIndex - 1); // 左
            if (clickedIndex % 8 !== 7) indices.push(clickedIndex + 1); // 右
            if (clickedIndex >= 8) indices.push(clickedIndex - 8); // 上
            if (clickedIndex < 56) indices.push(clickedIndex + 8); // 下
            return indices;
        }
        
        // ゲーム盤の初期化とイベントリスナーの設定
        function startGame() {
            initializeBoard();
            container.addEventListener('click', (event) => {
                const clickedCandy = event.target;
                if (clickedCandy.classList.contains('candy')) {
                    removeSameCandies(clickedCandy);
                }
            });
        }
        
        startGame();
    </script>
</body>
</html>
```