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

No:9395

147

←

Prev Next

→

Shelmy of raging lightning
Developer User4351｜Date and time 23/7/24 12:29:52
Build time 46.502 sec｜Game capacity 3.475KB｜

Script

了解しました。以下にHTMLとJavaScriptを用いたシェルミーというゲームの実装例を示します。

荒れ狂う稲光のシェルミー

この実装では、3x3のゲーム盤が表示され、プレイヤー1と2が交互にシェルミーのような絵文字を配置していきます。シンボルが3つ揃った場合に勝利となり、盤面が満杯になった場合は引き分けとなります。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にHTMLとJavaScriptを用いたシェルミーというゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>荒れ狂う稲光のシェルミー</title>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
      margin: auto;
    }

.cell {
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>荒れ狂う稲光のシェルミー</h1>
  <div id="game-board"></div>
  <script>
    // ゲーム盤の大きさ
    const boardSize = 3;
    // プレイヤー1と2のシンボル
    const playerSymbols = ['❌', '⭕️'];
    // 現在のプレイヤー
    let currentPlayer = 0;
    // ゲーム盤の状態
    let boardState = [['', '', ''], ['', '', ''], ['', '', '']];

// ゲーム盤の生成
    const gameBoard = document.getElementById('game-board');
    for (let i = 0; i < boardSize; i++) {
      for (let j = 0; j < boardSize; j++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.addEventListener('click', () => {
          playMove(i, j);
        });
        gameBoard.appendChild(cell);
      }
    }

// 盤上の座標(x, y)にシンボルを表示する
    function displayMove(x, y) {
      const cellIndex = x * boardSize + y;
      const cell = gameBoard.children[cellIndex];
      cell.innerText = playerSymbols[currentPlayer];
    }

// プレイヤーが指定した座標に手を打つ
    function playMove(x, y) {
      if (boardState[x][y] === '') {
        boardState[x][y] = playerSymbols[currentPlayer];
        displayMove(x, y);
        checkForWin();
        currentPlayer = (currentPlayer + 1) % 2;
      }
    }

// 現在の盤面状態で勝者がいるかどうかチェックする
    function checkForWin() {
      // プレイヤーが揃う可能性のある直線の組み合わせ
      const lines = [
        [[0, 0], [0, 1], [0, 2]],
        [[1, 0], [1, 1], [1, 2]],
        [[2, 0], [2, 1], [2, 2]],
        [[0, 0], [1, 0], [2, 0]],
        [[0, 1], [1, 1], [2, 1]],
        [[0, 2], [1, 2], [2, 2]],
        [[0, 0], [1, 1], [2, 2]],
        [[0, 2], [1, 1], [2, 0]]
      ];

for (let i = 0; i < lines.length; i++) {
        const [[x1, y1], [x2, y2], [x3, y3]] = lines[i];
        if (
          boardState[x1][y1] !== '' &&
          boardState[x1][y1] === boardState[x2][y2] &&
          boardState[x1][y1] === boardState[x3][y3]
        ) {
          alert(`Player ${playerSymbols[currentPlayer]} wins!`);
          resetBoard();
          return;
        }
      }

if (boardState.flat().every(cell => cell !== '')) {
        alert('It\'s a tie!');
        resetBoard();
      }
    }

// 盤面をリセットする
    function resetBoard() {
      currentPlayer = 0;
      boardState = [['', '', ''], ['', '', ''], ['', '', '']];
      Array.from(gameBoard.children).forEach(cell => (cell.innerText = ''));
    }
  </script>
</body>
</html>
```
この実装では、3x3のゲーム盤が表示され、プレイヤー1と2が交互にシェルミーのような絵文字を配置していきます。シンボルが3つ揃った場合に勝利となり、盤面が満杯になった場合は引き分けとなります。