実現したいこと
４種類の勝利判定が正常に動作すること。
前提
Reactのチュートリアルである「三目並べ」を改造し、指定した数値でマスを生成する「'X'目並べ」を作っています。
元々コードでべた書きでマス目の数を指定していた部分を、textboxで入力した値で指定できるように変更したところ、４種類の勝利条件のうち２種類しか反応しない状態になりました。
変更した部分を戻すと問題なく動きます。
勝利判定はcalculateWinner()で行っています。
発生している問題
- 縦列が揃うと勝利
- 横列が揃うと勝利
- 左から始まる斜め列が揃うと勝利
- 右から始まる斜め列が揃うと勝利
この中のいずれか一つでも満たせば勝利判定になるのですが、「縦列」と「左から始まる斜め列」の勝利条件が正常に動作していないです。
該当のソースコード
Javascript
1ソースコード 2export default function Game() {3 const [history, setHistory] = useState([Array(9).fill(null)]);4 const [currentMove, setCurrentMove] = useState(0);5 const xIsNext = currentMove % 2 === 0;6 const currentSquares = history[currentMove];7 const [oneLine, setOneLine] = useState(""); //変更後8 //const oneLine = 5; //元々の変数定義9 10 function handlePlay(nextSquares) {11 const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];12 setHistory(nextHistory);13 setCurrentMove(nextHistory.length - 1);14 }15 16 function jumpTo(nextMove) { 17 if(nextMove == 0) {18 gameDraw = 0;19 }20 setCurrentMove(nextMove);21 for(let i = 0; i < (oneLine*oneLine); i++) {22 document.getElementById(i).style.backgroundColor = 'white'23 document.getElementById(i).style.color = 'black'24 }25 }26 27 const moves = history.map((squares, move) => {28 let description;29 if (move > 0) {30 description = 'Go to move #' + move;31 gameDraw = move;32 } else {33 description = 'Go to game start';34 gameDraw = 0;35 }36 return (37 <li key={move}>38 <button onClick={() => jumpTo(move)}>{description}</button>39 </li>40 );41 });42 43 return (44 <div className="game">45 <div className="game-masu"> //追加した文。入力値が一行分のマスの数になる。46 <input type="text" value={oneLine} onChange={(event) => setOneLine(event.target.value)}/>47 </div>48 <div className="game-board">49 <Board xIsNext={xIsNext} oneLine={oneLine} squares={currentSquares} onPlay={handlePlay} />50 </div>51 <div className="game-info">52 <ol>{moves}</ol>53 </div>54 </div>55 );56}57 58function calculateWinner(squares, oneLine) {59 let lines = [];60 for(let i = 0; i < oneLine; i++) { //勝利条件生成61 var horizontalLine = [];62 var verticalLine = [];63 var leftDiagonalLine = [];64 var rightDiagonalLine = [];65 for(let j = 0+(oneLine*i); j < oneLine+(oneLine*i); j++) { //横一行分の勝利条件66 horizontalLine.push(j);67 }68 lines.push(horizontalLine);69 for(let j = 0+i; j < (oneLine*oneLine); j+=oneLine) { //縦一行分の勝利条件70 verticalLine.push(j);71 }72 lines.push(verticalLine);73 for(let j = 0; j < (oneLine*oneLine); j+=(oneLine+1)) { //左から始まる斜め一行分の勝利条件74 leftDiagonalLine.push(j);75 }76 lines.push(leftDiagonalLine);77 for(let j = (oneLine-1); j < (oneLine*oneLine-(oneLine-1)); j+=(oneLine-1)) { //右から始まる斜め一行分の勝利条件78 rightDiagonalLine.push(j);79 }80 lines.push(rightDiagonalLine);81 }82 for (let i = 0; i < lines.length; i++) {83 for(let j = 0; j< oneLine; j++) {84 if(squares[lines[i][j]] && ( 85 (function() {86 for(let k = 0; k < oneLine; k++) {87 if (squares[lines[i][j]] !== squares[lines[i][j+k]]) {88 return false;89 }90 }91 return true;92 })()93 )){94 for(let k = 0; k < oneLine; k++) {95 document.getElementById(lines[i][j+k]).style.backgroundColor = '#dc143c';96 document.getElementById(lines[i][j+k]).style.color = 'white';97 }98 return squares[lines[i][j]];99 }100 }101 }102 return null;103}
試したこと
-
いろいろな場所でlogを確認した。入力値は問題なく受け取ることができていた。
-
AIによる解答を反映したところ、そもそもサイトが立ち上がらないエラーが起きた。
以下がサーバーログ
One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
補足情報（FW/ツールのバージョンなど）
React 9.5.1
0 コメント