Merge pull request #229 from ash-heinz/feature/flappy-game

Feature/flappy game

Author: steam-bell-92

README.md

@@ -301,6 +301,20 @@ Find all the hidden differences between two interactive canvases!
 - ⏱️ Built-in timer and hint system
 - 🌐 *Web App Exclusive Project*
 
+</td>
+</tr>
+<tr>
+<td width="50%">
+
+#### 🐦 Flappy Game
+Fly through pipes and survive as long as possible!
+- 🦅 Interactive jump mechanics
+- 💥 Collision detection
+- 🏆 High score tracking
+```bash
+python games/Flappy-Game/Flappy-Game.py
+```
+
 </td>
 </tr>
 </table>

games/Flappy-Game/Flappy-Game.py

@@ -0,0 +1,117 @@
+from random import randrange
+from turtle import *
+import math
+
+class Vector:
+    def __init__(self, x, y):
+        self.x = x
+        self.y = y
+
+    def move(self, other):
+        """move this vector by adding another vector to it"""
+        self.x += other.x
+        self.y += other.y
+
+    def __sub__(self, other):
+        """subtract two vectors to find the difference"""
+        return Vector(self.x - other.x, self.y - other.y)
+
+    def __abs__(self):
+        return math.hypot(self.x, self.y)
+
+bird = Vector(0, 0)
+balls = []
+score = 0
+game_over = False
+
+def tap(x, y):
+    """move bird up in response to screen tap or reset if dead"""
+    global game_over
+    
+    if game_over:
+        reset_game()
+    else:
+        up = Vector(0, 30)
+        bird.move(up)
+
+def reset_game():
+    """resets the game state and starts the loop again"""
+    global game_over, score
+    game_over = False
+    score = 0
+    bird.x, bird.y = 0, 0
+    balls.clear()
+    move()
+
+def inside(point):
+    """return True if point on screen"""
+    return -200 < point.x < 200 and -200 < point.y < 200
+
+def draw(alive):
+    clear()
+
+    goto(bird.x, bird.y)
+    if alive:
+        dot(10, '#06b6d4')
+    else:
+        dot(10, '#ef4444')
+
+    for ball in balls:
+        goto(ball.x, ball.y)
+        dot(20, '#8b5cf6')
+
+    goto(-190, 180)
+    color('white') 
+    write(f"Score: {score}", font=("Arial", 14, "bold"))
+
+    if not alive:
+        goto(0, 20)
+        write("💥 GAME OVER 💥", align="center", font=("Arial", 24, "bold"))
+        goto(0, -20)
+        write("🔄 Click anywhere to Play Again", align="center", font=("Arial", 14, "normal"))
+
+    update()
+
+def move():
+    """update object positions"""
+    global score, game_over
+    
+    if game_over:
+        return
+
+    bird.y -= 5
+
+    for ball in balls:
+        ball.x -= 3
+
+    if randrange(10) == 0:
+        y = randrange(-199, 199)
+        ball = Vector(199, y)
+        balls.append(ball)
+
+    while len(balls) > 0 and not inside(balls[0]):
+        balls.pop(0)
+        score += 1  
+
+    if not inside(bird):
+        game_over = True
+        draw(False)
+        return
+
+    for ball in balls:
+        if abs(ball - bird) < 15:
+            game_over = True
+            draw(False)
+            return
+
+    draw(True)
+    ontimer(move, 50)
+
+setup(420, 420, 370, 0)
+bgcolor('#0f172a')
+hideturtle()
+up()
+tracer(False)
+onscreenclick(tap)
+move()
+done()

web-app/index.html

@@ -320,7 +320,6 @@ <h1>🎮 Python Mini Projects</h1>
     </nav>
 
     <main id="main-content" tabindex="-1">
-
         <!-- Search & Category Tabs -->
         <section class="tabs-section" aria-label="Search and Project categories">
             <div class="container">
@@ -405,31 +404,31 @@ <h3>Rock Paper Scissors</h3>
                     </div>
 
                     <div class="project-card" data-category="games" data-project="dice-rolling"
-                         data-tags="game,random,animation,probability">
+                        data-tags="game,random,animation,probability">
                         <div class="card-icon">🎲</div>
                         <h3>Dice Rolling</h3>
                         <p>Roll the dice with 3D animation!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="games" data-project="coin-flip"
-                         data-tags="game,random,animation,probability,heads,tails">
+                        data-tags="game,random,animation,probability,heads,tails">
                         <div class="card-icon">🪙</div>
                         <h3>Coin Flip</h3>
                         <p>Heads or tails with spinning animation!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="games" data-project="number-guessing"
-                         data-tags="game,logic,loops,conditional">
+                        data-tags="game,logic,loops,conditional">
                         <div class="card-icon">🎯</div>
                         <h3>Number Guessing</h3>
                         <p>Guess the secret number!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="games" data-project="hangman"
-                         data-tags="game,word,letters,logic,string">
+                        data-tags="game,word,letters,logic,string">
                         <div class="card-icon">🎮</div>
                         <h3>Hangman</h3>
                         <p>Classic word-guessing game!</p>
@@ -492,6 +491,15 @@ <h3>Whack-a-Mole</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
+                    <div class="project-card" data-category="games" data-project="flappy-game">
+                        <div class="card-icon">🐦</div>
+                        <h3>Flappy Game</h3>
+                        <p>Dodge the incoming balls and survive!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
+                    <div class="project-card" data-category="math" data-project="fibonacci"
+                        data-tags="math,sequence,series,loops,recursion">
                     <div class="project-card" data-category="games" data-project="game2048"
                          data-tags="game,puzzle,2048,logic,tiles">
                         <div class="card-icon">🟦</div>
@@ -510,88 +518,87 @@ <h3>Fibonacci Series</h3>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="progression-recognizer"
-                         data-tags="math,sequence,progression,arithmetic,geometric">
+                        data-tags="math,sequence,progression,arithmetic,geometric">
                         <div class="card-icon">📐</div>
                         <h3>AP/GP/AGP/HP Recognizer</h3>
                         <p>Identify progression types from any sequence.</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="pascal-triangle"
-                         data-tags="math,triangle,visualization,recursion">
+                        data-tags="math,triangle,visualization,recursion">
                         <div class="card-icon">🔺</div>
                         <h3>Pascal's Triangle</h3>
                         <p>Beautiful hexagon visualization!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="armstrong"
-                         data-tags="math,number,digits,power">
+                        data-tags="math,number,digits,power">
                         <div class="card-icon">💎</div>
                         <h3>Armstrong Numbers</h3>
                         <p>Check special number properties!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="calculator"
-                         data-tags="math,calculator,arithmetic,operations">
+                        data-tags="math,calculator,arithmetic,operations">
                         <div class="card-icon">🧮</div>
                         <h3>Calculator</h3>
                         <p>Your mathematical companion!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="collatz"
-                         data-tags="math,conjecture,algorithm,sequence">
+                        data-tags="math,conjecture,algorithm,sequence">
                         <div class="card-icon">🔢</div>
                         <h3>Collatz Conjecture</h3>
                         <p>Explore the 3n+1 problem!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="prime-analyzer"
-                         data-tags="math,prime,factors,algorithm">
+                        data-tags="math,prime,factors,algorithm">
                         <div class="card-icon">🔱</div>
                         <h3>Prime Analyzer</h3>
                         <p>All-in-one prime number toolkit!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="projectile-motion"
-                         data-tags="math,physics,motion,calculation">
+                        data-tags="math,physics,motion,calculation">
                         <div class="card-icon">🚀</div>
                         <h3>Projectile Motion</h3>
                         <p>Calculate TOF, Hmax, and Range with physics!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="coordinate-polar-transform"
-                         data-tags="math,coordinate,transformation,geometry">
+                        data-tags="math,coordinate,transformation,geometry">
                         <div class="card-icon">🧭</div>
                         <h3>Coordinate to Polar</h3>
                         <p>Transform Cartesian (x, y) into polar (r, theta).</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="derivative-calculator"
-                         data-tags="math,calculus,derivative,polynomial">
+                        data-tags="math,calculus,derivative,polynomial">
                         <div class="card-icon">∂</div>
                         <h3>Derivative Calculator</h3>
                         <p>Compute 1st/nth polynomial derivatives and evaluate them.</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <!-- UTILITIES -->
                     <div class="project-card" data-category="utilities" data-project="morse-code"
-                         data-tags="utility,morse,translation,communication">
+                        data-tags="utility,morse,translation,communication">
                         <div class="card-icon">📻</div>
                         <h3>Morse Code</h3>
                         <p>Translate with lights &amp; sound!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="utilities" data-project="tower-of-hanoi"
-                         data-tags="utility,puzzle,recursion,algorithm">
+                        data-tags="utility,puzzle,recursion,algorithm">
                         <div class="card-icon">🗼</div>
                         <h3>Tower of Hanoi</h3>
                         <p>Solve the classic puzzle!</p>