// ゲーム設定
  const boardSize = 5; // ボードのサイズ (5x5)
  const squares = []; // ボードのマス
  const player = { x: 0, y: 0 }; // プレイヤーの位置 (0,0) = スタート地点
  let rollCount = 0; // サイコロを振った回数

  // ボードの作成
  const boardElement = document.getElementById("board");
  for (let i = 0; i < boardSize; i++) {
    for (let j = 0; j < boardSize; j++) {
      const square = document.createElement("div");
      square.classList.add("square");
      square.dataset.x = i;
      square.dataset.y = j;
      boardElement.appendChild(square);
      squares.push(square);
    }
  }

  // プレイヤーの表示
  const playerElement = document.createElement("div");
  playerElement.classList.add("player");
  playerElement.textContent = "P";
  squares[0].appendChild(playerElement); // プレイヤーはスタート位置に配置

  // サイコロを振るボタン
  document.getElementById("rollBtn").addEventListener("click", function() {
    // サイコロを振る（1から6のランダムな数字）
    const roll = Math.floor(Math.random() * 6) + 1;

    // 現在位置からサイコロの目を加算
    const oldX = player.x;
    const oldY = player.y;

    // プレイヤーの新しい位置を決定
    if (player.x + roll < boardSize) {
      player.x += roll;
    } else if (player.y + roll - (boardSize - player.x) <= boardSize - 1) {
      player.y += roll - (boardSize - player.x);
      player.x = boardSize - 1;
    }

    // プレイヤーの位置を更新
    updateBoard();

    // 結果の表示
    document.getElementById("result").textContent = `サイコロの目: ${roll}、現在位置: (${player.x + 1}, ${player.y + 1})`;

    rollCount++;

    // ゴール判定
    if (player.x === boardSize - 1 && player.y === boardSize - 1) {
      document.getElementById("result").textContent = `ゴール！ ${rollCount}回でゴールしました！`;
    }
  });

  // ボードの更新
  function updateBoard() {
    squares.forEach(square => square.innerHTML = ""); // ボードをリセット
    const playerSquare = squares[player.y * boardSize + player.x];
    playerSquare.appendChild(playerElement); // プレイヤーを新しい位置に移動
  }

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/game/game-sugoroku/