Tic Tac Toe est simple mais le plus demandé dans les rounds frontend ! POURQUOI ?-js tutoriel-php.cn

Tic Tac Toe est simple mais le plus demandé dans les rounds frontend ! POURQUOI ?

WBOY

Libérer： 2024-08-05 16:26:32

original

460 Les gens l'ont consulté

Tic Tac Toe is simple but most asked in Frontend Rounds! WHY ?

En tant que fraîchement diplômé, j'ai rencontré Tic-Tac-Toe comme une question d'entretien fréquente, en particulier dans les rôles frontaux. Il s'agit d'un problème polyvalent qui teste efficacement les compétences en développement front-end, la pensée logique et les capacités de résolution de problèmes d'un candidat à l'aide de structures de données et d'algorithmes.

J'ai décidé de mettre en œuvre moi-même Tic-Tac-Toe pour consolider ma compréhension. Même si cela peut sembler un jeu simple, l'élaboration d'une solution robuste implique un examen attentif de plusieurs facteurs.

Je serais heureux de partager mon code et d'expliquer ma démarche. Je crois que le partage des connaissances est crucial pour la croissance, et que discuter de solutions peut conduire à des informations et à des améliorations précieuses.

App.jsx

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

Copier après la connexion

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

Copier après la connexion

Hook React personnalisé

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;

Copier après la connexion

Style

.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;
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!