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

No:5553

3204

Monopoly
Developer User3832｜Date and time 23/6/30 12:36:11
Build time 48.126 sec｜Game capacity 4.172KB｜

了解しました。以下に大富豪として遊べる部分的なゲームを実装したHTMLファイルの例を示します。

大富豪

プレイヤー1: 7枚

プレイヤー2: 7枚

プレイヤー3: 7枚

プレイヤー4: 7枚

この例では、4人のプレイヤーが手札を持ち、ターンごとにカードを出すゲームを実装しています。各プレイヤーの手札はJavaScriptオブジェクト`players`に格納されており、`play()`関数を実行することでカードを出すことができます。ターンが終わると、自動的に次のプレイヤーに切り替わります。また、カードとプレイヤーの情報はHTML上でも表示され、ゲームの進行状況がわかるようになっています。ゲームの起動は「プレイ」ボタンをクリックすることで行います。ただし、この実装ではプレイヤーが手札を選択して出せるわけではなく、自動的にカードが出されるだけです。さらにゲームを充実させるためには、ルールやゲームエンジンの実装が必要になります。

→ 　

1　

1　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

了解しました。以下に大富豪として遊べる部分的なゲームを実装したHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大富豪</title>
  <style>
    body {
      text-align: center;
      background-color: lightgreen;
    }
    #message {
      font-size: 24px;
      margin: 20px;
    }
    #cards {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .card {
      width: 100px;
      height: 150px;
      margin-right: 5px;
      background-color: white;
      border: 1px solid black;
      border-radius: 5px;
    }
    .card p {
      margin: 2px;
    }
    #players {
      margin-bottom: 20px;
    }
    .player {
      font-size: 18px;
      margin: 5px;
    }
    button {
      font-size: 18px;
      padding: 5px 10px;
      background-color: lightblue;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>大富豪</h1>
  <div id="message"></div>
  <div id="cards"></div>
  <div id="players">
    <div class="player">プレイヤー1: 7枚</div>
    <div class="player">プレイヤー2: 7枚</div>
    <div class="player">プレイヤー3: 7枚</div>
    <div class="player">プレイヤー4: 7枚</div>
  </div>
  <button onclick="play()">プレイ</button>

<script>
    const players = {
      "プレイヤー1": ["♠️A", "□K", "♦️Q", "♠️J", "♣️10", "♡9", "♠️8"],
      "プレイヤー2": ["♡A", "♦️K", "♡Q", "□J", "♣️10", "♥️9", "♡8"],
      "プレイヤー3": ["♠️A", "♥️K", "♦️Q", "♣️J", "♣️10", "□9", "♥️8"],
      "プレイヤー4": ["□A", "♡K", "♠️Q", "♣️J", "♠️10", "♥️9", "♠️8"],
    };
    let currentPlayer = "プレイヤー1";
    let currentIndex = 0;
    let currentCard = "";

function play() {
      // カードを出す
      if (currentIndex < players[currentPlayer].length) {
        currentCard = players[currentPlayer][currentIndex];
        currentIndex++;
      } else {
        setCurrentPlayer();
        return;
      }

// メッセージを表示
      const message = document.getElementById("message");
      message.textContent = currentPlayer + "が " + currentCard + " を出しました";

// カードを表示
      const cards = document.getElementById("cards");
      const cardDiv = document.createElement("div");
      cardDiv.classList.add("card");
      const cardP = document.createElement("p");
      cardP.textContent = currentCard;
      cardDiv.appendChild(cardP);
      cards.appendChild(cardDiv);

// プレイヤーの手札を更新
      const playerDiv = document.querySelector(".player");
      playerDiv.textContent = currentPlayer + ": " + (players[currentPlayer].length - currentIndex) + "枚";
    }

function setCurrentPlayer() {
      currentIndex = 0;
      currentPlayer = currentPlayer === "プレイヤー1" ? "プレイヤー2" : currentPlayer === "プレイヤー2" ? "プレイヤー3" : currentPlayer === "プレイヤー3" ? "プレイヤー4" : "プレイヤー1";
    }
  </script>
</body>
</html>
```

この例では、4人のプレイヤーが手札を持ち、ターンごとにカードを出すゲームを実装しています。各プレイヤーの手札はJavaScriptオブジェクト`players`に格納されており、`play()`関数を実行することでカードを出すことができます。ターンが終わると、自動的に次のプレイヤーに切り替わります。

また、カードとプレイヤーの情報はHTML上でも表示され、ゲームの進行状況がわかるようになっています。ゲームの起動は「プレイ」ボタンをクリックすることで行います。

ただし、この実装ではプレイヤーが手札を選択して出せるわけではなく、自動的にカードが出されるだけです。さらにゲームを充実させるためには、ルールやゲームエンジンの実装が必要になります。