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

No:5448

1492

←

Prev Next

→

Lets just list the codes.
Developer User3589｜Date and time 23/6/30 3:01:31
Build time 19.483 sec｜Game capacity 2.187KB｜

Script

了解です。以下はスマートフォンで遊べるシンプルなゲーム「フリッピータップ」の実装例です。

フリッピータップ

タップでセルをめくってください！

このゲームでは、9つのセルが表示され、セルをタップするとそのセルがめくられます。スタイルはシンプルにしましたが、必要に応じてカスタマイズしてください。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。以下はスマートフォンで遊べるシンプルなゲーム「フリッピータップ」の実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>フリッピータップ</title>
    <style>
        body {
            text-align: center;
            font-size: 4rem;
        }

.board {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 2rem auto;
            width: 20rem;
            height: 20rem;
        }

.cell {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 6rem;
            height: 6rem;
            border: 1px solid black;
            font-size: 3rem;
            cursor: pointer;
        }

.cell.clicked {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <h1>フリッピータップ</h1>
    <p>タップでセルをめくってください！</p>
    <div class="board"></div>

// ゲームの初期化
        function initGame() {
            // セルを作成する
            for (let i = 0; i < 9; i++) {
                let cell = document.createElement('div');
                cell.classList.add('cell');
                cells.push(cell);
                board.appendChild(cell);
            }

// セルのクリックイベントを設定する
            cells.forEach((cell, index) => {
                cell.addEventListener('click', () => {
                    flipCell(index);
                });
            });
        }

// セルをめくる
        function flipCell(index) {
            let cell = cells[index];
            cell.classList.add('clicked');
        }

// ゲームの開始
        initGame();
    </script>
</body>
</html>
```