Эта игра представляет собой простой пример, который можно доработать и улучшить. Например, можно добавить различные бонусы и улучшения, звуковые эффекты, разные уровни сложности и т.д.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="flappy-bird.js"></script>
</body>
</html>flappy-bird.js
// Получаем элемент canvas и контекст рисования
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Создаем объект игрока
const player = {
x: 50,
y: canvas.height / 2,
width: 30,
height: 30,
speed: 1.5,
gravity: 0.5,
jump: 10,
color: "yellow",
};
// Создаем массив труб
const pipes = [];
// Создаем объект счета
let score = 0;
// Функция рисования игрока
function drawPlayer() {
ctx.beginPath();
ctx.rect(player.x, player.y, player.width, player.height);
ctx.fillStyle = player.color;
ctx.fill();
ctx.closePath();
}
// Функция обновления игрока
function updatePlayer() {
// Применяем гравитацию
player.y += player.gravity;
// Обрабатываем нажатие клавиши пробел
if (keys.Space) {
player.y -= player.jump;
}
// Проверяем столкновение с трубами
pipes.forEach((pipe) => {
if (
player.x + player.width > pipe.x &&
player.x < pipe.x + pipe.width &&
player.y + player.height > pipe.y &&
player.y < pipe.y + pipe.height
) {
alert("Game Over!");
document.location.reload();
}
});
// Проверяем, вышел ли игрок за границы экрана
if (player.y < 0 || player.y + player.height > canvas.height) {
alert("Game Over!");
document.location.reload();
}
}
// Функция рисования труб
function drawPipes() {
pipes.forEach((pipe) => {
ctx.beginPath();
ctx.rect(pipe.x, pipe.y, pipe.width, pipe.height);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
});
}
// Функция обновления труб
function updatePipes() {
// Добавляем новую трубу каждые 100 кадров
if (frameCount % 100 === 0) {
const gap = 100;
const minHeight = 40;
const maxHeight = canvas.height - gap - minHeight;
const height = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
pipes.push({
x: canvas.width,
y: 0,
width: 30,
height: height,
});
pipes.push({
x: canvas.width,
y: height + gap,
width: 30,
height: canvas.height - height - gap,
});
}
// Перемещаем трубы
pipes.forEach((pipe) => {
pipe.x -= player.speed;
// Удаляем трубы, которые вышли за границы экрана
if (pipe.x + pipe.width < 0) {
pipes.splice(pipes.indexOf(pipe), 1);
score++;
}
});
}
// Функция рисования счета
function drawScore() {
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.fillText(`Score: ${score}`, 10, 30);
}
// Функция обновления игры
function update() {
// Обновляем игрока и трубы
updatePlayer();
updatePipes();
// Очищаем экран и рисуем игрока, трубы и счет
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawPipes();
drawScore();
// Увеличиваем счетчик кадров
frameCount++;
// Запускаем функцию обновления снова через 10 миллисекунд
setTimeout(update, 10);
}
// Обработчик нажатия клавиш
const keys = {};
document.addEventListener("keydown", (event) => {
keys[event.code] = true;
});
document.addEventListener("keyup", (event) => {
keys[event.code] = false;
});
// Запускаем игру
let frameCount = 0;
update();