Μάθετε πώς να φτιάξετε Tic-Tac-Toe με React Hooks

Εάν έχετε καλή κατανόηση των HTML, CSS, JavaScript και React, ίσως αναρωτιέστε πού να πάτε στη συνέχεια στο εκπαιδευτικό σας ταξίδι. Γιατί λοιπόν να μην δείτε το ολοκαίνουργιο, δωρεάν εκπαιδευτικό πρόγραμμα του Scrimba για το πώς να δημιουργήσετε το κλασικό παιχνίδι tic-tac-toe στο React;

Πλήρως λειτουργικό παιχνίδι

Κάντε κλικ παραπάνω για να μεταβείτε στο σεμινάριο.

Το παράδειγμα παιχνιδιού αντλείται από τα επίσημα μαθήματα της React, αλλά ενημερώνεται με τη χρήση αγκίστρων React - του τελευταίου καυτού θέματος στον κόσμο του React.

Αυτό το άρθρο σάς παρέχει μια επισκόπηση του σεμιναρίου και σας επιτρέπει να κάνετε κλικ στις σκηνές προβολής και να παίξετε με τον κώδικα ανά πάσα στιγμή.

Εάν οι δεξιότητές σας HTML, CSS, JavaScript ή React αισθάνονται ασταθείς, μην φοβάστε ποτέ - η Scrimba προσφέρει ένα τεράστιο φάσμα οδηγών για να σας φέρει σε ταχύτητα. Συνιστούμε τα ακόλουθα μαθήματα για να σας προετοιμάσουμε για το σεμινάριο tic-tac-toe:

  • Μάθημα Crash HTML & CSS με τον Kevin Powell
  • Εισαγωγή στο Javascript με τον Dylan C. Israel
  • Μάθετε το React δωρεάν με τον Bob Ziroll

Σε πραγματικό στυλ Scrimba, το σεμινάριο Build Tic-Tac-Toe with React Hooks περιέχει πολλές αλληλεπιδραστικές προκλήσεις στο δρόμο, οπότε θα ενσωματώσετε τη μάθησή σας και θα αισθανθείτε σαν οδηγός αγκιστριών μέχρι το τέλος του.

Το μάθημα διευθύνεται από τον Thomas Weibenfalk, έναν παθιασμένο προγραμματιστή, σχεδιαστή και εκπαιδευτή κωδικοποίησης από τη Σουηδία. Ο Τόμας λατρεύει να διδάσκει στους ανθρώπους την ανάπτυξη front-end, ειδικά το React, καθιστώντας τον ιδανικό δάσκαλο για να σας οδηγήσει σε αυτήν τη μαθησιακή εμπειρία.

Υποθέτοντας ότι είστε έτοιμοι να πάτε με το tic-tac-toe, ας ξεκινήσουμε!

Εισαγωγή

Tic-tac-toe με διαφάνεια γάντζων React

Στην πρώτη απάτη, ο Thomas μας λέει για τα σχέδιά του για το σεμινάριο και μοιράζεται την Επίσημη τεκμηρίωση React, στην οποία μπορούμε να αναφερθούμε για μια πιο λεπτομερή εξήγηση των χαρακτηριστικών που χρησιμοποιούνται για την κατασκευή του παιχνιδιού.

Εκτός από τη συνομιλία μας μέσω της δομής αρχείων που έχει εφαρμόσει για την εφαρμογή, ο Thomas μας δίνει επίσης την πρώτη ματιά του τελικού προϊόντος. Κάντε κλικ στην παραπάνω εικόνα για να επισκεφτείτε το cast.

Εξαρτήματα σκαλωσιάς

Στη συνέχεια, ο Thomas μας μιλάει μέσω της ρύθμισης των αρχείων Board.js, Game.js και Square.js που απαιτούνται για τη δημιουργία του παιχνιδιού. Βλέπουμε επίσης τον τρόπο εισαγωγής του Game.js στο αρχείο App.js.

import React from "react"; import Game from "./components/Game"; const App = () => ; export default App; 

Τετραγωνικά εξαρτήματα και εργαλεία καταστροφής

Στο επόμενο scrim, δημιουργούμε το τετράγωνο συστατικό μας χρησιμοποιώντας το JSX για να προσθέσουμε ένα κουμπί:

const Square = (props) => ( {props.value} ); 

Για την πρώτη μας πρόκληση, ο Thomas μας ενθαρρύνει να καταστρέψουμε τα στηρίγματα στο συστατικό μας. Κάντε κλικ στο cast για να δοκιμάσετε την πρόκληση.

Συναρτήσεις πλακέτας και σκαλωσιάς

Τώρα ήρθε η ώρα να δημιουργήσετε το στοιχείο της πλακέτας εισάγοντας το τετράγωνο στοιχείο και προσθέτοντας εννέα παρουσίες του στον πίνακα (σημειώστε ότι θα το επαναπροσδιορίσουμε με έναν βρόχο για να βελτιώσουμε τον κώδικα αργότερα):

 onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />

Ο Thomas σκαλωσιάζει επίσης τις λειτουργίες που χρειαζόμαστε στο Game.js, τις οποίες θα ολοκληρώσουμε αργότερα.

Τετράγωνο στυλ

εφαρμογή με στυλ τετράγωνα

Κάντε κλικ στην εικόνα για πρόσβαση στο cast.

Στη συνέχεια, διαμορφώνουμε τα τετράγωνα χρησιμοποιώντας το styleπροεπιλεγμένο στήριγμα:

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

Στυλ Πίνακας

εφαρμογή με στυλ πίνακα

Κάντε κλικ στην εικόνα για πρόσβαση στο scrim.

Τώρα που τα τετράγωνα είναι έτοιμα, ήρθε η ώρα για το στυλ του πίνακα. Ο Thomas μας ξεκινά δημιουργώντας για άλλη μια φορά ένα αντικείμενο στυλ, αυτή τη φορά με 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)", }; 

Η πρόκλησή μας τώρα είναι να εφαρμόσουμε το αντικείμενο στυλ στον πίνακα. Προχωρήστε στο scrim για να το δοκιμάσετε.

Μην ξεχνάτε, ενώ ο Thomas έχει προσφέρει μερικές εξαιρετικές επιλογές στυλ, το Scrimba είναι πλήρως διαδραστικό, οπότε είστε ελεύθεροι να προσαρμόσετε το παιχνίδι σας όσο προτιμάτε - αφήστε τη φαντασία σας να τρέξει άγρια!

Η συνάρτηση calculWinner εξηγείται

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

Στη συνέχεια, ο Thomas εξηγεί την πολύ σημαντική calculateWinner()λειτουργία, η οποία προέρχεται από το αρχικό σεμινάριο από το reactjs.org. Προχωρήστε στο cast για να εξερευνήσετε τη λειτουργία και να ακούσετε πώς λειτουργεί.

Δημιουργία καταστάσεων και συμπλήρωση με αρχικά δεδομένα

Στο επόμενο scrim, αρχίζουμε να δημιουργούμε τη λογική για το παιχνίδι.

Ξεκινάμε προσθέτοντας ένα άγκιστρο που ονομάζεται usedStateGame.js και δημιουργώντας καταστάσεις για να ορίσετε έναν κενό πίνακα και να καθορίσουμε τον επόμενο παίκτη. Τέλος, προσθέτουμε const winner, το οποίο μας λέει αν η τελευταία κίνηση ήταν κερδοφόρα:

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

Over in Board.js, we delete our manually-rendered squares and replace them with mapped squares as promised earlier. Click through to see this in detail:

const Board = ({ squares, onClick }) => ( {squares.map((square, i) => (  onClick(i)} /> ))} ); 

Create the handleClick Function

Next, we create the handleClick() function, which carries out the calculations when we make a move:

const handleClick = (i) =>  const boardCopy = [...board]; // If user click an occupied square or if game is won, return if (winner ; 

renderMoves Function and the Last JSX

Πλήρως λειτουργικό παιχνίδι

Click above to go to the tutorial.

In this scrim, we create the JSX which makes the game playable.

{winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}

We now have the all knowledge needed to create a fully working tic-tac-toe game with React hooks!

BONUS: Implement Time Travel

Λειτουργία ταξιδιού χρόνου

Click the image to go to the bonus tutorial.

In the bonus scrim, we take our game to the next level by implementing time travel to review the moves made throughout the game. Click through to get the goodies in this bonus tutorial.

Το έχουμε λοιπόν - ένα πλήρως λειτουργικό παιχνίδι tic-tac-toe χρησιμοποιώντας γάντζους React! Ελπίζω να βρείτε αυτό το σεμινάριο χρήσιμο. Μην ξεχνάτε, μπορείτε να ανατρέξετε σε αυτό ανά πάσα στιγμή για να ανανεώσετε τη μνήμη σας για τα θέματα που καλύπτονται ή να παίξετε με τον κώδικα στις διαδραστικές προβολές.

Στη συνέχεια, γιατί να μην δείτε μερικά από τα πολλά άλλα σεμινάρια που είναι διαθέσιμα στο Scrimba; Με ένα τεράστιο φάσμα θεμάτων, υπάρχει κάτι για όλους.

Καλή μάθηση :)