ピタゴラスイッチ's game

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

No:20372

←

Prev Next

→

ピタゴラスイッチ
Developer User9024｜Date and time 23/10/9 8:36:55
Build time 10.123 sec｜Game capacity 2.731KB｜

Script

以下がピタゴラスイッチのゲームの実装例です。

このプログラムは1枚のHTMLファイルとして実装されており、必ずJavaScriptを含んでいます。JavaScriptのコードは`
`タグで囲まれており、`DOMContentLoaded`イベントが発火した時に処理が実行されます。実際のゲームでは、9つの正方形のセルが表示されます。いずれかのセルをクリックすると、クリックしたセルが正解かどうか判定されます。正解のセルをクリックした場合は、そのセルが青色になり、プレイヤーが勝利したことを表示するアラートメッセージが表示されます。スマホ操作にも対応しており、絵文字は使用していませんが、簡単なピタゴラスイッチのゲームとして遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

以下がピタゴラスイッチのゲームの実装例です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ピタゴラスイッチ</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
        }
        
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            font-size: 32px;
            border: 1px solid black;
        }
        
        .active {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

cells.forEach((cell, index) => {
                cell.addEventListener('click', () => {
                    if (index === winnerIndex) {
                        cell.classList.add('active');
                        alert('Congratulation! You won!');
                    } else {
                        alert('Wrong tile. Try again!');
                    }
                });
            });
        });
    </script>
</body>
</html>
```

このプログラムは1枚のHTMLファイルとして実装されており、必ずJavaScriptを含んでいます。JavaScriptのコードは`<script>`タグで囲まれており、`DOMContentLoaded`イベントが発火した時に処理が実行されます。

実際のゲームでは、9つの正方形のセルが表示されます。いずれかのセルをクリックすると、クリックしたセルが正解かどうか判定されます。正解のセルをクリックした場合は、そのセルが青色になり、プレイヤーが勝利したことを表示するアラートメッセージが表示されます。

スマホ操作にも対応しており、絵文字は使用していませんが、簡単なピタゴラスイッチのゲームとして遊ぶことができます。