Othello (board game)'s game

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

No:2043

2229

←

Prev Next

→

Othello (board game)
Developer User3469｜Date and time 23/6/19 22:18:10
Build time 81.556 sec｜Game capacity 7.159KB｜

Script

オセロとは、8×8のマス目に対戦相手と交互に自分の駒を置いていき、最終的に自分の駒が多いほうが勝利するゲームです。このプログラムでは、黒と白の2人が交互に駒を置いていき、自分の駒で相手の駒を挟むことで裏返すことができます。駒を置けない場合は、パスして相手にターンを譲ります。どちらかのプレイヤーが駒を置けなくなった場合や、全てのマスが埋まった場合にゲーム終了となり、駒の数が多いほうが勝利となります。スマホでも操作可能で、絵文字を多用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>オセロゲーム</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      #board {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
        border: 2px solid black;
        margin: 0 auto;
      }
      .square {
        width: 30px;
        height: 30px;
        border: 1px solid black;
        font-size: 25px;
        text-align: center;
        cursor: pointer;
      }
      #turn {
        font-size: 20px;
        margin-top: 10px;
        text-align: center;
      }
      .black {
        color: black;
      }
      .white {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="board"></div>
    <div id="turn"></div>
    <script>
      const board = document.getElementById("board");
      const turn = document.getElementById("turn");
      const squares = [];
      const SIDES = ["black", "white"];
      let currentSide = 0;
      let isGameOver = false;

// create the board
      for (let i = 0; i < 64; i++) {
        const square = document.createElement("div");
        square.classList.add("square");
        square.dataset.index = i;
        square.addEventListener("click", handleClick);
        squares.push(square);
        board.appendChild(square);
      }

// initialize the game
      updateTurn();
      updateSquares();
      
      // handle clicks
      function handleClick(event) {
        if (isGameOver) return;
        const square = event.target;
        const index = parseInt(square.dataset.index);
        if (!isValidMove(index)) return;
        const flipped = getFlippedSquares(index);
        flipSquares(flipped);
        placePiece(index);
        endTurn();
        updateSquares();
        if (isGameOver) showResult();
      }

// update the turn indicator
      function updateTurn() {
        turn.textContent = `Turn: ${SIDES[currentSide]} ${getScore()}`;
        turn.classList.remove("black", "white");
        turn.classList.add(SIDES[currentSide]);
      }

// update the squares with current pieces
      function updateSquares() {
        squares.forEach((square) => {
          const index = parseInt(square.dataset.index);
          const hasBlack = hasPiece(index, 0);
          const hasWhite = hasPiece(index, 1);
          square.classList.remove("black", "white");
          if (hasBlack) square.classList.add("black");
          if (hasWhite) square.classList.add("white");
        });
      }

// check if the move is valid
      function isValidMove(index) {
        const hasPiece = hasPiece(index, currentSide);
        if (hasPiece) return false;
        const flipped = getFlippedSquares(index);
        if (flipped.length === 0) return false;
        return true;
      }

// get the squares that will be flipped
      function getFlippedSquares(index) {
        const flipped = [];
        const directions = [-9, -8, -7, -1, 1, 7, 8, 9];
        for (let direction of directions) {
          let curIndex = index + direction;
          let hasOpponentPiece = false;
          let tmpFlipped = [];
          while (curIndex >= 0 && curIndex < 64 && (curIndex % 8) !== 0 && ((curIndex + 1) % 8) !== 0) {
            const hasBlack = hasPiece(curIndex, 0);
            const hasWhite = hasPiece(curIndex, 1);
            if (hasOpponentPiece && (hasBlack || hasWhite)) {
              tmpFlipped.forEach(i => flipped.push(i));
              break;
            }
            if (!hasOpponentPiece && hasPiece(curIndex, getOpponentSide())) {
              hasOpponentPiece = true;
            }
            if (hasOpponentPiece && !hasPiece(curIndex, getOpponentSide())) {
              tmpFlipped.push(curIndex);
            } else {
              break;
            }
            curIndex += direction;
          }
        }
        return flipped;
      }

// flip the squares
      function flipSquares(squares) {
        squares.forEach((index) => {
          switchPiece(index);
        });
      }

// place the piece on the board
      function placePiece(index) {
        setPiece(currentSide, index);
      }

// end the turn
      function endTurn() {
        if (isGameOver) return;
        if (isNoValidMove()) {
          switchSide();
          if (isNoValidMove()) {
            isGameOver = true;
          }
        } else {
          switchSide();
        }
      }

// get the score of each side
      function getScore() {
        let blackScore = 0;
        let whiteScore = 0;
        for (let i = 0; i < 64; i++) {
          if (hasPiece(i, 0)) blackScore++;
          if (hasPiece(i, 1)) whiteScore++;
        }
        return `(${blackScore}:${whiteScore})`;
      }

// switch the side
      function switchSide() {
        currentSide = getOpponentSide();
        updateTurn();
      }

// check if there is no valid move
      function isNoValidMove() {
        for (let i = 0; i < 64; i++) {
          if (isValidMove(i)) return false;
        }
        return true;
      }

// get the opponent side
      function getOpponentSide() {
        return currentSide === 0 ? 1 : 0;
      }

// set the piece on the board
      function setPiece(side, index) {
        sessionStorage.setItem(index.toString(), side.toString());
      }

// switch the piece on the board
      function switchPiece(index) {
        const side = parseInt(sessionStorage.getItem(index.toString()));
        const newSide = side === 0 ? 1 : 0;
        sessionStorage.setItem(index.toString(), newSide.toString());
      }

// check if the square has the piece of the side
      function hasPiece(index, side) {
        const value = sessionStorage.getItem(index.toString());
        if (value === null) return false;
        return parseInt(value) === side;
      }

// show the result
      function showResult() {
        const blackScore = parseInt(getScore().split(":")[0].slice(1));
        const whiteScore = parseInt(getScore().split(":")[1].slice(0, -1));
        let result = "";
        if (blackScore > whiteScore) {
          result = "黒の勝利！🎉";
        } else if (blackScore < whiteScore) {
          result = "白の勝利！🎉";
        } else {
          result = "引き分け！😅";
        }
        turn.textContent = result;
      }
    </script>
  </body>
</html>