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

No:36732

4人の人がいて、タップするとランダムな証言をする。下の追放ボタンを押してから犯人だと思う人をタップす..ALL
Developer User16795｜Date and time 24/1/18 9:39:36
Build time 20.217 sec｜Game capacity 5.318KB｜

Script

以下は、要件に基づいて実装されたサンプルのHTMLファイルです。

人狼ゲーム

次の試合へ

このコードをHTMLファイルに保存し、ブラウザで開くと、スマートフォンで遊べる人狼ゲームが実行されます。各プレイヤーをタップするとランダムな証言が表示されます。追放ボタンを押すと、プレイヤーを追放できます。プレイヤーが追放されると、役職と勝敗が表示されます。次の試合へボタンを押すと、試合がリセットされます。

←

Prev　Next

→ 　

Back　

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

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

以下は、要件に基づいて実装されたサンプルのHTMLファイルです。

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人狼ゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            text-align: center;
        }

h1 {
            margin-bottom: 20px;
        }

#players {
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 20px;
        }

.player {
            width: 100px;
            height: 100px;
            background-color: lightgray;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            margin: 5px;
            cursor: pointer;
        }

#result {
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 10px;
        }

#next-game {
            display: none;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <h1>人狼ゲーム</h1>
    <div id="players">
        <div id="player1" class="player"></div>
        <div id="player2" class="player"></div>
        <div id="player3" class="player"></div>
        <div id="player4" class="player"></div>
    </div>
    <button id="exile-button">追放</button>
    <div id="result"></div>
    <div id="next-game">次の試合へ</div>

// プレイヤーリスト
        const players = ["player1", "player2", "player3", "player4"];

// 勝利条件
        let winCondition = Math.floor(Math.random() * players.length);

// ゲーム状態
        let gameStarted = false;
        let gameEnded = false;

// タップしたプレイヤーが犯人かどうか判定し、結果を表示する
        function handlePlayerTap(event) {
            const playerId = event.target.id;
            if (gameStarted && !gameEnded && playerId !== "exile-button") {
                const index = players.indexOf(playerId);
                const result = index === winCondition ? "犯人でした！" : "犯人ではありませんでした";
                document.getElementById("result").textContent = result;

// 役職の表示
                const role = index === winCondition ? "犯人" : "村人";
                event.target.innerHTML = role;

// 勝敗結果の表示
                const winLose = index === winCondition ? "勝利！" : "敗北！";
                document.getElementById("result").textContent += " " + winLose;

// 次の試合へボタンを表示
                document.getElementById("next-game").style.display = "block";

// ゲーム終了
                gameEnded = true;
            }
        }

// 追放ボタンをクリックした時の処理
        document.getElementById("exile-button").addEventListener("click", () => {
            gameStarted = true;
            // プレイヤーごとにランダムな証言を表示
            players.forEach(player => {
                const testimony = testimonies[Math.floor(Math.random() * testimonies.length)];
                document.getElementById(player).textContent = testimony;
            });
        });

// 次の試合へボタンをクリックした時の処理
        document.getElementById("next-game").addEventListener("click", () => {
            // 前の試合の結果をリセット
            document.getElementById("result").textContent = "";
            players.forEach(player => {
                document.getElementById(player).textContent = "";
            });

// 新たな犯人を決定
            winCondition = Math.floor(Math.random() * players.length);

// ゲーム状態をリセット
            gameStarted = false;
            gameEnded = false;

// 次の試合へボタンを非表示にする
            document.getElementById("next-game").style.display = "none";
        });

// プレイヤーをタップした時の処理
        players.forEach(player => {
            document.getElementById(player).addEventListener("click", handlePlayerTap);
        });
    </script>
</body>

</html>
```