From d0d0ffb873cdef93bd8c867cf4089bedf7d344f6 Mon Sep 17 00:00:00 2001
From: Omar Najjar <omar@bored.investments>
Date: Sun, 12 Jan 2025 01:25:47 +1100
Subject: [PATCH] x

---
 index.html | 355 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 355 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2a66f6c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Flappy Panda</title>
+    <style>
+        canvas {
+            border: 2px solid black;
+            display: block;
+            margin: 0 auto;
+        }
+        body {
+            background-color: #f0f0f0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        #restartButton {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, 60px);
+            padding: 10px 20px;
+            font-size: 18px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            display: none;
+        }
+        #restartButton:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas" width="400" height="600"></canvas>
+    <button id="restartButton">Restart Game</button>
+
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+
+        // Game variables
+        let panda = {
+            x: 50,
+            y: 300,
+            velocity: 0,
+            gravity: 0.5,
+            jump: -8,
+            size: 30
+        };
+
+        let pipes = [];
+        let score = 0;
+        let gameOver = false;
+        const pipeGap = 150;
+        const pipeWidth = 50;
+        const bambooColor = '#90B652';
+        const bambooJointColor = '#748F3E';
+        let blinkTimer = 0;
+        let isBlinking = false;
+        let cheekOpacity = 0.6;
+
+        // Event listeners
+        document.addEventListener('keydown', function(e) {
+            if (e.code === 'Space') {
+                if (gameOver) {
+                    resetGame();
+                } else {
+                    panda.velocity = panda.jump;
+                }
+            }
+        });
+
+        document.addEventListener('click', function() {
+            if (gameOver) {
+                resetGame();
+            } else {
+                panda.velocity = panda.jump;
+            }
+        });
+
+        // Game functions
+        function createPipe() {
+            let gap = Math.random() * (canvas.height - pipeGap - 100) + 50;
+            pipes.push({
+                x: canvas.width,
+                topHeight: gap,
+                passed: false
+            });
+        }
+
+        function resetGame() {
+            panda = {
+                x: 50,
+                y: 300,
+                velocity: 0,
+                gravity: 0.5,
+                jump: -8,
+                size: 30
+            };
+            pipes = [];
+            score = 0;
+            gameOver = false;
+            document.getElementById('restartButton').style.display = 'none';
+        }
+
+        function drawPanda() {
+            ctx.save();
+            ctx.translate(panda.x, panda.y);
+            ctx.rotate(Math.min(Math.max(panda.velocity * 0.04, -0.5), 0.5));
+            
+            // Fluffy white body with slight shadow
+            ctx.fillStyle = '#ffffff';
+            ctx.beginPath();
+            ctx.arc(0, 0, panda.size, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Add subtle fluff details
+            ctx.strokeStyle = '#f0f0f0';
+            ctx.lineWidth = 2;
+            for(let i = 0; i < 8; i++) {
+                ctx.beginPath();
+                ctx.arc(0, 0, panda.size - 2, i * Math.PI/4, (i + 0.5) * Math.PI/4);
+                ctx.stroke();
+            }
+            
+            // Ears (more rounded and fluffy)
+            ctx.fillStyle = '#333';
+            drawFluffyEar(-15, -20, 14, -Math.PI/6);
+            drawFluffyEar(15, -20, 14, Math.PI/6);
+            
+            // Rosy cheeks
+            ctx.fillStyle = `rgba(255, 183, 197, ${cheekOpacity})`;
+            ctx.beginPath();
+            ctx.arc(-18, 2, 7, 0, Math.PI * 2);
+            ctx.arc(18, 2, 7, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Eye patches (softer and more oval)
+            ctx.fillStyle = '#333';
+            ctx.beginPath();
+            ctx.ellipse(-12, -4, 13, 11, Math.PI/12, 0, Math.PI * 2);
+            ctx.ellipse(12, -4, 13, 11, -Math.PI/12, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Eyes (with blinking animation)
+            if (!isBlinking) {
+                // White eyes with shine
+                ctx.fillStyle = 'white';
+                ctx.beginPath();
+                ctx.arc(-12, -4, 6.5, 0, Math.PI * 2);
+                ctx.arc(12, -4, 6.5, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Larger pupils with shine
+                ctx.fillStyle = '#333';
+                ctx.beginPath();
+                ctx.arc(-12, -4, 3.5, 0, Math.PI * 2);
+                ctx.arc(12, -4, 3.5, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Eye shine (two spots for extra cuteness)
+                ctx.fillStyle = 'white';
+                ctx.beginPath();
+                ctx.arc(-13, -5, 1.5, 0, Math.PI * 2);
+                ctx.arc(-11, -3, 1, 0, Math.PI * 2);
+                ctx.arc(11, -5, 1.5, 0, Math.PI * 2);
+                ctx.arc(13, -3, 1, 0, Math.PI * 2);
+                ctx.fill();
+            } else {
+                // Closed eyes (cute curved lines)
+                ctx.strokeStyle = 'white';
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.arc(-12, -4, 6, Math.PI/6, Math.PI - Math.PI/6);
+                ctx.arc(12, -4, 6, Math.PI/6, Math.PI - Math.PI/6);
+                ctx.stroke();
+            }
+            
+            // Cute pink heart-shaped nose
+            ctx.fillStyle = '#ffb7c5';
+            ctx.beginPath();
+            ctx.moveTo(0, 2);
+            ctx.quadraticCurveTo(-5, -2, 0, -4);
+            ctx.quadraticCurveTo(5, -2, 0, 2);
+            ctx.fill();
+            
+            // Kawaii mouth
+            ctx.strokeStyle = '#333';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(0, 2, 8, 0.1, Math.PI - 0.1);
+            ctx.stroke();
+            
+            ctx.restore();
+        }
+
+        function drawPipes() {
+            pipes.forEach(pipe => {
+                // Draw main bamboo stalk
+                ctx.fillStyle = bambooColor;
+                ctx.fillRect(pipe.x, 0, pipeWidth, pipe.topHeight);
+                ctx.fillRect(pipe.x, pipe.topHeight + pipeGap, pipeWidth, 
+                    canvas.height - pipe.topHeight - pipeGap);
+                
+                // Draw bamboo joints
+                const jointHeight = 20;
+                for(let y = jointHeight; y < pipe.topHeight; y += jointHeight) {
+                    ctx.fillStyle = bambooJointColor;
+                    ctx.fillRect(pipe.x - 2, y, pipeWidth + 4, 4);
+                }
+                for(let y = pipe.topHeight + pipeGap; y < canvas.height; y += jointHeight) {
+                    ctx.fillStyle = bambooJointColor;
+                    ctx.fillRect(pipe.x - 2, y, pipeWidth + 4, 4);
+                }
+                
+                // Add bamboo leaves
+                drawBambooLeaves(pipe.x, pipe.topHeight);
+                drawBambooLeaves(pipe.x, pipe.topHeight + pipeGap);
+            });
+        }
+
+        function drawBambooLeaves(x, y) {
+            ctx.save();
+            ctx.fillStyle = '#A8CD65';
+            ctx.translate(x, y);
+            
+            // Draw several leaves
+            for(let i = 0; i < 3; i++) {
+                ctx.beginPath();
+                ctx.moveTo(pipeWidth, 0);
+                ctx.quadraticCurveTo(pipeWidth + 20, -10 - i * 10, pipeWidth + 40, -5 - i * 5);
+                ctx.quadraticCurveTo(pipeWidth + 20, 0 - i * 10, pipeWidth, 0);
+                ctx.fill();
+            }
+            ctx.restore();
+        }
+
+        function drawFluffyEar(x, y, size, rotation) {
+            ctx.save();
+            ctx.translate(x, y);
+            ctx.rotate(rotation);
+            
+            // Main ear shape
+            ctx.beginPath();
+            ctx.arc(0, 0, size, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Fluffy details
+            ctx.strokeStyle = '#444';
+            ctx.lineWidth = 1;
+            for(let i = 0; i < 6; i++) {
+                ctx.beginPath();
+                ctx.arc(0, 0, size - 2, i * Math.PI/3, (i + 0.5) * Math.PI/3);
+                ctx.stroke();
+            }
+            
+            ctx.restore();
+        }
+
+        function checkCollision(pipe) {
+            if (panda.y - panda.size < 0 || panda.y + panda.size > canvas.height) {
+                return true;
+            }
+
+            if (panda.x + panda.size > pipe.x && panda.x - panda.size < pipe.x + pipeWidth) {
+                if (panda.y - panda.size < pipe.topHeight || 
+                    panda.y + panda.size > pipe.topHeight + pipeGap) {
+                    return true;
+                }
+            }
+            return false;
+        }
+
+        function update() {
+            if (gameOver) {
+                ctx.fillStyle = 'black';
+                ctx.font = '48px Arial';
+                ctx.fillText('Game Over!', 100, 250);
+                ctx.font = '24px Arial';
+                ctx.fillText('Score: ' + score, 160, 300);
+                document.getElementById('restartButton').style.display = 'block';
+                return;
+            }
+            document.getElementById('restartButton').style.display = 'none';
+
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Update panda
+            panda.velocity += panda.gravity;
+            panda.y += panda.velocity;
+
+            // Create new pipes
+            if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 200) {
+                createPipe();
+            }
+
+            // Update pipes
+            pipes.forEach((pipe, index) => {
+                pipe.x -= 2;
+
+                if (pipe.x + pipeWidth < panda.x && !pipe.passed) {
+                    score++;
+                    pipe.passed = true;
+                }
+
+                if (checkCollision(pipe)) {
+                    gameOver = true;
+                }
+
+                if (pipe.x + pipeWidth < 0) {
+                    pipes.splice(index, 1);
+                }
+            });
+
+            // Draw everything
+            drawPipes();
+            drawPanda();
+
+            // Draw score
+            ctx.fillStyle = 'black';
+            ctx.font = '24px Arial';
+            ctx.fillText('Score: ' + score, 10, 30);
+
+            // Add this to your update function before drawing the panda
+            blinkTimer++;
+            if (blinkTimer > 100) { // Blink every ~3 seconds
+                isBlinking = true;
+                if (blinkTimer > 110) { // Blink duration
+                    blinkTimer = 0;
+                    isBlinking = false;
+                }
+            }
+
+            // Add this to make the cheeks pulse slightly
+            cheekOpacity = 0.6 + Math.sin(Date.now() / 500) * 0.1;
+
+            requestAnimationFrame(update);
+        }
+
+        // Start the game
+        update();
+
+        document.getElementById('restartButton').addEventListener('click', function() {
+            resetGame();
+            update();
+        });
+    </script>
+</body>
+</html> 
\ No newline at end of file
