Dacă aveți o bună înțelegere a HTML, CSS, JavaScript și React, s-ar putea să vă întrebați unde să mergeți mai departe în călătoria dvs. de învățare. Deci, de ce să nu verificăm Tutorialul nou, gratuit al Scrimba despre cum să construiești jocul clasic tic-tac-toe în React?

Joc complet de lucru
Faceți clic mai sus pentru a accesa tutorialul.

Exemplul de joc este extras din tutorialele oficiale ale React, dar este actualizat folosind React hooks – ultimul subiect fierbinte din lumea React.

Acest articol vă oferă o prezentare generală a tutorialului și vă permite să faceți clic pe ecran și să vă jucați cu codul în orice moment.

Dacă abilitățile dvs. HTML, CSS, JavaScript sau React se simt tremurate, nu vă temeți niciodată – Scrimba oferă o gamă largă de tutoriale pentru a vă aduce la curent. Vă recomandăm următoarele cursuri pentru a vă pregăti pentru tutorialul tic-tac-toe:

ad-banner

În adevăratul stil Scrimba, tutorialul Build Tic-Tac-Toe cu React Hooks conține o mulțime de provocări interactive pe parcurs, astfel încât veți încorpora învățarea și vă veți simți ca un vrăjitor cu cârlige până la sfârșitul acestuia.

Cursul este condus de Thomas Weibenfalk, un dezvoltator pasionat, designer și instructor de codificare din Suedia. Lui Thomas îi place să-i învețe pe oameni despre dezvoltarea front-end-ului, în special React, făcându-l profesor ideal pentru a vă duce prin această experiență de învățare.

Presupunând că sunteți gata să mergeți cu tic-tac-toe, să începem!

Introducere

Tic-tac-toe cu cârligele React alunecă

În primul scrim, Thomas ne spune despre planurile sale pentru tutorial și împărtășește Documentația oficială React, la care ne putem referi pentru o explicație mai detaliată a caracteristicilor utilizate pentru a construi jocul.

Pe lângă faptul că ne vorbește prin structura de fișiere pe care a implementat-o ​​pentru aplicație, Thomas ne oferă și prima noastră privire asupra produsului finit. Faceți clic pe imaginea de mai sus pentru a vizita distribuția.

Componente pentru schele

Urmatorul, Thomas ne vorbește prin configurarea fișierelor Board.js, Game.js și Square.js necesare pentru a crea jocul. Vedem, de asemenea, cum să importăm Game.js în fișierul App.js.

import React from "react";
import Game from "./components/Game";

const App = () => <Game />;

export default App;

Componente pătrate și elemente de destructură

În următorul scrim, ne creăm componenta pătrată folosind JSX pentru a adăuga un buton:

const Square = (props) => (
	<button onClick={props.onClick}>{props.value}</button>
);

Pentru prima noastră provocare, Thomas ne încurajează să distrugem recuzita din componenta noastră. Faceți clic distribuției pentru a încerca provocarea.

Componentele plăcii și funcțiile de schele

Acum este timpul să creați componenta plăcii importând componenta pătrată și adăugând nouă instanțe ale acesteia pe tablă (rețineți că vom refactura acest lucru cu o buclă pentru a îmbunătăți codul mai târziu):

<div>
	<Square value="1" onClick={() => onClick("dummy value")} />
	<Square value="2" onClick={() => onClick("dummy value")} />
	<Square value="3" onClick={() => onClick("dummy value")} />
	<Square value="4" onClick={() => onClick("dummy value")} />
	<Square value="5" onClick={() => onClick("dummy value")} />
	<Square value="6" onClick={() => onClick("dummy value")} />
	<Square value="7" onClick={() => onClick("dummy value")} />
	<Square value="8" onClick={() => onClick("dummy value")} />
	<Square value="9" onClick={() => onClick("dummy value")} />
</div>

Thomas schelează și funcțiile de care avem nevoie în Game.js, pe care le vom finaliza mai târziu.

Stil pătrat

aplicație cu pătrate stilate
Faceți clic pe imagine pentru a accesa distribuția.

Urmatorul, ne stilizăm pătratele folosind style propulsie implicită:

const style = {
	background: "lightblue",
	border: "2px solid darkblue",
	fontSize: "30px",
	fontWeight: "800",
	cursor: "pointer",
	outline: "none",
};

const Square = ({ value, onClick }) => (
	<button style={style} onClick={onClick}>
		{value}
	</button>
);

Stil de bord

aplicație cu tablă stilizată
Faceți clic pe imagine pentru a accesa scrim.

Acum că pătratele noastre sunt gata, a sosit timpul stilează tabla. Thomas ne dă startul creând încă o dată un obiect de stil, de data aceasta cu grila CSS:

const style = {
	border: "4px solid darkblue",
	borderRadius: "10px",
	width: "250px",
	height: "250px",
	margin: "0 auto",
	display: "grid",
	gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)",
};

Provocarea noastră este acum să aplicăm obiectul de stil pe tablă. Peste cap de la scrim pentru a încerca.

Nu uitați, în timp ce Thomas a oferit câteva opțiuni de stil minunate, Scrimba este complet interactiv, astfel încât sunteți liber să vă personalizați jocul oricum doriți – lăsați-vă imaginația să se elibereze!

Funcția calculateWinner a fost explicată

export function calculateWinner(squares) {
	const lines = [
		[0, 1, 2],
		[3, 4, 5],
		[6, 7, 8],
		[0, 3, 6],
		[1, 4, 7],
		[2, 5, 8],
		[0, 4, 8],
		[2, 4, 6],
	];
	for (let i = 0; i < lines.length; i++) {
		const [a, b, c] = lines[i];
		if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
			return squares[a];
		}
	}
	return null;
}

Urmatorul, Explică Thomas tot ce este important calculateWinner() funcție, care este preluată din tutorialul original de la reactjs.org. Peste cap de la distribuție pentru a explora funcția și a auzi cum funcționează.

Creați state și completați cu date inițiale

În urmatoarele scrim, începem să creăm logica jocului.

Începem prin a adăuga un cârlig numit usedState în Game.js și crearea stărilor pentru a seta o tablă goală și a specifica următorul jucător. În cele din urmă, adăugăm const winner, care ne spune dacă cea mai recentă mișcare a fost una câștigătoare:

const [board, setBoard] = useState(Array(9).fill(null));
const [xIsNext, setXisNext] = useState(true);
const winner = calculateWinner(board);

În Board.js, ștergem pătratele noastre randate manual și le înlocuim cu pătrate mapate, așa cum am promis mai devreme. Faceți clic pentru a vedea acest lucru în detaliu:

const Board = ({ squares, onClick }) => (
	<div style={style}>
		{squares.map((square, i) => (
			<Square key={i} value={square} onClick={() => onClick(i)} />
		))}
	</div>
);

Creați funcția handleClick

Următorul, creăm handleClick() funcție, care efectuează calculele atunci când facem o mișcare:

const handleClick = (i) => {
	const boardCopy = [...board];
	// If user click an occupied square or if game is won, return
	if (winner || boardCopy[i]) return;
	// Put an X or an O in the clicked square
	boardCopy[i] = xIsNext ? "X" : "O";
	setBoard(boardCopy);
	setXisNext(!xIsNext);
};

Funcția renderMoves și Ultimul JSX

Joc complet de lucru
Faceți clic mai sus pentru a accesa tutorialul.

În acest scrim, creăm JSX care face ca jocul să poată fi jucat.

<>
  <Board squares={board} onClick={handleClick} />
  <div style={styles}>
    <p>
      {winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}
    </p>
  </div>
</>

Acum avem toate cunoștințele necesare pentru a crea un joc tic-tac-toe complet funcțional cu cârlige React!

BONUS: Implementați călătoria în timp

Caracteristica de călătorie în timp în acțiune
Faceți clic pe imagine pentru a accesa tutorialul bonus.

În scrimul bonus, ne ducem jocul la nivelul următor prin implementarea călătoriei în timp pentru a revizui mișcările făcute de-a lungul jocului. Faceți clic pentru a obține bunătățile din acest tutorial bonus.

Așa că avem – un joc tic-tac-toe care funcționează pe deplin, folosind React hooks! Sper că ați găsit util acest tutorial. Nu uitați, vă puteți referi la el în orice moment pentru a vă reîmprospăta memoria subiectelor tratate sau pentru a vă juca cu codul din ecranele interactive.

În continuare, de ce să nu verificați câteva dintre multe alte tutoriale disponibile pe Scrimba? Cu o gamă largă de subiecte, există ceva pentru toată lumea.

Învățare fericită 🙂