<html>
<head>
<title>吉田オセロ</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = Shift_JIS">
<link rel="stylesheet" href="style.css">
<script type = "text/javascript">
<!--

  const NOTHING     = 0;
  const BLACK_PIECE = 1;
  const WHITE_PIECE = 2;

  let nBoard = [
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 2, 1, 0, 0, 0],
    [0, 0, 0, 1, 2, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0]
  ];
  
  //棋譜を保存する配列  初期化したのち0番目の配列に初期盤面を代入
  let nBoardHistory = Array.from(new Array(61), () => {
    return Array.from(new Array(nBoard[0].length), () => new Array(nBoard[0].length).fill(0));
  });
  
  for(let nLoop = 0; nLoop < nBoard.length; nLoop++){
  
    for(let nLoop2 = 0; nLoop2 < nBoard[0].length; nLoop2++){
      
      nBoardHistory[0][nLoop][nLoop2] = nBoard[nLoop][nLoop2];
    }
  }
  
  let putPlaceHistory = new Array(61);
  for(let nLoop = 0; nLoop < putPlaceHistory.length; nLoop++){
  
    putPlaceHistory[nLoop] = new Array(2).fill(0);
  }
  
  let blnIsBTurn = true;      //現在のターンを判断するboolean
  let blnGameOver = false;    //ゲームオーバーかどうかを判断するboolean
  let nTurn = 0;              //現在のターン数を判断するnumber
  let backCount = 0;          //「一手戻る」を使った回数をカウントする
  const BACK_LIMIT = 2;       //「一手戻る」を使える回数の上限
  let blnIsCPUTurn = false;   //CPUのターンかどうかを判断するboolean
  let blnIsCPUMode = false;   //CPU対戦かどうかを判断するboolean
  let blnCPUIsBlack = false;  //CPUが先攻かどうかを判断するboolean
  let blnSkippingNow = false
  
  
  //メニュー画面を消す関数
  const leaveMenu = () => {
    
    document.getElementById("menu").classList.add("leave");
    setTimeout(() => {
  
      document.getElementById("menu").classList.add("display-none");
    }, 500);
  }
  
  
  //駒を表示する関数
  const dispPiece = () => {
  
    for(let nLoop = 0; nLoop < nBoard.length; nLoop++){
    
      for(let nLoop2 = 0; nLoop2 < nBoard[0].length; nLoop2++){
        
        const targetTd = document.getElementById(`td${nLoop}${nLoop2}`);
      
        //nBoardの値を参照し、駒のdiv要素の表示・非表示を操作
        if(nBoard[nLoop][nLoop2] === WHITE_PIECE){
        
          targetTd.children[0].classList.remove("display-none");
          targetTd.children[1].classList.add("display-none");
        }else if(nBoard[nLoop][nLoop2] === BLACK_PIECE){
        
          targetTd.children[0].classList.add("display-none");
          targetTd.children[1].classList.remove("display-none");
        }else{
        
          targetTd.children[0].classList.add("display-none");
          targetTd.children[1].classList.add("display-none");
        }
      }
    }
  }
  
  
  //駒を表示する関数(棋譜用)
  const dispPieceResult = (targetBoard, turn) => {
  
    for(let nLoop = 0; nLoop < targetBoard.length; nLoop++){
    
      for(let nLoop2 = 0; nLoop2 < targetBoard[0].length; nLoop2++){
        
        const targetTd = document.getElementById(`td${nLoop}${nLoop2}result${turn}`);
      
        if(targetBoard[nLoop][nLoop2] === WHITE_PIECE){
        
          targetTd.children[0].classList.remove("display-none");
          targetTd.children[1].classList.add("display-none");
        }else if(targetBoard[nLoop][nLoop2] === BLACK_PIECE){
        
          targetTd.children[0].classList.add("display-none");
          targetTd.children[1].classList.remove("display-none");
        }else if(targetBoard[nLoop][nLoop2] === NOTHING){
        
          targetTd.children[0].classList.add("display-none");
          targetTd.children[1].classList.add("display-none");
        }
      }
    }
  }
  
  
  //駒を置く関数
  const putPiece = (id) => {
    
    //駒を置いた場所を取得
    const nBoardRow = id.split("")[2];
    const nBoardCol = id.split("")[3];
    
    if(blnIsBTurn && nBoard[nBoardRow][nBoardCol] === NOTHING){

      nBoard[nBoardRow][nBoardCol] = BLACK_PIECE;
    }else if(!blnIsBTurn && nBoard[nBoardRow][nBoardCol] === NOTHING){
    
      nBoard[nBoardRow][nBoardCol] = WHITE_PIECE;
    }else{
      
      return false;
    }
    return true;
  }
  
  
  //駒をひっくり返す関数
  const flipPiece = (id, canPut, nBoard, onlyCheck) => {
    
    //駒が置けた時だけ走る
    if(canPut){
    
      //駒を置いた場所を取得
      const nTdIdRow = parseInt(id.split("")[2], 10);
      const nTdIdCol = parseInt(id.split("")[3], 10);
      
      const numBlack = document.getElementById("numBlack");
      const numWhite = document.getElementById("numWhite");
      
      let nFlipCount = 0;
      
      //これらの方向に挟めているかどうかを確認する
      const nDirections = [
        [-1, -1], [-1, 0], [-1, 1],
        [ 0, -1],          [ 0, 1],
        [ 1, -1], [ 1, 0], [ 1, 1]
      ];

      nDirections.forEach((dir) => {
        
        let nBoardRow = nTdIdRow;
        let nBoardCol = nTdIdCol;
        
        //ひっくりかえせる場所を保存
        let nCanFlipPieces = [];
          
        let blnFindEnemyPiece = false;
        
        while((nBoardRow + dir[0] > -1 && nBoardCol + dir[1] > -1) && (nBoardRow + dir[0] < 8 && nBoardCol + dir[1] < 8)){    //探索が盤面の外に行くまで
        
          nBoardRow += dir[0];
          nBoardCol += dir[1];
          
          if(blnIsBTurn){                             //黒のターンなら
          
            if(nBoard[nBoardRow][nBoardCol] === WHITE_PIECE){
            
              nCanFlipPieces.push([nBoardRow, nBoardCol]);            //白を見つけたらそのマスの場所を覚える
            }else if(nBoard[nBoardRow][nBoardCol] === BLACK_PIECE){
            
              blnFindEnemyPiece = true;               //黒を見つけたらマスの場所を覚えたままwhile文終わり
              break;
            }else{
              
              nCanFlipPieces = [];                    //何もなかったらマスの場所を忘れてwhile文終わり
              break;
            }
          }else{
          
            if(nBoard[nBoardRow][nBoardCol] === BLACK_PIECE){         //白のターンなら
            
              nCanFlipPieces.push([nBoardRow, nBoardCol]);
            }else if(nBoard[nBoardRow][nBoardCol] === WHITE_PIECE){   //黒を見つけたらそのマスの場所を覚える
          
              blnFindEnemyPiece = true;               //白を見つけたらマスの場所を覚えたままwhile文終わり
              break;
            }else{
            
              nCanFlipPieces = [];                    //何もなかったらマスの場所を忘れてwhile文終わり
              break;
            }
          }
        }
        
        if(nCanFlipPieces !== []){                    //ひっくり返す箇所が一ヵ所でもあれば
          nCanFlipPieces.forEach((place) => {
            
            if(blnFindEnemyPiece && !onlyCheck){      //searchPutPlaceから呼び出してるとき(onlyCheckが真の時)はnBoardを書き換えない
              
              //駒を返す処理
              blnIsBTurn ? nBoard[place[0]][place[1]] = BLACK_PIECE : nBoard[place[0]][place[1]] = WHITE_PIECE;
              putPlaceHistory[nTurn][0] = nTdIdRow;
              putPlaceHistory[nTurn][1] = nTdIdCol;
              document.getElementById(`td${place[0]}${place[1]}`).classList.add("reverse");
              setTimeout(() => {
                document.getElementById(`td${place[0]}${place[1]}`).classList.remove("reverse");
              }, 300);
            }
            
            if(blnFindEnemyPiece) nFlipCount++;
          });
        }
      });
      
      if(nFlipCount === 0){
      
        nBoard[nTdIdRow][nTdIdCol] = NOTHING;
        return false;     //空いてるマスだけどひっくり返せないからfalse
      }else if(!onlyCheck){
        
        saveBoardHistory();     //これをifの外に出すと一手戻る処理がうまくいかなくなる(原因不明)
      }
      
      countPiece();
      return true;        //空いてるマスだし返せるからtrue
      
    }else{
    
      return false;       //マスが空いてないからfalse
    }
  }
  
  
  //盤面上の駒の数をカウントする関数
  const countPiece = () => {
    
    let nBlackCount = 0;
    let nWhiteCount = 0;
  
    for(let nLoop = 0; nLoop < nBoard.flat().length; nLoop++){
    
      if(nBoard.flat()[nLoop] === BLACK_PIECE){
      
        nBlackCount++;
      }else if(nBoard.flat()[nLoop] === WHITE_PIECE){
      
        nWhiteCount++;
      }
    }
    
    //画面左上の枚数表示を更新
    numBlack.textContent = `0${nBlackCount}`.substr(-2);
    numWhite.textContent = `0${nWhiteCount}`.substr(-2);
  }
  
  
  //ターンを変える関数
  const changeTurn = (flipped) => {
  
    if(flipped){
      blnIsBTurn = !blnIsBTurn;
      if(blnIsCPUMode) blnIsCPUTurn = !blnIsCPUTurn;
      
      for(let nLoop = 0; nLoop < nBoard.length; nLoop++){
   
        for(let nLoop2 = 0; nLoop2 < nBoard[0].length; nLoop2++){
       
          document.getElementById(`td${nLoop}${nLoop2}`).children[2].classList.add("display-none");   //置ける場所のマーカーをすべて消す
        }
      }
      
      //「黒のターン」「白のターン」表記を切り替え
      document.querySelector(".disp.turn-black").classList.toggle("display-none");
      document.querySelector(".disp.turn-white").classList.toggle("display-none");
    }
  }
  
  
  //置ける場所を調べる関数
  const searchPutPlace = (skipped) => {
    
    let isPossibleToPut = false;
    let nBoard_temp = nBoard.concat();
  
    for(let nLoop = 0; nLoop < nBoard.length; nLoop++){
    
      for(let nLoop2 = 0; nLoop2 < nBoard[0].length; nLoop2++){

        let strTdId = `td${nLoop}${nLoop2}`;
        let place = false;
        
        place = flipPiece(strTdId, nBoard_temp[nLoop][nLoop2] === NOTHING, nBoard_temp, true);
          
        if(place){
          
          document.getElementById(strTdId).children[2].classList.remove("display-none");      //置ける場所のマーカーを表示する(CPU対戦モードのCPUターンなら出ない)
          isPossibleToPut = true;
        }
      }
    }
    
    if(!isPossibleToPut){
      
      if(skipped ||                                       //(ボタンを押された場合を除く)2回目のスキップか
         nBoard.flat().indexOf(NOTHING) === -1 ||         //盤面が埋まるか
         nBoard.flat().indexOf(BLACK_PIECE) === -1 ||     //黒の駒が無くなるか
         nBoard.flat().indexOf(WHITE_PIECE) === -1){      //白の駒が無くなれば
         
        gameover();                                       //ゲームオーバー
      }else{
        
        skipTurn();                                       //でなければスキップ
      }
    }
  }
  
  
  //ターンをスキップする関数
  const skipTurn = () => {
      
    blnSkippingNow = true;
    const dispSkip = document.querySelector(".disp.skip");
    const dispTurnWhite = document.querySelector(".disp.turn-white");
    const dispTurnBlack = document.querySelector(".disp.turn-black");
    const markers = document.querySelectorAll(".div_canPutMarker");
    const skipBtn = document.getElementById("skipBtn");
    const backBtn = document.getElementById("backBtn");
    
    markers.forEach((marker) => {
    
      marker.classList.add("display-none");
    });
    
    dispSkip.classList.remove("display-none");
    skipBtn.classList.add("cannotUseBtn");                    //スキップ中は「スキップ」ボタンおよび「一手戻る」ボタンが押せない
    skipBtn.classList.remove("btn");
    backBtn.classList.add("cannotUseBtn");
    backBtn.classList.remove("btn");
    
    if(dispTurnBlack.classList.contains("display-none")){
    
      dispTurnWhite.classList.add("display-none");
      setTimeout(() => {
      
        dispSkip.classList.add("display-none");
        dispTurnWhite.classList.remove("display-none");
      }, 2000);
    }else{
    
      dispTurnBlack.classList.add("display-none");
      setTimeout(() => {
      
        dispSkip.classList.add("display-none");
        dispTurnBlack.classList.remove("display-none");
      }, 2000);
    }
      
    setTimeout(() => {
      
      changeTurn(true);
      searchPutPlace(true);
      if(blnIsCPUTurn) enemyCPU();                    //CPUの手によってスキップになったときはもう一度CPUに動いてもらう
      blnSkippingNow = false;
      skipBtn.classList.remove("cannotUseBtn");
      skipBtn.classList.add("btn");
      backBtn.classList.remove("cannotUseBtn");
      backBtn.classList.add("btn");
    }, 2000);
  }
  
  
  //直前に置いた場所をハイライトする関数
  const putPlaceLatest = (id) => {
    
    const highlightedTd = document.querySelector(".highlight");
    if(highlightedTd !== null) highlightedTd.classList.remove("highlight");
  
    const targetTd = document.getElementById(id);
    targetTd.classList.add("highlight");
  }
  
  
  //ゲームオーバー時の処理をする関数
  const gameover = () => {
    
    if(!blnGameOver){
      displayResultList();      //ゲームオーバーになった時の一回だけ棋譜画面を生成(displayResultList内にcreateElementが含まれているため)
      displayResult();
    }
    blnGameOver = true;
      
    const dispTurnBlack = document.querySelector(".disp.turn-black");
    const dispTurnWhite = document.querySelector(".disp.turn-white");
    const dispGameOver = document.querySelector(".disp.gameover");
    
    dispTurnBlack.classList.add("display-none");
    dispTurnWhite.classList.add("display-none");
    dispGameOver.classList.remove("display-none");
    
    const markers = document.querySelectorAll(".div_canPutMarker");
    
    markers.forEach((marker) => {
    
      marker.classList.add("display-none");
    });
    
    const dialog = document.querySelector("dialog");
    const closeDialogBtn = document.getElementById("closeDialogBtn");
    const numBlack = parseInt(document.getElementById("numBlack").textContent, 10);
    const numWhite = parseInt(document.getElementById("numWhite").textContent, 10);
    const resultMessage = document.getElementById("resultMessage");
    
    resultMessage.innerText = "";
    let resultMessage_temp = "";
    
    if(numBlack > numWhite && blnIsCPUMode && blnCPUIsBlack){           //「CPUと対戦(後攻)」モードで黒(CPU)が勝った時
    
      resultMessage_temp += "CPUの勝ち";
    }else if(numBlack > numWhite && blnIsCPUMode && !blnCPUIsBlack){    //「CPUと対戦(先攻)」モードで黒(プレイヤー)が勝った時
    
      resultMessage_temp += "プレイヤーの勝ち";
    }else if(numBlack > numWhite && !blnIsCPUMode){                     //「二人で対戦」モードで黒が勝った時
    
      resultMessage_temp += "黒の勝ち";
    }else if(numBlack < numWhite && blnIsCPUMode && blnCPUIsBlack){     //「CPUと対戦(後攻)」モードで白(プレイヤー)が勝った時
    
      resultMessage_temp += "プレイヤーの勝ち"
    }else if(numBlack < numWhite && blnIsCPUMode && !blnCPUIsBlack){    //「CPUと対戦(先攻)」モードで白(CPU)が勝った時
    
      resultMessage_temp += "CPUの勝ち"
    }else if(numBlack < numWhite && !blnIsCPUMode){                     //「二人で対戦」モードで白が勝った時
    
      resultMessage_temp += "白の勝ち";
    }else{
    
      resultMessage_temp += "引き分け";
    }
    
    resultMessage_temp += `\n●: ${numBlack}枚`;
    resultMessage_temp += `\n◯: ${numWhite}枚`;
    
    resultMessage.innerText += resultMessage_temp;
    
    dialog.show();                                  //ダイアログを表示

    closeDialogBtn.addEventListener("click", () => {
    
      dialog.close();
    });
    
    //各種ボタンの書き換え、非活性化
    const retireBtn = document.getElementById("retireBtn");
    retireBtn.textContent = "戦績を見る";
    
    const skipBtn = document.getElementById("skipBtn");
    skipBtn.classList.add("cannotUseBtn");
    skipBtn.classList.remove("btn");
    
    const backBtn = document.getElementById("backBtn");
    backBtn.classList.add("cannotUseBtn");
    backBtn.classList.remove("btn");
  }
  
  
  //盤面をnBoardHistoryに保存する関数
  const saveBoardHistory = () => {
  
    for(let nLoop = 0; nLoop < nBoard.length; nLoop++){
    
      for(let nLoop2 = 0; nLoop2 < nBoard[0].length; nLoop2++){
      
        nBoardHistory[nTurn + 1][nLoop][nLoop2] = nBoard[nLoop][nLoop2];
      }
    }
  }
  
  
  //一手戻る関数
  const backTurn = () => {
    
    //CPUモードなら2手戻る
    blnIsCPUMode ? backCount += 2 : backCount++;
    blnIsCPUMode ? nTurn -= 2 : nTurn--;
    
    for(let nLoop = 0; nLoop < nBoard.length; nLoop++){
    
      for(let nLoop2 = 0; nLoop2 < nBoard[0].length; nLoop2++){
        
          nBoard[nLoop][nLoop2] = nBoardHistory[nTurn][nLoop][nLoop2];
      }
    }
    
    changeTurn(true);
    if(blnIsCPUMode) changeTurn(true);
    dispPiece();
    searchPutPlace(false);
    if(nTurn - 1 >= 0){
      
      putPlaceLatest(`td${putPlaceHistory[nTurn - 1][0]}${putPlaceHistory[nTurn - 1][1]}`);     //ハイライトしているマスも前のターンのものに戻す
    }else{
    
      const highlightedTd = document.querySelector(".highlight");                               //最初のターンまで戻ったらハイライトはせずに消すだけ
      if(highlightedTd !== null) highlightedTd.classList.remove("highlight");
    }
  
    if(backCount === 2 || nTurn === 0){             //最初のターンに行き着いたらボタンを非活性化
      
      backBtn.classList.add("cannotUseBtn");
      backBtn.classList.remove("btn");    
    }
  }
  
  
  //対戦相手CPUの動きを定義する関数
  const enemyCPU = () => {
    
    //置けるマスをすべて取得
    const canPutPlace = document.querySelectorAll(".div_canPutMarker:not(.display-none)");
    
    //CPUのターン中は「一手戻る」ボタンに触れないようにする
    const backBtn = document.getElementById("backBtn");
    backBtn.classList.add("cannotUseBtn");
    backBtn.classList.remove("btn");
    
    if(canPutPlace.length !== 0){
      
      let assessments = new Array(canPutPlace.length);
      
      for(let nLoop = 0; nLoop < canPutPlace.length; nLoop++){
        
        if(blnIsCPUMode && blnIsCPUTurn) canPutPlace[nLoop].classList.add("display-none");    //CPUのターンの置ける場所の表示を消す
        let td = canPutPlace[nLoop].closest("td");
        
        let nBoardRow = parseInt(td.id.split("")[2], 10);
        let nBoardCol = parseInt(td.id.split("")[3], 10);
        
        if((nBoardRow === 0 || nBoardRow === 7) && (nBoardCol === 0 || nBoardCol === 7)){         //角に最も優先的に打つ
        
          assessments[nLoop] = 5;
        }else if((nBoardRow === 0 || nBoardRow === 7) || (nBoardCol === 0 || nBoardCol === 7) &&
                 (2 <= nBoardRow && nBoardRow <= 5) || (2 <= nBoardCol && nBoardCol <= 5)){                       //内側4マスの端は打ちたい
        
          assessments[nLoop] = 4;
        }else if((nBoardRow === 1 || nBoardRow === 6) && (nBoardCol === 1 || nBoardCol === 6)){   //隅のななめ内側のマスには基本打たない(X打ちをしない)
        
          assessments[nLoop] = 1;
        }else if((nBoardRow === 0 || nBoardRow === 1 || nBoardRow === 6 || nBoardRow === 7) &&    //隅の横隣のマスも打ちたくない(C打ちをしたくない)
                  nBoardCol === 0 || nBoardCol === 1 || nBoardCol === 6 || nBoardCol === 7){
          
          assessments[nLoop] = 2;
        }else{
          
          assessments[nLoop] = 3;                                 //他は打つ
        }
      }
      
      let bestPlace = assessments.reduce((a, b) => Math.max(a, b));
         
      setTimeout(() => {           //駒を置く
      
        const bestPlaceTd = canPutPlace[assessments.indexOf(bestPlace)].closest("td");
        
        putPiece(bestPlaceTd.id);
        let flipped = flipPiece(bestPlaceTd.id, true, nBoard, false);
        changeTurn(flipped);
        if(flipped){
          nTurn++;
          backCount = 0;
        }
        if((blnCPUIsBlack && nTurn !== 1) || !blnCPUIsBlack){
          
          backBtn.classList.remove("cannotUseBtn");     //ターンが終わるときに戻るボタンを復活させる
          backBtn.classList.add("btn");                 //ただし、CPUが先行の時の最初のプレイヤーターンは復活させない
        }
        dispPiece();
        searchPutPlace(false);
        putPlaceLatest(bestPlaceTd.id);
      }, 700);
    }
  }
  
  
  //棋譜を一覧表示する関数
  const displayResultList = () => {
  
    const resultDiv = document.getElementById("result_list");
    
    //一覧表示用の盤面を作成
    for(let nLoop = 0; nLoop < nBoardHistory.length; nLoop++){
      
      let table = document.createElement("table");                        //tableをcreate
      resultDiv.appendChild(table);
      table.setAttribute("id", `tableResult${nLoop}`);
      table.classList.add("tableResults");
    
      for(let nLoop2 = 0; nLoop2 < nBoard.length; nLoop2++){
      
        let tr = document.createElement("tr");                            //tableにtrをappend
        table.appendChild(tr);
        
        for(let nLoop3 = 0; nLoop3 < nBoard[0].length; nLoop3++){
        
          let td = document.createElement("td");                          //trにtdをappend
          tr.appendChild(td);
          td.setAttribute("id", `td${nLoop2}${nLoop3}result${nLoop}`);
          
          let div_piece_white = document.createElement("div");
          let div_piece_black = document.createElement("div");
          let div_canPutMarker = document.createElement("div");
          td.appendChild(div_piece_white);
          td.appendChild(div_piece_black);
          td.appendChild(div_canPutMarker);
          div_piece_white.setAttribute("class", "div_piece_white");
          div_piece_black.setAttribute("class", "div_piece_black");
          div_canPutMarker.setAttribute("class", "div_canPutMarker");
          div_canPutMarker.classList.add("display-none");
        }
      }
      
      dispPieceResult(nBoardHistory[nLoop], nLoop);               //nBoardHistoryから棋譜を持ってきて表示する
      if(nBoardHistory[nLoop].flat().indexOf(1) === -1 &&         //ただし、初期化されたまま(0しかない盤面)だったら表示しない
         nBoardHistory[nLoop].flat().indexOf(2) === -1){
      
        table.classList.add("display-none");
      }
      
      if(nLoop > 0){
      
        const putPlace = document.getElementById(`td${putPlaceHistory[nLoop - 1][0]}${putPlaceHistory[nLoop - 1][1]}result${nLoop}`);
        putPlace.classList.add("highlight");
      }
    }
    
    resultDiv.appendChild(document.createElement("br"));          //見た目を整えるために最後にbrタグを追加
  }
  
  //現在表示している棋譜のターン数を表すnumber
  let displayTurn = 0;
  
  //棋譜を一つずつ表示する関数
  const displayResult = (strStep) => {
    
    const resultDiv = document.getElementById("result");
    let tableResult = null;
    const nBoardHistory_display = document.querySelectorAll("#result_list .tableResults:not(.display-none)");	//棋譜が保存されているnBoardHistoryをすべて取得
    const currentTurnResult = document.getElementById("currentTurnResult");										//現在表示している棋譜のターン数を表示
    const totalTurnResult = document.getElementById("totalTurnResult");											//棋譜の合計ターン数を表示
    
    totalTurnResult.textContent = nBoardHistory_display.length;
    
    //棋譜を一覧から取得、複製してappendする
    if(strStep === "next"){                                                                         //「次へ」ボタンが押されてたら
    
      displayTurn++;
      currentTurnResult.textContent = parseInt(currentTurnResult.textContent, 10) + 1;
      
      tableResult = document.getElementById(`tableResult${displayTurn}`).cloneNode(true);     //次のターンの棋譜を取得、複製
      
      document.getElementById("previousTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("previousTurnBtn").classList.add("btn");
      document.getElementById("decaPreviousTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("decaPreviousTurnBtn").classList.add("btn");
      
    }else if(strStep === "previous"){                                                               //「前へ」ボタンが押されてたら
    
      displayTurn--;
      currentTurnResult.textContent = parseInt(currentTurnResult.textContent, 10) - 1;
      
      tableResult = document.getElementById(`tableResult${displayTurn}`).cloneNode(true);     //前のターンの棋譜を取得、複製
      
      document.getElementById("nextTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("nextTurnBtn").classList.add("btn");
      document.getElementById("decaNextTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("decaNextTurnBtn").classList.add("btn");
      
    }else if(strStep === "decaNext"){                                                               //「→→」ボタンが押されてたら
      
      displayTurn += 10;                                                                      //10ターン後の棋譜を取得、複製
      currentTurnResult.textContent = parseInt(currentTurnResult.textContent, 10) + 10;
      
      if(displayTurn > nBoardHistory_display.length - 2){
        
        displayTurn = nBoardHistory_display.length - 1;                                       //(最終ターン数 - 10)ターンから最終ターンの棋譜から移動するときは
      	currentTurnResult.textContent = nBoardHistory_display.length;
      }                                                                                       //最終ターンの棋譜を取得、複製
      
      tableResult = document.getElementById(`tableResult${displayTurn}`).cloneNode(true);
      
      document.getElementById("previousTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("previousTurnBtn").classList.add("btn");
      document.getElementById("decaPreviousTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("decaPreviousTurnBtn").classList.add("btn");
      
    }else if(strStep === "decaPrevious"){                                                           //「←←」ボタンが押されてたら
    
      displayTurn -= 10;                                                                      //10ターン前の棋譜を取得、複製
      currentTurnResult.textContent = parseInt(currentTurnResult.textContent, 10) - 10;
      
      if(displayTurn < 0){
        
        displayTurn = 0;                                                                      //1から10ターン目の棋譜から移動するときは1ターン目の棋譜を取得、複製
      	currentTurnResult.textContent = 1;
      }
      
      tableResult = document.getElementById(`tableResult${displayTurn}`).cloneNode(true);
      
      document.getElementById("nextTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("nextTurnBtn").classList.add("btn");
      document.getElementById("decaNextTurnBtn").classList.remove("cannotUseBtn");
      document.getElementById("decaNextTurnBtn").classList.add("btn");
    }else{
      
      tableResult = document.getElementById(`tableResult0`).cloneNode(true);                  //最初は1ターン目の棋譜を表示
    }
      
    if(displayTurn > nBoardHistory_display.length - 2){
    
      document.getElementById("nextTurnBtn").classList.add("cannotUseBtn");                 //最後のターンの棋譜まで来たら「次へ」ボタンを非活性化
      document.getElementById("nextTurnBtn").classList.remove("btn");
      document.getElementById("decaNextTurnBtn").classList.add("cannotUseBtn");             //最後のターンの棋譜まで来たら「→→」ボタンを非活性化
      document.getElementById("decaNextTurnBtn").classList.remove("btn");
    }
      
    if(displayTurn === 0){
    
      document.getElementById("previousTurnBtn").classList.add("cannotUseBtn");             //最初のターンの棋譜まで来たら「前へ」ボタンを非活性化
      document.getElementById("previousTurnBtn").classList.remove("btn");
      document.getElementById("decaPreviousTurnBtn").classList.add("cannotUseBtn");         //最初のターンの棋譜まで来たら「←←」ボタンを非活性化
      document.getElementById("decaPreviousTurnBtn").classList.remove("btn");
      currentTurnResult.textContent = 1;
    }
    
    resultDiv.lastElementChild.remove();                                                    //今ある棋譜は消す
    resultDiv.appendChild(tableResult);                                                     //取得してきた棋譜を表示
  }
  
// -->
</script>
</head>
<body>
  
  <div id = "menu">
    <p id = "title">吉田オセロ</p>
    <div id = "cpuBattleBtn_first" class = "btn">CPUと対戦(先攻)</div>
    <div id = "cpuBattleBtn_last" class = "btn">CPUと対戦(後攻)</div>
    <div id = "pvpBattleBtn" class = "btn">二人で対戦</div>
  </div>
  <br>
  
  <div class="disp turn-black">
    <ul class="loop-area">
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
    </ul>
    <ul class="loop-area">
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
    </ul>
    <ul class="loop-area">
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
        <li class="content">黒のターン</li>
    </ul>
  </div>
  
  <div class="disp turn-white display-none">
    <ul class="loop-area">
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
    </ul>
    <ul class="loop-area">
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
    </ul>
    <ul class="loop-area">
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
        <li class="content">白のターン</li>
    </ul>
  </div>
  
  <div class="disp gameover display-none">
    <ul class="loop-area">
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
    </ul>
    <ul class="loop-area">
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
    </ul>
    <ul class="loop-area">
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
        <li class="content">ゲーム終了</li>
    </ul>
  </div>
  
  <div class="disp skip display-none">スキップ</div>
  
  <br>
  
  <div class = "board-and-score-wrapper">
    <span class = "score-piece-black"></span>
    <span class = "score-black">: <span id = "numBlack">02</span>枚</span>
    <table id = "board"></table>
    <span class = "score-piece-white"></span>
    <span class = "score-white">: <span id = "numWhite">02</span>枚</span>
  </div>
  
  <br><br>
  
  <span id = "retireBtn" class = "btn">ゲームを終了する</span>
  <span id = "skipBtn" class = "btn">スキップ</span>
  <span id = "resetBtn" class = "btn">メニュー画面に戻る</span>
  <span id = "backBtn" class = "cannotUseBtn">一手戻る</span>
  
  <dialog>
    <div id = "resultMessage"></div><br>
    <div id = "showResultBtn" class = "btn">棋譜を見る</div><br><br>
    <div id = "closeDialogBtn" class = "btn">戦績を閉じる</div>
  </dialog>
  <div id = "result_list" class = "display-none">
    <span class = "arrow-left" title = "戻る"></span><br>
    <span id = "displayResultBtn" class = "btn">一つずつ表示する</span>
  </div>
  <div id = "result" class = "display-none">
    <span class = "arrow-left" title = "戻る"></span><br>
    <span id = "displayResultListBtn" class = "btn">一覧表示する</span>
    <div class = "turnChangeBtn-wrapper">
      <span id = "decaPreviousTurnBtn" class = "btn">←←</span>
      <span id = "previousTurnBtn" class = "cannotUseBtn">← 前へ</span>
      <span id = "nextTurnBtn"class = "btn">次へ →</span>
      <span id = "decaNextTurnBtn"class = "btn">→→</span>
    </div>
    <div id = "turnResult"><span id = "currentTurnResult"></span>/<span id = "totalTurnResult"></span></div>
    <div></div>
  </div>
</body>
<script language = "JavaScri