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

No:7421

4246

←

Prev Next

→

5channel (Japanese online forum)
Developer もちきなこ｜Date and time 23/7/7 17:33:17
Build time 24.615 sec｜Game capacity 4.535KB｜

Script

了解しました。以下は5ちゃんねる風のゲームを作成するための実装例です。

5ちゃんねる風ゲーム

このプログラムでは、3x3の盤面で〇×ゲームをプレイすることができます。スマホでも遊べるようにボタンを作成し、プレイヤーがマス目をクリックすることで手を打つことができます。勝利判定や引き分け判定も実装されています。上記のコードをコピーして、HTMLファイルとして実行してみてください。楽しんでプレイしていただければ幸いです。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下は5ちゃんねる風のゲームを作成するための実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
      background-color: #F5F5F5;
    }
    button {
      display: inline-block;
      margin: 10px;
      padding: 10px 20px;
      font-size: 20px;
      cursor: pointer;
      background-color: #F8F8F8;
      border: none;
      border-radius: 5px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <h1>5ちゃんねる風ゲーム</h1>
  <div id="game"></div>

// 盤面の大きさ
    const SIZE = 3;

// 盤面を初期化する関数
    function initBoard() {
      for (let i = 0; i < SIZE; i++) {
        gameData.board.push(new Array(SIZE).fill(null));
      }
    }

// 盤面を描画する関数
    function renderBoard() {
      const gameElement = document.querySelector("#game");
      gameElement.innerHTML = "";

for (let row = 0; row < SIZE; row++) {
        for (let col = 0; col < SIZE; col++) {
          const cell = document.createElement("button");
          cell.textContent = gameData.board[row][col] || "　"; // 空白の場合、全角スペース
          cell.addEventListener("click", () => makeMove(row, col));
          gameElement.appendChild(cell);
        }
        gameElement.appendChild(document.createElement("br"));
      }
    }

// プレイヤーがマス目をクリックした時の処理
    function makeMove(row, col) {
      if (gameData.gameOver || gameData.board[row][col]) return;

gameData.board[row][col] = gameData.currentPlayer;
      renderBoard();

if (checkWinner(row, col)) {
        gameData.gameOver = true;
        alert(`${gameData.currentPlayer}の勝利！`);
        return;
      }

if (isBoardFull()) {
        gameData.gameOver = true;
        alert("引き分け！");
        return;
      }

gameData.currentPlayer = gameData.currentPlayer === "X" ? "O" : "X";
    }

// 勝利判定を行う関数
    function checkWinner(row, col) {
      const symbols = ["X", "O"];
      for (const symbol of symbols) {
        // 行の判定
        let win = true;
        for (let i = 0; i < SIZE; i++) {
          if (gameData.board[row][i] !== symbol) {
            win = false;
            break;
          }
        }
        if (win) return true;

// 列の判定
        win = true;
        for (let i = 0; i < SIZE; i++) {
          if (gameData.board[i][col] !== symbol) {
            win = false;
            break;
          }
        }
        if (win) return true;

// 斜めの判定
        if (row === col) {
          win = true;
          for (let i = 0; i < SIZE; i++) {
            if (gameData.board[i][i] !== symbol) {
              win = false;
              break;
            }
          }
          if (win) return true;
        }

if (row + col === SIZE - 1) {
          win = true;
          for (let i = 0; i < SIZE; i++) {
            if (gameData.board[i][SIZE - 1 - i] !== symbol) {
              win = false;
              break;
            }
          }
          if (win) return true;
        }
      }

return false;
    }

// 盤面が埋まっているかどうかを判定する関数
    function isBoardFull() {
      for (const row of gameData.board) {
        for (const cell of row) {
          if (!cell) return false;
        }
      }
      return true;
    }

// ゲームの初期化を行う関数
    function initializeGame() {
      initBoard();
      renderBoard();
    }

// ゲームの初期化
    initializeGame();
  </script>
</body>
</html>
```

このプログラムでは、3x3の盤面で〇×ゲームをプレイすることができます。スマホでも遊べるようにボタンを作成し、プレイヤーがマス目をクリックすることで手を打つことができます。勝利判定や引き分け判定も実装されています。

上記のコードをコピーして、HTMLファイルとして実行してみてください。楽しんでプレイしていただければ幸いです。