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

No:23081

←

Prev Next

→

ピタゴラスイッチ
Developer User10644｜Date and time 23/10/27 14:58:28
Build time 75.59 sec｜Game capacity 4.03KB｜

Script

了解しました。以下にピタゴラスイッチのゲームの実装例を記述します。

ピタゴラスイッチ

このコードは、スタートボタンをクリックするとピタゴラスイッチのゲームが始まり、4x3のボタンのグリッドが表示されます。ユーザーは3秒以内に正解のボタンをクリックする必要があります。ボタンをクリックすると、正解か不正解かが判定され、結果が表示されます。ご参考までに、上記のコードを1枚のhtmlファイルとして保存し、ブラウザで開くことで実際のゲームをプレイすることができます。また、スマートフォンでも操作可能です。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にピタゴラスイッチのゲームの実装例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ピタゴラスイッチ</title>
    <meta charset="UTF-8">
    <style>
        body {
            text-align: center;
            padding-top: 100px;
        }
        
        #startButton {
            font-size: 20px;
            padding: 10px 20px;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        
        #score {
            font-size: 40px;
        }
        
        #result {
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>ピタゴラスイッチ</h1>
    <button id="startButton">スタート</button>
    <div id="score">0</div>
    <div id="result"></div>

// ピタゴラスイッチのボタンを含むグリッドを作成
            var grid = document.createElement("div");
            grid.style.display = "grid";
            grid.style.gridTemplateColumns = "repeat(4, 1fr)";
            grid.style.gridAutoRows = "100px";
            area.appendChild(grid);

var buttons = [];

for (var i = 0; i < 12; i++) {
                var button = document.createElement("button");
                button.style.fontSize = "40px";
                button.style.background = "none";
                button.style.border = "none";
                button.style.cursor = "pointer";
                buttons.push(button);
                grid.appendChild(button);
            }

// ピタゴラスイッチの答えを設定
            var answer = Math.floor(Math.random() * 12);

// ピタゴラスイッチの問題を表示
            buttons[answer].textContent = "？";

// ボタンがクリックされた時の処理
            buttons.forEach(function(button, index) {
                button.addEventListener("click", function(){
                    if (index === answer) {
                        button.textContent = "○";
                        finishGame("正解！");
                    } else {
                        button.textContent = "×";
                        finishGame("不正解...");
                    }
                });
            });

// 指定秒数後にゲーム終了
            setTimeout(function() {
                if (grid.parentNode === area) {
                    buttons[answer].textContent = "○";
                    finishGame("時間切れ...");
                }
            }, 3000);
        }

function finishGame(message) {
            document.getElementById("score").textContent = "1";
            document.getElementById("result").textContent = message;
            document.getElementById("startButton").disabled = false;
        }
    </script>
</body>
</html>
```

このコードは、スタートボタンをクリックするとピタゴラスイッチのゲームが始まり、4x3のボタンのグリッドが表示されます。ユーザーは3秒以内に正解のボタンをクリックする必要があります。ボタンをクリックすると、正解か不正解かが判定され、結果が表示されます。

ご参考までに、上記のコードを1枚のhtmlファイルとして保存し、ブラウザで開くことで実際のゲームをプレイすることができます。また、スマートフォンでも操作可能です。