Создание графического интерфейса (GUI) для вашей игры «Угадай число» с использованием библиотеки Electron позволяет сделать приложение более удобным и доступным для пользователей. Вот подробное руководство по созданию GUI с использованием Electron.

Что такое Electron?

Electron — это фреймворк, который позволяет создавать кроссплатформенные настольные приложения с использованием веб-технологий (HTML, CSS и JavaScript). Он объединяет Chromium и Node.js, что позволяет использовать веб-технологии для создания настольных приложений.

Шаги по созданию GUI с Electron

1. Установка Node.js и npm
Если вы еще не установили Node.js, скачайте его с официального сайта и установите. Убедитесь, что Node.js и npm (Node Package Manager) доступны в командной строке.

2. Создание проекта
Создайте новую папку для вашего проекта:

Копировать
mkdir guess-the-number
cd guess-the-number
Инициализируйте новый проект npm:

Копировать
npm init -y
Это создаст файл package.json с настройками вашего проекта.

3. Установка Electron
Установите Electron как зависимость вашего проекта:

Копировать
npm install electron —save-dev
4. Создание структуры проекта
Создайте следующие файлы и папки в вашем проекте:

Копировать
guess-the-number/
├── index.js // Главный файл приложения
├── package.json // Конфигурация npm
├── index.html // HTML файл интерфейса
└── game.js // Логика игры
5. Наполнение файлов
5.1. index.js
Это главный файл вашего приложения. Он отвечает за создание окна приложения и загрузку HTML файла.

Копировать
const { app, BrowserWindow } = require(‘electron’);
const path = require(‘path’);

function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, ‘preload.js’),
nodeIntegration: true,
contextIsolation: false,
},
});

win.loadFile(‘index.html’); // Загружаем HTML файл
}

app.whenReady().then(createWindow);

app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit();
}
});

app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
5.2. index.html
Это HTML файл, который будет отображаться в окне приложения. Здесь вы можете создать интерфейс для вашей игры.

Копировать

Игра Угадай Число

Я загадал число от 1 до 100. Попробуйте угадать его!

5.3. game.js
Перенесите логику игры из вашего предыдущего JavaScript-кода в этот файл, адаптировав ее для работы с элементами HTML.

Копировать
let gamesPlayed = 0;
let gamesWon = 0;
let totalPoints = 0;
const maxAttempts = 10;
let randomNumber;
let attempts = 0;

document.getElementById(‘submit’).addEventListener(‘click’, () => {
const guess = Number(document.getElementById(‘guess’).value);
checkGuess(guess);
});

function startGame() {
randomNumber = Math.floor(Math.random() * 100) + 1;
attempts = 0;
gamesPlayed++;
document.getElementById(‘result’).innerText = »;
}

function calculatePoints(attempts) {
switch (attempts) {
case 1: return 10;
case 2: return 9;
case 3: return 8;
case 4: return 7;
case 5: return 6;
case 6: return 5;
case 7: return 4;
case 8: return 3;
case 9: return 2;
case 10: return 1;
default: return 0;
}
}

// Запуск первой игры
startGame();
6. Обновление package.json
Добавьте команду для запуска вашего приложения в файл package.json:

Копировать
{
«name»: «guess-the-number»,
«version»: «1.0.0»,
«main»: «index.js»,
«scripts»: {
«start»: «electron .»
},
«devDependencies»: {
«electron»: «^latest»
}
}
7. Запуск приложения
Теперь вы можете запустить ваше приложение, выполнив следующую команду в терминале:

Копировать
npm start
Заключение
Теперь у вас есть простое настольное приложение с графическим интерфейсом для игры «Угадай число». Вы можете расширять и улучшать его, добавляя новые функции, улучшая дизайн или внедряя дополнительные механики игры.

Если у вас есть дополнительные вопросы или вам нужна помощь с конкретными аспектами разработки, дайте знать!