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

No:8347

812

←

Prev Next

→

Cute cat 3-match puzzle
Developer yuki｜Date and time 23/7/15 12:23:15
Build time 25.163 sec｜Game capacity 3.243KB｜

Script

了解です。以下に、猫の可愛い3マッチパズルのプログラムを示します。

猫の可愛い3マッチパズル

このプログラムでは、9つのマス目からなるゲームボードが表示されます。各マス目にはランダムに選択された猫の絵文字が表示され、クリックすることでマス目を選択できます。3つのマス目が選択された際に、同じ絵文字が揃っていればスコアが増え、揃っていなければ選択が解除されます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下に、猫の可愛い3マッチパズルのプログラムを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>猫の可愛い3マッチパズル</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 40px;
        }
        .game-board {
            display: flex;
            flex-wrap: wrap;
            width: 400px;
        }
        .tile {
            width: 100px;
            height: 100px;
            font-size: 80px;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
    <h1>猫の可愛い3マッチパズル</h1>
    <div class="game-board"></div>
    
    <script>
        const cats = ["😺", "😸", "😻", "😼", "😽", "🙀", "😿", "😾"];
        let selectedTiles = [];
        let score = 0;
        
        function initializeGameBoard() {
            const gameBoard = document.querySelector('.game-board');
            for (let i = 0; i < 9; i++) {
                const tile = document.createElement('div');
                tile.classList.add('tile');
                tile.textContent = getRandomCat();
                tile.addEventListener('click', () => selectTile(tile));
                gameBoard.appendChild(tile);
            }
        }
        
        function getRandomCat() {
            const randomIndex = Math.floor(Math.random() * cats.length);
            return cats[randomIndex];
        }
        
        function selectTile(tile) {
            tile.classList.toggle('selected');
            if (tile.classList.contains('selected')) {
                selectedTiles.push(tile);
                if (selectedTiles.length === 3) {
                    checkMatch();
                }
            } else {
                const index = selectedTiles.indexOf(tile);
                selectedTiles.splice(index, 1);
            }
        }
        
        function checkMatch() {
            const selectedCat = selectedTiles[0].textContent;
            const isMatch = selectedTiles.every(tile => tile.textContent === selectedCat);
            if (isMatch) {
                selectedTiles.forEach(tile => {
                    tile.classList.add('matched');
                    tile.style.pointerEvents = 'none';
                });
                score += 1;
                document.title = `猫の可愛い3マッチパズル - スコア: ${score}`;
            } else {
                selectedTiles.forEach(tile => tile.classList.remove('selected'));
            }
            selectedTiles = [];
        }
        
        initializeGameBoard();
    </script>
</body>
</html>
```