Створення гри Banana Game: дослідження програмної розробки через MERN стек та інтеграцію API

Ти коли-небудь замислювався, як проста ідея перетворюється на захоплюючий ігровий процес через код? Познайомся з The Banana Game, проектом, який я розробив, використовуючи стэк MERN (MongoDB, Express.js, React, Node.js) та API Banana. Ця гра — це не просто весела розвага, а й демонстрація сучасної веб-розробки, включаючи React для інтерфейсу, Node.js для бекенду, MongoDB для бази даних і CSS для стилізації.

Привіт, я Бенжамін, і радий представити цей проект, який я розробив за допомогою стека MERN та API Banana. Ця гра пропонує захоплюючий та конкурентний досвід, одночасно демонструючи основні практики розробки. Давайте заглибимося в те, як вона працює, та в технічну магію, яка стоїть за нею.

Фото: charlesdeluvio на Unsplash

Як працює Banana Game

1. Реєстрація та вхід

• Реєстрація: Нові користувачі можуть створити віртуальну особистість з ім'ям користувача, електронною поштою та паролем.
• Вхід: Після реєстрації користувачі потрапляють на екран входу. Після входу їх зустрічає простий та інтуїтивно зрозумілий головний екран з опціями навігації: Почати гру, Лідерборд, Профіль і Вихід.

2. Механіка гри

• Гравці починають з 4 життів. Невірна відповідь призводить до втрати життя.
• Таймер зворотного відліку додає терміновості, зберігаючи захоплюючий геймплей. Правильні відповіді винагороджуються оновленням BestTime, яке динамічно відображається в базі даних користувача.

3. Лідерборд

• Лідерборд ранжує 9 найкращих гравців за їхнім BestTime, сприяючи дружній конкуренції та мотивації для покращення результатів.

4. Розділ профілю

• Користувачі можуть відслідковувати свій прогрес, зокрема кількість зіграних ігор, виграних ігор, програних ігор і серій.

5. Вихід

• Функція безпечного виходу перенаправляє гравців на екран входу, забезпечуючи захист даних.

Перегляньте репозиторій тут: [GitHub Link]

Основні теми в розробці

1. Принципи проектування програмного забезпечення
   Проект використовує компонентну архітектуру для масштабованості та підтримуваності. Основні моменти включають:

• Розділення відповідальності: Кожен компонент фокусується на конкретному завданні. Наприклад, StartGame обробляє логіку гри, а Leaderboard фокусується на ранжуванні гравців.
• Управління станом: Центральний UserContext забезпечує узгодженість даних, дотримуючись патерну Model-View-Controller (MVC).

Аналіз коду

1. Frontend: React та CSS

Фронтенд гри побудований за допомогою React, використовуючи його компонентну архітектуру для модульності та масштабованості. Ось як React забезпечує роботу Banana Game:

• Компонентний дизайн:
• Компонент StartGame обробляє логіку гри, зокрема керує життями користувача та відстежує час.
• Компонент Leaderboard отримує та відображає топ-гравців за допомогою API-запитів до бекенду.
• Компонент Profile відображає статистику, специфічну для гравця, використовуючи управління станом через UserContext.

// Приклад компонента React для Leaderboard  
function Leaderboard() {  
 const [leaders, setLeaders] = useState([]);  

 useEffect(() => {  
 fetch('/api/leaderboard')  
 .then((res) => res.json())  
 .then((data) => setLeaders(data))  
 .catch((error) => console.error("Помилка при отриманні лідерборду:", error));  
 }, []);  

 return (  

Топ-гравці
    {leaders.map((player, index) => (    
    {index + 1}. {player.username} - Найкращий час: {player.bestTime}с    
    ))}    
    );   } ```  - **Стилізація за допомогою CSS**:   Banana Game має чистий та простий дизайн, досягнутий за допомогою власного CSS для екрану входу, ігрового інтерфейсу та лідерборду.  ``` .leaderboard {    text-align: center;    background-color: #f8f9fa;    padding: 20px;    border-radius: 10px;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);   }      .leaderboard ul {    list-style: none;    padding: 0;   }      .leaderboard li {    font-size: 1.2rem;    margin: 5px 0;   } ```  **2.
Backend: Node.js та Express.js**

Бекенд побудований на **Node.js** та **Express.js**, що забезпечує надійний API-шар для зв’язку між фронтендом і базою даних.

- **Маршрути Express для API кінцевих точок**:

app.get('/api/leaderboard', async (req, res) => {
try {
const topPlayers = await User.find().sort({ bestTime: 1 }).limit(9);
res.json(topPlayers);
} catch (error) {
res.status(500).send("Помилка при отриманні даних лідерборду");
}
});
```

• Обробка автентифікації:
  bcrypt використовується для хешування паролів під час реєстрації та їх перевірки при вході, що забезпечує безпеку автентифікації користувачів.

const bcrypt = require('bcrypt');  

app.post('/api/register', async (req, res) => {  
 const { username, password, email } = req.body;  
 const hashedPassword = await bcrypt.hash(password, 10);  

 const newUser = new User({ username, password: hashedPassword, email });  
 await newUser.save();  
 res.status(201).send("Користувача зареєстровано успішно");  
});

3. База даних: MongoDB з Mongoose

Дані користувачів, включаючи статистику та хешовані паролі, зберігаються в базі даних MongoDB Atlas. Бібліотека Mongoose спрощує визначення схем і запити до бази даних.

• Визначення схеми для користувачів:

const mongoose = require('mongoose');  

const userSchema = new mongoose.Schema({  
 username: { type: String, required: true },  
 password: { type: String, required: true },  
 email: { type: String, required: true },  
 gamesPlayed: { type: Number, default: 0 },  
 gamesWon: { type: Number, default: 0 },  
 bestTime: { type: Number, default: null },  
});  

const User = mongoose.model('User', userSchema);  
module.exports = User;

4. Логіка гри: Подієвий підхід до програмування

Таймер зворотного відліку та логіка гри реалізовані за допомогою подієвого підходу до програмування, що створює динамічний і чуйний досвід користувача.

• Таймер зворотного відліку в React:

useEffect(() => {  
 const timer = setInterval(() => {  
 setTimeLeft((prevTime) => (prevTime > 0 ? prevTime - 1 : 0));  
 }, 1000);  

 return () => clearInterval(timer);  
}, []);

• Динамічні події гри:
• Правильні відповіді оновлюють BestTime в базі даних.
• Невірні відповіді зменшують кількість життів користувача, що спричиняє оновлення UI.

5. Інтеграція з API Banana

Гра використовує Banana API для динамічного отримання запитань, роблячи гру більш різноманітною і захоплюючою.

app.get('/api/questions', async (req, res) => {  
 try {  
 const questions = await bananaAPI.fetchQuestions();  
 res.json(questions);  
 } catch (error) {  
 res.status(500).send("Помилка при отриманні запитань з Banana API");  
 }  
});

Роздуми про процес розробки

1. Відмінний фронтенд:
   Компонентний дизайн React зробив UI модульним і масштабованим, тоді як CSS додав вигляд, який легко сприймається користувачами.
2. Безпечний бекенд:
   Node.js і Express забезпечили надійну структуру для бекенду, в той час як bcrypt гарантував безпеку автентифікації користувачів.
3. Інтеграція з базою даних:
   MongoDB ефективно обробляла дані, але обробка помилок при запитах до бази даних може бути покращена.
4. API Інтероперабельність:
   Інтеграція з Banana API додала унікальну цінність грі, але для більш ефективного використання потрібні кращі механізми резервних копій у разі простоїв API.

Висновок

The Banana Game є свідченням можливостей сучасної веб-розробки. Поєднуючи React, Node.js, Express, MongoDB і Banana API, він забезпечує захоплюючий ігровий досвід, одночасно демонструючи основні принципи проектування програмного забезпечення, подієве програмування та безпечне управління користувачами.

Якщо цей проект надихнув вас або у вас є питання, давайте зв'яжемося в коментарях! Слідкуйте за моїм Medium для більше захоплюючого контенту.
Дізнайтесь більше:

• Репозиторій GitHub: Link to Repo
• LinkedIn: Мій профіль на LinkedIn

Створюймо щось неймовірне разом.

Перекладено з: Building the Banana Game: Exploring Software Development Through MERN Stack and API Integration