kagura/ReactLearn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

TicTacToe: Prettify

Browse source
This commit is contained in:
Kagura 2024-11-22 20:48:06 +08:00
parent 1b465ee07a
commit 943f02a3ad
1 changed files with 35 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/TicTacToe.js
View file

@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
function Square({ row, column, value, clickHandler }) { function Square({ row, column, value, clickHandler }) {
let buttonClass = "" let buttonClass = ""
switch (value){ switch (value) {
case "X": case "X":
buttonClass = "bg-amber-200 " buttonClass = "bg-amber-200 "
break; break;
@ -75,16 +75,16 @@ function Map({ mapSize }) {
} }
updateMap(nextMap) updateMap(nextMap)
setCurrentMove(currentMove + 1) setCurrentMove(currentMove + 1)
let hasWinner = calculateWinner(row, column,nextMap) let hasWinner = calculateWinner(row, column, nextMap)
if (hasWinner) { if (hasWinner) {
setWinner(nextMap[row][column]) setWinner(nextMap[row][column])
} }
if (currentMove + 1 >= mapSize * mapSize && !hasWinner){ if (currentMove + 1 >= mapSize * mapSize && !hasWinner) {
setNoWinner(true) setNoWinner(true)
} }
} }
function calculateWinner(row, column,map) { function calculateWinner(row, column, map) {
const who = map[row][column]; // 当前玩家标记 const who = map[row][column]; // 当前玩家标记
const winNeed = mapSize > ticTacToeMaxMapSize ? 5 : mapSize; // 棋盘大小(>5五子棋) const winNeed = mapSize > ticTacToeMaxMapSize ? 5 : mapSize; // 棋盘大小(>5五子棋)
@ -180,55 +180,55 @@ function getMaxBoardSize() {
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight; const screenHeight = window.innerHeight;
const squareSize = 34; const squareSize = 34;
const otherWidthUse = 48*2; const otherWidthUse = 48 * 2;
const squaresHorizontally = Math.floor((screenWidth - otherWidthUse) / squareSize); const squaresHorizontally = Math.floor((screenWidth - otherWidthUse) / squareSize);
const squaresVertically = Math.floor(screenHeight / squareSize); const squaresVertically = Math.floor(screenHeight / squareSize);
if (squaresHorizontally > 20 && squaresVertically > 20){ if (squaresHorizontally > 20 && squaresVertically > 20) {
return 20 return 20
} }
return squaresHorizontally < squaresVertically ? squaresHorizontally : squaresVertically; return squaresHorizontally < squaresVertically ? squaresHorizontally : squaresVertically;
} }
export default function Game(){ export default function Game() {
const location = useLocation(); const location = useLocation();
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const useSize = params.get('mapSize'); const useSize = params.get('mapSize');
let realSize = parseInt(useSize) let realSize = parseInt(useSize)
if (isNaN(realSize) || realSize < 3 || realSize > getMaxBoardSize()){ if (isNaN(realSize) || realSize < 3 || realSize > getMaxBoardSize()) {
realSize = 3 realSize = 3
} }
return( return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-cyan-200 to-pink-200 via-white p-6 sm:p-10"> <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-cyan-200 to-pink-200 via-white p-6 sm:p-10">
<div className="w-full max-w-4xl bg-white rounded-xl shadow-xl p-6 sm:p-12 space-y-6"> <div className="w-full max-w-4xl bg-white rounded-xl shadow-xl p-6 sm:p-12 space-y-6">
<Map mapSize={realSize} /> <Map mapSize={realSize} />
<div className="rounded-xl bg-green-50 shadow-lg flex flex-col items-center sm:space-y-4 p-6 sm:p-8 space-y-3 w-full"> <div className="rounded-xl bg-green-50 shadow-lg flex flex-col items-center sm:space-y-4 p-6 sm:p-8 space-y-3 w-full">
<p>当前最大地图大小： {getMaxBoardSize()}</p> <p>当前最大地图大小： {getMaxBoardSize()}</p>
<form className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center sm:text-center w-full"> <form className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center sm:text-center w-full">
<label className="text-lg sm:text-xl bg-green-50 border border-green-200 p-2 sm:p-4 rounded-md w-full sm:w-auto"> <label className="text-lg sm:text-xl bg-green-50 border border-green-200 p-2 sm:p-4 rounded-md w-full sm:w-auto">
地图大小 地图大小
<input <input
className="sm:w-20 sm:h-10 mt-2 sm:mt-0 border border-sky-300 rounded-md p-2 w-full" className="sm:w-20 sm:h-10 mt-2 sm:mt-0 border border-sky-300 rounded-md p-2 w-full"
name="mapSize" name="mapSize"
defaultValue={realSize} defaultValue={realSize}
type="number" type="number"
/> />
</label> </label>
<button <button
type="submit" type="submit"
className="bg-cyan-300 hover:bg-cyan-400 text-white rounded-md px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-lg mt-4 sm:mt-0" className="bg-cyan-300 hover:bg-cyan-400 text-white rounded-md px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-lg mt-4 sm:mt-0"
> >
确认 确认
</button> </button>
</form> </form>
</div>
</div>
</div> </div>
</div>
</div>
) )
} }