165 lines
4.9 KiB
HTML
165 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Flappy Bird</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: linear-gradient(180deg, #4ec0ca 0%, #87ceeb 60%, #2d8f2d 60%, #1a5c1a 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
font-family: 'Segoe UI', sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
canvas {
|
|
border: 3px solid #333;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 40px rgba(0,0,0,0.4);
|
|
cursor: pointer;
|
|
}
|
|
h1 { color: #fff; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
|
|
#info { color: #fff; margin-top: 10px; font-size: 1.1em; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🐦 Flappy Bird</h1>
|
|
<canvas id="game" width="320" height="480"></canvas>
|
|
<div id="info">Клик / Пробел — прыжок</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('game');
|
|
const ctx = canvas.getContext('2d');
|
|
let bird, pipes, score, bestScore = 0, gameOver, started, frame, gravity, jump;
|
|
|
|
function init() {
|
|
bird = { x: 80, y: 200, vy: 0, r: 15 };
|
|
pipes = [];
|
|
score = 0;
|
|
gameOver = false;
|
|
started = false;
|
|
frame = 0;
|
|
gravity = 0.35;
|
|
jump = -6.5;
|
|
}
|
|
|
|
function addPipe() {
|
|
const gap = 130;
|
|
const topH = 60 + Math.random() * (canvas.height - gap - 160);
|
|
pipes.push({ x: canvas.width, top: topH, bottom: topH + gap, w: 50, scored: false });
|
|
}
|
|
|
|
function update() {
|
|
if (!started || gameOver) return;
|
|
frame++;
|
|
bird.vy += gravity;
|
|
bird.y += bird.vy;
|
|
if (frame % 90 === 0) addPipe();
|
|
pipes.forEach(p => {
|
|
p.x -= 2.5;
|
|
if (!p.scored && p.x + p.w < bird.x) {
|
|
p.scored = true;
|
|
score++;
|
|
}
|
|
});
|
|
pipes = pipes.filter(p => p.x > -p.w);
|
|
if (bird.y + bird.r > canvas.height - 20 || bird.y - bird.r < 0) {
|
|
gameOver = true;
|
|
if (score > bestScore) bestScore = score;
|
|
}
|
|
pipes.forEach(p => {
|
|
if (bird.x + bird.r > p.x && bird.x - bird.r < p.x + p.w) {
|
|
if (bird.y - bird.r < p.top || bird.y + bird.r > p.bottom) {
|
|
gameOver = true;
|
|
if (score > bestScore) bestScore = score;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function draw() {
|
|
const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
|
|
grad.addColorStop(0, '#4ec0ca');
|
|
grad.addColorStop(0.6, '#87ceeb');
|
|
grad.addColorStop(0.6, '#2d8f2d');
|
|
grad.addColorStop(1, '#1a5c1a');
|
|
ctx.fillStyle = grad;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
pipes.forEach(p => {
|
|
ctx.fillStyle = '#5cb85c';
|
|
ctx.fillRect(p.x, 0, p.w, p.top);
|
|
ctx.fillRect(p.x, p.bottom, p.w, canvas.height - p.bottom);
|
|
ctx.fillStyle = '#4cae4c';
|
|
ctx.fillRect(p.x - 3, p.top - 20, p.w + 6, 20);
|
|
ctx.fillRect(p.x - 3, p.bottom, p.w + 6, 20);
|
|
});
|
|
|
|
ctx.fillStyle = '#8B4513';
|
|
ctx.fillRect(0, canvas.height - 20, canvas.width, 20);
|
|
|
|
ctx.fillStyle = '#FFD700';
|
|
ctx.beginPath();
|
|
ctx.arc(bird.x, bird.y, bird.r, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.fillStyle = '#FFF';
|
|
ctx.beginPath();
|
|
ctx.arc(bird.x + 5, bird.y - 4, 5, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.fillStyle = '#000';
|
|
ctx.beginPath();
|
|
ctx.arc(bird.x + 7, bird.y - 4, 2, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.fillStyle = '#FF6347';
|
|
ctx.beginPath();
|
|
ctx.moveTo(bird.x + bird.r, bird.y);
|
|
ctx.lineTo(bird.x + bird.r + 10, bird.y - 3);
|
|
ctx.lineTo(bird.x + bird.r + 10, bird.y + 3);
|
|
ctx.fill();
|
|
|
|
ctx.fillStyle = '#fff';
|
|
ctx.font = 'bold 28px Segoe UI';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(score, canvas.width / 2, 40);
|
|
|
|
if (!started) {
|
|
ctx.fillStyle = 'rgba(0,0,0,0.4)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#fff';
|
|
ctx.font = 'bold 24px Segoe UI';
|
|
ctx.fillText('Нажмите чтобы начать', canvas.width / 2, canvas.height / 2);
|
|
}
|
|
if (gameOver) {
|
|
ctx.fillStyle = 'rgba(0,0,0,0.5)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#ff4444';
|
|
ctx.font = 'bold 32px Segoe UI';
|
|
ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 20);
|
|
ctx.fillStyle = '#fff';
|
|
ctx.font = '20px Segoe UI';
|
|
ctx.fillText('Счёт: ' + score + ' | Рекорд: ' + bestScore, canvas.width / 2, canvas.height / 2 + 20);
|
|
ctx.fillText('Клик — заново', canvas.width / 2, canvas.height / 2 + 55);
|
|
}
|
|
}
|
|
|
|
function loop() { update(); draw(); requestAnimationFrame(loop); }
|
|
|
|
function flap() {
|
|
if (gameOver) { init(); return; }
|
|
if (!started) started = true;
|
|
bird.vy = jump;
|
|
}
|
|
|
|
canvas.addEventListener('click', flap);
|
|
canvas.addEventListener('touchstart', e => { e.preventDefault(); flap(); });
|
|
document.addEventListener('keydown', e => { if (e.code === 'Space') { e.preventDefault(); flap(); } });
|
|
|
|
init();
|
|
loop();
|
|
</script>
|
|
</body>
|
|
</html> |