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

No:2503

150

←

Prev Next

→

Comiket Participation Games
Developer User3571｜Date and time 23/6/21 18:56:54
Build time 25.562 sec｜Game capacity 3.614KB｜

Script

「絵文字大戦争」

絵文字大戦争

←

Prev　Next

→ 　

Back　

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

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

「絵文字大戦争」
<html>

<head>
  <meta charset="UTF-8">
  <title>絵文字大戦争</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      margin-top: 5%;
    }
    #board {
      display: inline-block;
      border-style: solid;
      border-color: black;
      margin-top: 5%;
      padding: 10%;
      font-size: 0.5em;
    }
    button {
      background-color: yellow;
      border-radius: 50%;
      height: 4em;
      width: 4em;
      font-size: 2em;
      border: none;
      margin: 0.5em;
      cursor: pointer;
      outline: none;
    }
    img {
      height: 4em;
      width: 4em;
    }
  </style>
</head>

<body>
  <h1>絵文字大戦争</h1>
  <div id="board"></div>
  <div>
    <button class="board_btn" id="0"></button>
    <button class="board_btn" id="1"></button>
    <button class="board_btn" id="2"></button>
  </div>
  <div>
    <button class="board_btn" id="3"></button>
    <button class="board_btn" id="4"></button>
    <button class="board_btn" id="5"></button>
  </div>
  <div>
    <button class="board_btn" id="6"></button>
    <button class="board_btn" id="7"></button>
    <button class="board_btn" id="8"></button>
  </div>
  <script>
    let player = 1;
    let board = ["", "", "", "", "", "", "", "", ""];
    const emojis = ["❌", "⭕️"];
    const boardBtns = document.querySelectorAll(".board_btn");
    const boardDiv = document.querySelector("#board");
    const switchBtn = document.createElement("button");
    switchBtn.innerHTML = "次のターン！";
    
    function drawSymbol(btnId) {
      if (board[btnId] == "") {
        board[btnId] = emojis[player - 1];
        document.getElementById(`${btnId}`).innerHTML = board[btnId];
        if (playerWon()) {
          boardDiv.innerHTML = `<h1>Player ${player}の勝ち！</h1>`;
        } else if (boardFull()) {
          boardDiv.innerHTML = `<h1>引き分け！</h1>`;
        } else {
          player = (player == 1) ? 2 : 1;
          boardDiv.innerHTML += `<h2>Player ${player}の番</h2>`;
        }
      }
    }
    
    function playerWon() {
      if ((board[0] == emojis[player - 1] && board[1] == emojis[player - 1] && board[2] == emojis[player - 1]) ||
          (board[3] == emojis[player - 1] && board[4] == emojis[player - 1] && board[5] == emojis[player - 1]) ||
          (board[6] == emojis[player - 1] && board[7] == emojis[player - 1] && board[8] == emojis[player - 1]) ||
          (board[0] == emojis[player - 1] && board[3] == emojis[player - 1] && board[6] == emojis[player - 1]) ||
          (board[1] == emojis[player - 1] && board[4] == emojis[player - 1] && board[7] == emojis[player - 1]) ||
          (board[2] == emojis[player - 1] && board[5] == emojis[player - 1] && board[8] == emojis[player - 1]) ||
          (board[0] == emojis[player - 1] && board[4] == emojis[player - 1] && board[8] == emojis[player - 1]) ||
          (board[2] == emojis[player - 1] && board[4] == emojis[player - 1] && board[6] == emojis[player - 1])) {
        return true;
      } else {
        return false;
      }
    }
    
    function boardFull() {
      for (let i = 0; i < board.length; i++) {
        if (board[i] == "") {
          return false;
        }
      }
      return true;
    }
    
    for (let i = 0; i < boardBtns.length; i++) {
      boardBtns[i].addEventListener("click", function() {
        drawSymbol(this.id);
      });
    }
    
    switchBtn.addEventListener("click", function() {
      boardDiv.innerHTML += `<h2>Player ${player}の番</h2>`;
    });
    
    boardDiv.appendChild(switchBtn);
  </script>
</body>

</html>