Как создать игры на JavaScript: от простых концепций к реализации

// Игровой объект с использованием простого объекта
const player = {
x: 100,
y: 200,
width: 32,
height: 48,
speed: 5,
health: 100,
move: function(direction) {
if (direction === 'left') this.x -= this.speed;
if (direction === 'right') this.x += this.speed;
// и т.д.
}
};

// Более современный подход с использованием классов
class GameObject {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}

update() {
// Логика обновления объекта
}

render(context) {
// Отрисовка объекта на canvas
}
}

class Player extends GameObject {
constructor(x, y) {
super(x, y, 32, 48);
this.speed = 5;
this.health = 100;
}

move(direction) {
// Реализация движения
}
}

const enemies = [];

// Создание нескольких врагов
for (let i = 0; i < 5; i++) {
enemies.push(new Enemy(Math.random() * canvas.width, 0));
}

// Обновление всех врагов в игровом цикле
function updateEnemies() {
for (const enemy of enemies) {
enemy.update();
// Проверка коллизий
if (checkCollision(player, enemy)) {
player.takeDamage(enemy.damage);
}
}
// Удаление "мертвых" врагов
enemies = enemies.filter(enemy => enemy.isAlive);
}

const GameState = {
LOADING: 'loading',
MENU: 'menu',
PLAYING: 'playing',
PAUSED: 'paused',
GAME_OVER: 'gameOver'
};

let currentState = GameState.LOADING;

function gameLoop() {
switch (currentState) {
case GameState.LOADING:
loadAssets();
break;
case GameState.MENU:
renderMenu();
break;
case GameState.PLAYING:
updateGame();
renderGame();
break;
case GameState.PAUSED:
renderPauseScreen();
break;
case GameState.GAME_OVER:
renderGameOver();
break;
}
requestAnimationFrame(gameLoop);
}

// Создание canvas элемента
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Настройка размера
canvas.width = 800;
canvas.height = 600;

// Отрисовка игрока
function drawPlayer(x, y, width, height) {
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, width, height);

// Добавим глаза для персонажа
ctx.fillStyle = 'white';
ctx.fillRect(x + 5, y + 5, 5, 5);
ctx.fillRect(x + width – 10, y + 5, 5, 5);
}

// Отрисовка врага
function drawEnemy(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
}

// Очистка экрана и отрисовка всего
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer(playerX, playerY, 30, 30);

// Отрисовка нескольких врагов
enemies.forEach(enemy => {
drawEnemy(enemy.x, enemy.y, enemy.radius);
});

requestAnimationFrame(render);
}

// Создание игрового поля
const gameContainer = document.getElementById('game-container');
gameContainer.style.width = '800px';
gameContainer.style.height = '600px';
gameContainer.style.position = 'relative';

// Создание игрока
function createPlayer(x, y) {
const player = document.createElement('div');
player.className = 'player';
player.style.width = '30px';
player.style.height = '30px';
player.style.backgroundColor = 'blue';
player.style.position = 'absolute';
player.style.left = x + 'px';
player.style.top = y + 'px';

gameContainer.appendChild(player);
return player;
}

// Обновление позиции игрока
function updatePlayerPosition(playerElement, x, y) {
playerElement.style.left = x + 'px';
playerElement.style.top = y + 'px';
}

// Создаем игрока и управляем им
const player = createPlayer(100, 100);

document.addEventListener('keydown', (e) => {
let x = parseInt(player.style.left);
let y = parseInt(player.style.top);

if (e.key === 'ArrowRight') x += 5;
if (e.key === 'ArrowLeft') x -= 5;
if (e.key === 'ArrowUp') y -= 5;
if (e.key === 'ArrowDown') y += 5;

updatePlayerPosition(player, x, y);
});

// Состояние игры
const game = {
player: {
x: 100,
y: 100,
speed: 5,
width: 32,
height: 32
},
enemies: [
{ x: 200, y: 150, speed: 2, width: 32, height: 32 },
{ x: 300, y: 250, speed: 3, width: 32, height: 32 }
],
keysPressed: {},
score: 0,
isGameOver: false
};

// Обработка нажатий клавиш
document.addEventListener('keydown', (e) => {
game.keysPressed[e.code] = true;
});

document.addEventListener('keyup', (e) => {
game.keysPressed[e.code] = false;
});

// Функция обновления состояния игры
function update(deltaTime) {
if (game.isGameOver) return;

// Обновление позиции игрока на основе нажатых клавиш
if (game.keysPressed['ArrowRight']) {
game.player.x += game.player.speed;
}
if (game.keysPressed['ArrowLeft']) {
game.player.x -= game.player.speed;
}
if (game.keysPressed['ArrowUp']) {
game.player.y -= game.player.speed;
}
if (game.keysPressed['ArrowDown']) {
game.player.y += game.player.speed;
}

// Обновление врагов
game.enemies.forEach(enemy => {
// Простая логика движения врага к игроку
if (enemy.x < game.player.x) enemy.x += enemy.speed;
else enemy.x -= enemy.speed;

if (enemy.y < game.player.y) enemy.y += enemy.speed;
else enemy.y -= enemy.speed;

// Проверка столкновений
if (checkCollision(game.player, enemy)) {
game.isGameOver = true;
}
});

// Увеличение счета со временем
game.score += deltaTime / 1000;
}

// Функция проверки столкновений (простая реализация 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;
}

// Функция отрисовки
function render() {
// Очистка canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Отрисовка игрока
ctx.fillStyle = 'blue';
ctx.fillRect(game.player.x, game.player.y, game.player.width, game.player.height);

// Отрисовка врагов
ctx.fillStyle = 'red';
game.enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});

// Отрисовка счета
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText(`Счет: ${Math.floor(game.score)}`, 20, 30);

// Отрисовка экрана окончания игры
if (game.isGameOver) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = '36px Arial';
ctx.textAlign = 'center';
ctx.fillText('ИГРА ОКОНЧЕНА', canvas.width/2, canvas.height/2);
ctx.font = '24px Arial';
ctx.fillText(`Ваш счет: ${Math.floor(game.score)}`, canvas.width/2, canvas.height/2 + 40);
}
}

// Время последнего кадра
let lastTime = 0;

// Основной игровой цикл
function gameLoop(timestamp) {
// Расчет времени, прошедшего с предыдущего кадра
const deltaTime = timestamp – lastTime;
lastTime = timestamp;

update(deltaTime);
render();

// Запрос следующего кадра
requestAnimationFrame(gameLoop);
}

// Запуск игрового цикла
requestAnimationFrame(gameLoop);

// Объект для отслеживания состояния ввода
const input = {
keys: {},
mouse: {
x: 0,
y: 0,
pressed: false
},
touches: []
};

// Обработчики клавиатуры
window.addEventListener('keydown', (e) => {
input.keys[e.code] = true;
});

window.addEventListener('keyup', (e) => {
input.keys[e.code] = false;
});

// Обработчики мыши
canvas.addEventListener('mousemove', (e) => {
// Получаем координаты относительно canvas
const rect = canvas.getBoundingClientRect();
input.mouse.x = e.clientX – rect.left;
input.mouse.y = e.clientY – rect.top;
});

canvas.addEventListener('mousedown', () => {
input.mouse.pressed = true;
});

canvas.addEventListener('mouseup', () => {
input.mouse.pressed = false;
});

// Обработчики сенсорного ввода
canvas.addEventListener('touchstart', (e) => {
e.preventDefault(); // Предотвращаем зум и другие действия браузера
const rect = canvas.getBoundingClientRect();
input.touches = Array.from(e.touches).map(touch => ({
id: touch.identifier,
x: touch.clientX – rect.left,
y: touch.clientY – rect.top
}));
});

// В функции update используем состояние ввода
function update() {
// Проверка нажатий клавиш
if (input.keys['ArrowRight']) {
player.x += player.speed;
}

// Проверка нажатия мыши
if (input.mouse.pressed) {
// Создание выстрела в направлении курсора
createBullet(player.x, player.y, input.mouse.x, input.mouse.y);
}

// и так далее...
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Космический защитник</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
border: 2px solid #333;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script src="game.js"></script>
</body>
</html>

// game.js
// 1. Инициализация canvas и контекста
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;

// 2. Создание основных объектов игры
const game = {
isRunning: true,
score: 0
};

const player = {
x: canvas.width / 2,
y: canvas.height – 50,
width: 50,
height: 30,
speed: 5,
color: '#0F0'
};

const enemies = [];
const bullets = [];
const particles = [];

// 3. Система управления
const input = {
keys: {},
mouse: { x: 0, y: 0, pressed: false }
};

// Обработчики событий
window.addEventListener('keydown', (e) => {
input.keys[e.code] = true;
});

window.addEventListener('keyup', (e) => {
input.keys[e.code] = false;
});

canvas.addEventListener('click', () => {
// Создаем пулю при клике
fireBullet();
});

// 4. Инициализация игрового цикла
let lastTime = 0;
requestAnimationFrame(gameLoop);

// Создание нового врага
function spawnEnemy() {
const enemy = {
x: Math.random() * (canvas.width – 40),
y: -30,
width: 40,
height: 30,
speed: 1 + Math.random() * 3,
color: 'red'
};
enemies.push(enemy);
}

// Создание пули
function fireBullet() {
const bullet = {
x: player.x + player.width / 2 – 2.5,
y: player.y,
width: 5,
height: 15,
speed: 7,
color: '#FFF'
};
bullets.push(bullet);
}

// Создание эффекта взрыва
function createExplosion(x, y) {
for (let i = 0; i < 20; i++) {
const particle = {
x: x,
y: y,
size: 2 + Math.random() * 3,
speed: 1 + Math.random() * 3,
angle: Math.random() * Math.PI * 2,
color: `hsl(${Math.random() * 30 + 10}, 100%, 50%)`,
lifespan: 30 + Math.random() * 30,
age: 0
};
particles.push(particle);
}
}

// Проверка столкновений
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;
}

// Функция обновления состояния игры
function update(deltaTime) {
// Обработка управления
if (input.keys['ArrowLeft'] && player.x > 0) {
player.x -= player.speed;
}
if (input.keys['ArrowRight'] && player.x < canvas.width – player.width) {
player.x += player.speed;
}

// Периодическое создание врагов
if (Math.random() < 0.02) {
spawnEnemy();
}

// Обновление положения пуль
bullets.forEach((bullet, bulletIndex) => {
bullet.y -= bullet.speed;

// Удаление пуль, вышедших за границы
if (bullet.y < 0) {
bullets.splice(bulletIndex, 1);
}
});

// Обновление положения врагов
enemies.forEach((enemy, enemyIndex) => {
enemy.y += enemy.speed;

// Проверка столкновений с пулями
bullets.forEach((bullet, bulletIndex) => {
if (checkCollision(bullet, enemy)) {
// Удаляем пулю и врага
bullets.splice(bulletIndex, 1);
enemies.splice(enemyIndex, 1);

// Создаем эффект взрыва
createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);

// Увеличиваем счет
game.score += 100;
}
});

// Проверка столкновения с игроком или выхода за границу
if (enemy.y > canvas.height) {
enemies.splice(enemyIndex, 1);
game.score -= 50; // Штраф за пропуск врага
} else if (checkCollision(enemy, player)) {
game.isRunning = false; // Игра окончена
}
});

// Обновление частиц эффектов
particles.forEach((particle, index) => {
particle.x += Math.cos(particle.angle) * particle.speed;
particle.y += Math.sin(particle.angle) * particle.speed;
particle.age++;

if (particle.age > particle.lifespan) {
particles.splice(index, 1);
}
});
}

// Функция отрисовки
function render() {
// Очистка экрана
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Отрисовка игрока
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);

// Отрисовка кабины
ctx.fillStyle = '#007';
ctx.fillRect(player.x + player.width / 2 – 5, player.y – 5, 10, 10);

// Отрисовка пуль
ctx.fillStyle = '#FFF';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});

// Отрисовка врагов
enemies.forEach(enemy => {
ctx.fillStyle = enemy.color;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});

// Отрисовка частиц
particles.forEach(particle => {
ctx.fillStyle = particle.color;
ctx.globalAlpha = 1 – (particle.age / particle.lifespan);
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
ctx.globalAlpha = 1;
});

// Отрисовка счета
ctx.fillStyle = '#FFF';
ctx.font = '20px Arial';
ctx.fillText(`Счет: ${game.score}`, 20, 30);

// Экран окончания игры
if (!game.isRunning) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FFF';
ctx.font = '36px Arial';
ctx.textAlign = 'center';
ctx.fillText('ИГРА ОКОНЧЕНА', canvas.width / 2, canvas.height / 2);
ctx.font = '24px Arial';
ctx.fillText(`Ваш счет: ${game.score}`, canvas.width / 2, canvas.height / 2 + 50);
ctx.font = '18px Arial';
ctx.fillText('Кликните, чтобы начать заново', canvas.width / 2, canvas.height / 2 + 100);
}
}

// Игровой цикл
function gameLoop(timestamp) {
// Расчет времени между кадрами
const deltaTime = timestamp – lastTime;
lastTime = timestamp;

if (game.isRunning) {
update(deltaTime);
}

render();
requestAnimationFrame(gameLoop);
}

// Рестарт игры
canvas.addEventListener('click', () => {
if (!game.isRunning) {
// Сбрасываем состояние игры
game.isRunning = true;
game.score = 0;
player.x = canvas.width / 2;
enemies.length = 0;
bullets.length = 0;
particles.length = 0;
} else {
// Стреляем, если игра идет
fireBullet();
}
});