Введение
В этом проекте мы создадим игру с пазлами, в которой можно перетаскивать элементы, с использованием React. Это отличный проект для начинающих, чтобы познакомиться с компонентами React, управлением состоянием и обработкой взаимодействий пользователя. В конце этого проекта у вас будет функциональная игра с пазлами.
👀 Предпросмотр
🎯 Задачи
В этом проекте вы научитесь:
- настраивать новое приложение React;
- создавать главный компонент игры с пазлами;
- управлять состоянием и настраивать изображение пазла;
- отображать элементы пазла на экране;
- реализовывать функциональность перетаскивания элементов;
- интегрировать компонент PuzzleGame в главный файл приложения;
- добавлять CSS для стилизации пазла.
🏆 Достижения
После завершения этого проекта вы сможете:
- настроить приложение React и создать компонент;
- управлять состоянием и обрабатывать взаимодействия пользователя;
- реализовать функциональность перетаскивания элементов;
- добавить стилизацию, чтобы пазл был визуально привлекательным.
Настройка проекта
Цель: Основой нашей игры с пазлами является новое приложение React.
Откройте терминал.
Перейдите в каталог вашего проекта:
cd puzzle-gameУстановите зависимости проекта:
npm install
Создать компонент PuzzleGame
Цель: Настроить главный компонент игры с пазлами.
- Внутри директории
srcсоздайте папку с именемcomponents. - Внутри
componentsсоздайте новый файл с именемPuzzleGame.js. - Добавьте следующую базовую структуру в
PuzzleGame.js:
// src/components/PuzzleGame.js
// Импортируем React и useState для управления состоянием компонента
import React, { useState, useEffect } from "react";
// Определяем компонент PuzzleGame
const PuzzleGame = () => {
// Этот компонент будет обрабатывать игровую логику и интерфейс пользователя
return (
<div className="game-container">
{/* Именно здесь будет отображаться пазл */}
</div>
);
};
// Экспортируем компонент для использования в других файлах
export default PuzzleGame;
Реализовать настройку состояния и изображения
Цель: Настроить состояние для управления элементами пазла и определить изображение пазла.
- В
PuzzleGame.jsимпортируйтеuseStateиз React. - Определите переменную состояния для отслеживания позиций элементов пазла.
- Определите URL изображения пазла (поместите изображение с именем
corgi.pngв папкуpublic).
// src/components/PuzzleGame.js
//...другие импорты
const PuzzleGame = () => {
// Определите URL изображения и начальные позиции элементов пазла
const imgUrl = "corgi.png"; // Убедитесь, что это изображение существует в папке public
const [positions, setPositions] = useState([...Array(16).keys()]);
useEffect(() => {
// Перемешайте позиции для начальной настройки пазла
setPositions((prevPositions) => {
const newPos = [...prevPositions];
newPos.sort(() => Math.random() - 0.5);
return newPos;
});
}, []);
// Возвращение компонента
return (
<div className="game-container">
{/* Интерфейс пользователя пазла будет добавлен здесь в последующих шагах */}
</div>
);
};
// Экспорт компонента PuzzleGame
export default PuzzleGame;
Отобразить элементы пазла
Цель: Отобразить элементы пазла на экране.
- Переберите состояние
positions, чтобы отобразить отдельные элементы пазла. - Каждый элемент должен отображать часть изображения.
// src/components/PuzzleGame.js
const PuzzleGame = () => {
//...предыдущий код
return (
<div className="game-container">
<div className="reference-image">
<img src={imgUrl} alt="Reference Image" />
</div>
<div className="puzzle-container">
{positions.map((pos, index) => {
const x = (pos % 4) * 100;
const y = Math.floor(pos / 4) * 100;
return (
<div
key={index}
className="puzzle-piece"
style={{
backgroundImage: `url('${imgUrl}')`,
backgroundPosition: `-${x}px -${y}px`
}}
/>
);
})}
</div>
</div>
);
};
Добавить функциональность перетаскивания
Цель: Реализовать логику для перетаскивания и вставки элементов пазла.
- Добавьте обработчики для событий начала перетаскивания, перетаскивания над элементом и вставки.
- Реализуйте логику для обмена элементами пазла при вставке.
// src/components/PuzzleGame.js
const PuzzleGame = () => {
//...предыдущий код
// Обработка начала перетаскивания
const handleDragStart = (e, position) => {
e.dataTransfer.setData("text/plain", position);
};
// Обработка события вставки
const handleDrop = (e, position) => {
e.preventDefault();
const originalPosition = e.dataTransfer.getData("text");
// Добавьте здесь логику для обмена позиций элементов пазла
setPositions((prevPositions) => {
const newPos = [...prevPositions];
[newPos[originalPosition], newPos[position]] = [
newPos[position],
newPos[originalPosition]
];
return newPos;
});
};
// Разрешение действия вставки, предотвращая стандартное поведение
const handleDragOver = (e) => {
e.preventDefault();
};
// Отображение элементов пазла с добавленными обработчиками перетаскивания и вставки
};
// src/components/PuzzleGame.js
const PuzzleGame = () => {
//...предыдущий код
return (
<div className="game-container">
<div className="reference-image">
<img src={imgUrl} alt="Reference Image" />
</div>
<div className="puzzle-container">
{positions.map((pos, index) => {
const x = (pos % 4) * 100;
const y = Math.floor(pos / 4) * 100;
return (
<div
key={index}
className="puzzle-piece"
draggable
onDragStart={(e) => handleDragStart(e, index)}
onDrop={(e) => handleDrop(e, index)}
onDragOver={handleDragOver}
style={{
backgroundImage: `url('${imgUrl}')`,
backgroundPosition: `-${x}px -${y}px`
}}
/>
);
})}
</div>
</div>
);
};
Обновление компонента App
Цель: Включить компонент PuzzleGame в главный файл приложения.
- Откройте
src/App.js. - Отобразите компонент PuzzleGame.
// src/App.js
import React from "react";
import "./App.css";
import PuzzleGame from "./components/PuzzleGame";
// Компонент App, который отображает компонент PuzzleGame
function App() {
return (
<div className="App">
<PuzzleGame />
</div>
);
}
export default App;
Стилизация пазла
Цель: Добавить CSS для того, чтобы пазл был визуально привлекательным.
- Откройте
src/App.css. - Добавьте стили для
.game-containerи.puzzle-piece, чтобы правильно расположить пазл.
body {
font-family: "Arial", sans-serif;
text-align: center;
padding: 20px;
background: #f0f0f0;
}
.game-container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
}
.reference-image {
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #aaa9a9;
/* Добавьте границу для согласованности */
padding: 10px;
/* Добавьте некоторый отступ вокруг изображения */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Добавьте тень для выравнивания */
}
.reference-image img {
display: block;
/* Удалите любое стандартное встроенное расстояние */
max-width: 200px;
}
.puzzle-container {
width: 400px;
height: 400px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
border: 5px solid #aaa9a9;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
/* Добавьте более крупную тень для трехмерного эффекта */
background: #ddd;
/* Светой фон для зазоров */
}
.puzzle-piece {
width: 100%;
height: 100%;
background-size: 400px 400px;
cursor: grab;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
/* Добавьте встроенную тень для каждого элемента */
}
Запуск приложения
Цель: Запустить приложение, чтобы увидеть завершенную игру с пазлом.
В директории вашего проекта запустите:
npm startПриложение должно открыться в вашем веб-браузере с отображением игры с пазлом.
Резюме
Поздравляем! Вы успешно создали игру с пазлом с возможностью перетаскивания на React. В этом проекте были рассмотрены настройка проекта React, создание компонентов, управление состоянием, обработка взаимодействий пользователя и применение базовых стилей. Теперь вы можете экспериментировать с добавлением дополнительных функций, таких как таймер, счет или разные уровни, чтобы улучшить игру.
