Добавить flappy-bird.html

2026-05-28 18:45:28 +03:00
parent 4537e1f729
commit 337a57f45f
1 changed files with 165 additions and 0 deletions
@@ -0,0 +1,165 @@
+<!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>