React.js – Тема 3 – Courses WebSkill

Тема 3. React.js Memory Game App

Створення Memory Game React.js додатку

Новий додаток
Форматування
Файли та папки

Створення Memory Game React.js додатку, введення команд в консоль
D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку
npx create-react-app memory-game- створення нового React.js проєкту
npx create-react-app - сама команда створення
memory-game- назва папки в якій буде додаток
cd memory-game - переходимо в створену папку

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли: setupTests.js,repor,WebVitals.js,logo.svg,index.css,App.test.js
З файлу index.js видаляємо такі рядки
import './index.css'; import reportWebVitals from './reportWebVitals'; reportWebVitals();
Та коментарі: // If you want...
З файлу App.js видаляємо import logo from './logo.svg';
Тег <div className="app"> і все що всередині нього

В папці src залишаємо лише такі файли:
App.js, App.css, index.js

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Інформація

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Заготовки файлів для додатку

Файл index.js
Файл App.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

import React, { useState } from "react";

import './App.css';

function App() {

return (

</div>

);

}

export default App;

Початок роботи із App.js

Інформація

Для початку створимо об'єкт levels із рівнями гри, по задумці їх буде 3(легкий, середній, важкий)

Іконки для рівнів:
['🐱', '🐶', '🐰', '🐻', '🐯', '🦁', '🐵', '🦊', '🐷', '🐮', '🐔', '🐧']

Створення змінних стану та функцій

Інформація про змінні
Інформація про функції

currentLevel: Зберігає обраний рівень складності гри (легкий, середній, важкий).
cards: Масив карток, який містить змішані картки для поточного рівня.
flippedIndices: Масив індексів карток, які вже були перевернуті (відкриті).
matchedPairs: Масив індексів пар карток, які знайдені.
moves: Лічильник кількості ходів гравця.
gameOver: Змінна, яка вказує, чи завершена гра.

Функція initializeGame ініціалізує гру. Вона перемішує карти, скидає всі індекси перевернутих та зіграних пар, а також скидає лічильник ходів та встановлює gameOver на false.
Ви використовуєте useEffect, щоб викликати initializeGame при зміні currentLevel. Це означає, що гра буде ініціалізуватися знову, коли гравець змінює рівень гри.
Функція shuffle перемішує переданий масив, використовуючи алгоритм "Fisher-Yates". Вона створює копію масиву, перемішує його елементи і повертає перемішаний масив.

Функція handleCardClick()

Інформація

handleCardClick(): Функція, яка викликається при натисканні на картку. Вона визначає логіку гри, додає або видаляє картки зі списку перевернутих, перевіряє, чи пара карток співпадає, та визначає, чи завершена гра.

Рендеринг компонентів

Інформація

return():
- У рендері відображається заголовок гри, кількість ходів, поточний рівень складності та повідомлення про перемогу, якщо гра завершилася.
- Кнопки для вибору рівня складності відображаються на сторінці.
- Картки відображаються у вигляді блоків з емодзі, і їх стан залежить від того, чи вони були перевернуті або знайдені.
- Є кнопка "Розпочати нову гру", яка дозволяє перезапустити гру.

Скріншоти усіх файлів в нашому додатку

Група легких завдань

Завдання 1
Завдання 2
Завдання 3
Завдання 4

Розбиття коду на компоненти
Зазвичай, розбиття коду на компоненти робить його більш читабельним та обслуговуваним. У вашому коді можна виділити кілька компонентів:
Game (Гра):
Містить весь код гри, включаючи стани та функції для ініціалізації гри, перемішування карток та обробки кліків на картках.
Levels :
Містить об'єкт із рівнями та картинками для них
App:
Містить стани рівня гри та інших глобальних аспектів.
Включає компонент Game та передає йому відповідні стани і функції.

Добавлення нових рівнів
Для додавання нових рівнів у гру «Мемографія» на React ми створюємо різні набори зображень і рівня складності. Додати два нових рівня складності: "Легкий" і "Середній". Легкий рівень містить менше карток, а середній - більше. Ви можете легко розширити цей шаблон для створення ще більш складних рівнів.

Замінити картки(іконки) на картинки
Для додавання нових рівнів у гру «Мемографія» на React ми створюємо різні набори зображень і рівня складності. Додати два нових рівня складності: "Легкий" і "Середній". Легкий рівень містить менше карток, а середній - більше. Ви можете легко розширити цей шаблон для створення ще більш складних рівнів.

Добавити таймер гри
Додавання таймера до цього коду вимагає створення та оновлення змінної, яка відстежує час, і відображення цього часу в компоненті.

Завдання 5

Завдання 5

Створення локалізації гри з різними мовами
Завдання може показатись важким, нехай вчитель його вам пояснить

Слідкуйте за нами: