Tic Tac Toe ist einfach, wird aber in Frontend-Runden am häufigsten gefragt! WARUM ?

Als frischgebackener Absolvent begegnete ich Tic-Tac-Toe als häufige Frage im Vorstellungsgespräch, insbesondere in Frontend-Rollen. Es handelt sich um ein vielseitiges Problem, das die Frontend-Entwicklungsfähigkeiten, das logische Denken und die Problemlösungsfähigkeiten eines Kandidaten mithilfe von Datenstrukturen und Algorithmen effektiv testet.

Ich habe beschlossen, Tic-Tac-Toe selbst anzuwenden, um mein Verständnis zu festigen. Auch wenn es wie ein einfaches Spiel erscheinen mag, erfordert die Ausarbeitung einer robusten Lösung die sorgfältige Berücksichtigung mehrerer Faktoren.

Gerne teile ich meinen Code und erkläre meinen Ansatz. Ich glaube, dass der Wissensaustausch entscheidend für Wachstum ist und die Diskussion von Lösungen zu wertvollen Erkenntnissen und Verbesserungen führen kann.

App.jsx

import "./App.css"
import TicTacToe from "./components/TicTacToe"
const App = () => {
  return (
    <div >
        <TicTacToe />
    </div>
  )
}
export default App

TicTacToe.jsx

import useTicTacToe from "../hooks/useTicTacToe"

const TicTacToe = () => {

    const {board, handleClick, getStatusMessage, resetGame} = useTicTacToe();

    return (
        <div className="main">
            <div className="heading">
                <h1>
                    {
                    getStatusMessage()
                    }
                </h1>
                <button onClick={resetGame}>Reset Game</button>
            </div>
            <div className="board">
                {
                    board.map((player, i) => {
                        return <button key={i} onClick={() => handleClick(i)} disabled = {player !== null}>{player}</button>
                    })
                }
            </div>
        </div>
    )
}

export default TicTacToe

Benutzerdefinierter React-Hook

import { useState } from "react";
const intialGame = () => Array(9).fill(null);

const useTicTacToe = () => {
    const [board, setBoard] = useState(intialGame())
    const [isXNext, setIsXNext] = useState(true);
    const winning_patterns = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,4,8],
        [2,4,6],
        [0,3,6],
        [1,4,7],
        [2,5,8],

    ];
    const calculateWinner = (currentBoard) => {
        for(let i = 0 ; i < winning_patterns.length ; i++) {
            const [a, b, c] = winning_patterns[i];
            if(currentBoard[a] && currentBoard[a] === currentBoard[b] && currentBoard[a] === currentBoard[c]) {
                return currentBoard[a];
            }
        }
        return null;
    }
    const resetGame = () => {
        setBoard(intialGame());
    }
    const getStatusMessage = () => {
        const winner = calculateWinner(board);
        if(winner) return `Player ${winner} Won ?`
        if(!board.includes(null)) return `It's a Draw`
        return `Player ${isXNext === true ? "X" : "O"} Turn`
    }
    const handleClick = (index) => {
        const winner = calculateWinner(board);
        if(winner) return null;
        const newBoard = [...board];
        newBoard[index] = isXNext ? "X" : "O";
        setBoard(newBoard);
        setIsXNext(!isXNext);
    }

    return {board, calculateWinner, resetGame, getStatusMessage, handleClick}
}

export default useTicTacToe;

Styling

.board {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.board button {
  font-size: 35px;
}

Das obige ist der detaillierte Inhalt vonTic Tac Toe ist einfach, wird aber in Frontend-Runden am häufigsten gefragt! WARUM ?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!