Вступ: Основи ігрової логіки
Створення ігор - це не лише графіка та анімація. Серце будь-якої гри - це логіка: як рахуються бали, як працює таймер, як рухається персонаж. У цій статті ми розглянемо 5 готових промптів для створення базових ігрових механік за допомогою JavaScript.
Для кого ця стаття:
- Початківці в геймдеві
- Студенти, які вивчають JavaScript
- Викладачі, які шукають практичні приклади
- Інді-розробники, які хочуть швидко прототипувати
Чому промпти важливі для геймдеву
AI-асистенти можуть генерувати робочий код для типових ігрових механік, економлячи ваш час на рутинних задачах. Ви можете зосередитися на унікальних аспектах вашої гри, а базову логіку делегувати AI.
Промпт #1: Лічильник балів
Задача: Створити систему підрахунку балів з можливістю додавання та відображення.
Створи функцію JavaScript для лічильника балів у грі. Функція має: 1. Зберігати поточний рахунок 2. Додавати бали (функція addScore) 3. Скидати рахунок (функція resetScore) 4. Відображати рахунок в елементі з ID 'score-display' Використай замикання (closure) для збереження стану. Додай приклад використання.
Що робить цей промпт ефективним:
- Чітко описано функціональність
- Вказано технічний підхід (замикання)
- Згадано конкретний DOM-елемент
- Прохання про приклад використання
Очікуваний результат:
const scoreManager = (() => {
let score = 0;
const display = document.getElementById('score-display');
return {
addScore: (points) => {
score += points;
display.textContent = score;
},
resetScore: () => {
score = 0;
display.textContent = score;
},
getScore: () => score
};
})();
// Використання:
scoreManager.addScore(10); // Додати 10 балів
scoreManager.resetScore(); // Скинути
Промпт #2: Таймер зворотного відліку
Задача: Створити таймер, який відраховує час та виконує дію після закінчення.
Створи функцію JavaScript, яка запускає таймер зворотного відліку на 60 секунд. Таймер має: 1. Відображатися в елементі з ID 'game-timer' у форматі MM:SS 2. Оновлюватися щосекунди 3. Зупинятися, коли час виходить 4. Викликати callback-функцію onTimeUp після закінчення Використай setInterval для оновлення. Додай функції start, pause та reset.
Ключові елементи:
- Тривалість таймера
- Формат відображення
- Callback для завершення
- Функції управління (start, pause, reset)
Очікуваний результат:
class GameTimer {
constructor(duration, onTimeUp) {
this.duration = duration;
this.timeLeft = duration;
this.onTimeUp = onTimeUp;
this.intervalId = null;
this.display = document.getElementById('game-timer');
}
start() {
this.intervalId = setInterval(() => {
this.timeLeft--;
this.updateDisplay();
if (this.timeLeft <= 0) {
this.stop();
this.onTimeUp();
}
}, 1000);
}
pause() {
clearInterval(this.intervalId);
}
reset() {
this.pause();
this.timeLeft = this.duration;
this.updateDisplay();
}
stop() {
clearInterval(this.intervalId);
}
updateDisplay() {
const minutes = Math.floor(this.timeLeft / 60);
const seconds = this.timeLeft % 60;
this.display.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
}
// Використання:
const timer = new GameTimer(60, () => {
alert('Time is up!');
});
timer.start();
Промпт #3: Рух персонажа
Задача: Створити систему руху персонажа за допомогою клавіатури.
Створи функцію JavaScript для руху персонажа (елемент з ID 'player') за допомогою клавіш WASD або стрілок. Персонаж має: 1. Рухатися на 10 пікселів за натискання 2. Не виходити за межі ігрового поля (елемент з ID 'game-area') 3. Мати плавну анімацію руху (CSS transition) 4. Зберігати поточну позицію (x, y) Використай event listener для keydown. Додай функцію getPosition для отримання координат.
Що важливо:
- Управління (WASD або стрілки)
- Межі руху
- Анімація
- Збереження стану
Очікуваний результат:
class Player {
constructor(elementId, gameAreaId) {
this.element = document.getElementById(elementId);
this.gameArea = document.getElementById(gameAreaId);
this.x = 0;
this.y = 0;
this.speed = 10;
this.setupControls();
this.element.style.transition = 'all 0.1s ease';
}
setupControls() {
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'w':
case 'ArrowUp':
this.move(0, -this.speed);
break;
case 's':
case 'ArrowDown':
this.move(0, this.speed);
break;
case 'a':
case 'ArrowLeft':
this.move(-this.speed, 0);
break;
case 'd':
case 'ArrowRight':
this.move(this.speed, 0);
break;
}
});
}
move(dx, dy) {
const newX = this.x + dx;
const newY = this.y + dy;
const maxX = this.gameArea.clientWidth - this.element.clientWidth;
const maxY = this.gameArea.clientHeight - this.element.clientHeight;
this.x = Math.max(0, Math.min(newX, maxX));
this.y = Math.max(0, Math.min(newY, maxY));
this.element.style.left = this.x + 'px';
this.element.style.top = this.y + 'px';
}
getPosition() {
return { x: this.x, y: this.y };
}
}
// Використання:
const player = new Player('player', 'game-area');
Промпт #4: Перевірка зіткнень
Задача: Створити функцію для перевірки зіткнення між об'єктами.
Створи функцію JavaScript для перевірки зіткнення (collision detection) між двома прямокутними об'єктами. Функція має: 1. Приймати координати та розміри двох об'єктів (x, y, width, height) 2. Повертати true, якщо об'єкти перетинаються 3. Використовувати алгоритм AABB (Axis-Aligned Bounding Box) 4. Бути оптимізованою для частого виклику Додай приклад використання для перевірки зіткнення гравця з ворогом.
Ключові моменти:
- Вхідні параметри
- Алгоритм (AABB)
- Оптимізація
- Приклад використання
Очікуваний результат:
function checkCollision(obj1, obj2) {
return obj1.x < obj2.x + obj2.width &&
obj1.x + obj1.width > obj2.x &&
obj1.y < obj2.y + obj2.height &&
obj1.y + obj1.height > obj2.y;
}
// Використання:
const player = { x: 50, y: 50, width: 32, height: 32 };
const enemy = { x: 70, y: 60, width: 32, height: 32 };
if (checkCollision(player, enemy)) {
console.log('Collision detected!');
// Обробка зіткнення
}
Промпт #5: Система життів
Задача: Створити систему життів з візуальним відображенням.
Створи функцію JavaScript для системи життів гравця. Система має: 1. Зберігати поточну кількість життів (початково 3) 2. Відображати життя у вигляді сердечок в елементі з ID 'lives-display' 3. Функцію loseLife для втрати життя 4. Функцію addLife для додавання життя 5. Callback onGameOver, який викликається при 0 життів Використай HTML-символи для сердечок (♥). Додай приклад використання.
Що важливо:
- Початкова кількість життів
- Візуальне відображення
- Функції управління
- Callback для game over
Очікуваний результат:
class LivesManager {
constructor(initialLives, onGameOver) {
this.lives = initialLives;
this.maxLives = initialLives;
this.onGameOver = onGameOver;
this.display = document.getElementById('lives-display');
this.updateDisplay();
}
loseLife() {
if (this.lives > 0) {
this.lives--;
this.updateDisplay();
if (this.lives === 0) {
this.onGameOver();
}
}
}
addLife() {
if (this.lives < this.maxLives) {
this.lives++;
this.updateDisplay();
}
}
updateDisplay() {
const hearts = '♥'.repeat(this.lives);
const emptyHearts = '♡'.repeat(this.maxLives - this.lives);
this.display.innerHTML = hearts + emptyHearts;
}
getLives() {
return this.lives;
}
}
// Використання:
const livesManager = new LivesManager(3, () => {
alert('Game Over!');
});
// При зіткненні з ворогом:
livesManager.loseLife();
Поради для створення ігрової логіки
1. Модульність
Розбивайте логіку на окремі класи або модулі (scoreManager, timer, player).
2. Стан гри
Зберігайте стан гри в одному місці для легкого управління.
3. Event-driven підхід
Використовуйте події та callback'и для комунікації між компонентами.
4. Оптимізація
Уникайте частих DOM-маніпуляцій, використовуйте requestAnimationFrame для анімацій.
5. Тестування
Тестуйте кожну механіку окремо перед інтеграцією.
Інтеграція всіх механік
Ось приклад, як об'єднати всі механіки в одну гру:
class Game {
constructor() {
this.score = scoreManager;
this.timer = new GameTimer(60, () => this.gameOver());
this.player = new Player('player', 'game-area');
this.lives = new LivesManager(3, () => this.gameOver());
this.enemies = [];
this.init();
}
init() {
this.timer.start();
this.gameLoop();
}
gameLoop() {
// Перевірка зіткнень
this.enemies.forEach(enemy => {
if (checkCollision(this.player.getPosition(), enemy)) {
this.lives.loseLife();
this.score.addScore(-10);
}
});
requestAnimationFrame(() => this.gameLoop());
}
gameOver() {
this.timer.stop();
alert(`Game Over! Your score: ${this.score.getScore()}`);
}
}
// Запуск гри:
const game = new Game();
Висновок
Створення ігрової логіки за допомогою AI-асистентів - це швидкий спосіб прототипувати та навчатися. Використовуйте наведені промпти як основу, адаптуйте їх під свої потреби та експериментуйте.
Основні takeaways:
- Розбивайте логіку на модулі
- Використовуйте класи для інкапсуляції
- Додавайте callback'и для гнучкості
- Тестуйте кожну механіку окремо
- Оптимізуйте для продуктивності
Тепер ви готові створювати ігрову логіку за допомогою AI! Експериментуйте та створюйте свої ігри.