Дізнайтеся, як будувати хрестики-нолики за допомогою гачків React

Якщо ви добре розумієте HTML, CSS, JavaScript та React, можливо, вам цікаво, куди йти далі на вашому навчальному шляху. То чому б не ознайомитись із абсолютно новим безкоштовним посібником Scrimba про те, як створити класичну гру в хрестики-нулики в React?

Повністю робоча гра

Клацніть вище, щоб перейти до підручника.

Приклад гри взятий з офіційних посібників React, але оновлений за допомогою гачків React - останньої гарячої теми у світі React.

Ця стаття дає огляд навчального посібника та дозволяє переходити до екрана та грати з кодом у будь-який час.

Якщо ваші навички HTML, CSS, JavaScript або React здаються хиткими, ніколи не бійтеся - Scrimba пропонує величезний набір навчальних посібників, щоб пришвидшити роботу. Ми рекомендуємо наступні курси, щоб підготувати вас до підручника з хрестиків-ноликів:

  • HTML і CSS Crash курс з Кевіном Пауеллом
  • Вступ до Javascript з Діланом К. Ізраїлем
  • Навчіться реагувати безкоштовно з Бобом Зіролом

У справжньому стилі Scrimba підручник з побудови хрестиків та нулів із React Hooks містить безліч інтерактивних завдань на шляху, тому ви вбудуєте своє навчання і відчуєте себе майстром гачків до кінця.

Курс веде Томас Вайбенфальк, пристрасний розробник, дизайнер та інструктор кодування зі Швеції. Томас любить навчати людей про фронт-енд-розвиток, особливо React, що робить його ідеальним вчителем, який проведе вас через цей досвід навчання.

Якщо припустити, що ви готові піти з хрестиками, давайте почнемо!

Вступ

Хрестики-нолики з гачками React ковзають

У першому сюжеті Томас розповідає нам про свої плани щодо підручника та ділиться Офіційною документацією про реакцію, на яку ми можемо звернутися для більш детального пояснення особливостей, які використовуються для побудови гри.

Окрім того, що Томас розповідає нам про структуру файлів, яку він застосував для програми, Томас також дає нам перший погляд на готовий продукт. Клацніть на зображення вище, щоб відвідати акторський склад.

Компоненти будівельних лісів

Далі Томас розповідає нам про налаштування файлів Board.js, Game.js та Square.js, необхідних для створення гри. Ми також бачимо, як імпортувати Game.js у файл App.js.

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

Квадратний компонент та реструктуризація реквізиту

У наступному сценарії ми створюємо наш квадратний компонент за допомогою JSX, щоб додати кнопку:

const Square = (props) => ( {props.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")} />  onClick("dummy value")} />

Томас також розкриває функції, необхідні нам у Game.js, які ми завершимо пізніше.

Квадратна укладка

додаток зі стильними квадратами

Клацніть на зображення, щоб отримати доступ до акторського складу.

Далі ми стилізуємо наші квадрати, використовуючи styleтиповий проп:

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

Укладання дошки

додаток зі стилізованою дошкою

Клацніть на зображення, щоб отримати доступ до скрима.

Тепер, коли наші квадрати готові, настав час оформити дошку. Томас починає нас, знову створюючи об'єкт стилю, цього разу із сіткою 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)", }; 

Зараз наше завдання - застосувати об’єкт стилю до дошки. Направляйтеся до скрима, щоб спробувати.

Не забувайте, хоча Томас запропонував кілька чудових варіантів стилізації, Scrimba повністю інтерактивний, тож ви можете налаштувати свою гру, як вам подобається - нехай ваша фантазія розгулюється!

Пояснена функція izračunaння переможця

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

Далі Томас пояснює найважливішу calculateWinner()функцію, яка взята з оригінального підручника з реагування.org. Зверніться до акторського складу, щоб вивчити функцію та почути, як вона працює.

Створення станів та заповнення вихідними даними

У наступному сценарії ми почнемо створювати логіку гри.

Ми починаємо з додавання usedStateхука, що називається в Game.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.

Отже, у нас це є - повністю робоча гра в хрестики-нолики з використанням гачків React! Сподіваюсь, цей підручник виявився корисним. Не забувайте, ви можете в будь-який час повернутися до нього, щоб оновити пам’ять про висвітлені теми або пограти з кодом в інтерактивних трансляціях екрану.

Далі, чому б не переглянути деякі з багатьох інших підручників, доступних на Scrimba? З величезним набором тем є щось для кожного.

Щасливого навчання :)