Stellar Pinball Game Creation

Let me understand the task. I need to create a brand new game that hasn't been done before. The last game was a roguelike deckbuilder called "Aether Spire". I need to make something different and unique.

Let me first check what games already exist in the collection to avoid repeating genres, then come up with a fresh game idea.

Let me install the shell tools and space skills tools to get started.

Let me check the existing games to understand what genres are already covered, so I can create something fresh.

Let me analyze the existing games to understand what genres are already covered:

1. Gravity Golf - physics, puzzle, space, golf
2. Neon Breakout - arcade, action, retro, breakout
3. Snake - arcade, retro, classic
4. Realm Guard - strategy, tower defense
5. Type Storm - typing, educational, action
6. Pixel Painter - puzzle, pixel art, creative
7. Echo Maze - memory, puzzle, brain training
8. Orbit Weaver - arcade, retro, survival
9. Quantum Circuit - puzzle, educational, quantum
10. Prism - puzzle, optics, light
11. Picross Quest - puzzle, logic, nonogram
12. Beat Drop - rhythm, music, arcade
13. Sudoku Sage - puzzle, logic, sudoku
14. Word Hunt - word search, puzzle
15. Mine Sweeper - minesweeper, logic, puzzle
16. 2048 - puzzle, strategy, merge
17. Mastermind - logic, deduction, code breaking
18. Box Pusher - puzzle, sokoban
19. Tower of Hanoi - puzzle, recursion
20. Pulse - memory, brain training, sequence
21. Neon Flip - strategy, board game (Reversi/Othello)
22. Circuit Breaker - puzzle, logic (Lights Out)
23. Battleship - strategy, deduction, naval
24. Block Cascade - puzzle, arcade (Tetris)
25. Gem Cascade - puzzle, match-3
26. Neon Flow - puzzle, flow
27. Gridlock - puzzle, sliding block (Rush Hour)
28. Word Forge - word, puzzle (Wordle)
29. Math Blitz - math, brain training
30. Dungeon Delver - roguelike, rpg
31. Code Quest - programming, puzzle, educational
32. Alchemy Lab - crafting, puzzle, discovery
33. Cosmic Forge - idle, incremental, simulation
34. Aether Spire - roguelike, deckbuilder, card game

So we have 34 games. Let me think about what genres haven't been covered yet:

• Racing game - not covered
• Fighting game - not covered
• Sports game (other than golf) - not covered
• Pinball - not covered
• Pong - not covered
• Asteroids-style shooter - not covered
• Space invaders - not covered
• Platformer - not covered
• Endless runner - not covered
• Fishing game - not covered
• Cooking game - not covered
• Farming/garden game - not covered
• City builder - not covered
• Conway's Game of Life - not covered
• Sandbox/physics sandbox - not covered
• Drawing/physics game like Crayon Physics - not covered
• Music sequencer/creator - not covered
• Color mixing puzzle - not covered
• Pipe connecting/plumber puzzle - partially covered by Neon Flow
• Labyrinth/marble tilt game - not covered
• Darts/throwing game - not covered
• Bowling - not covered
• Billiards/pool - not covered
• Mini golf - partially covered by Gravity Golf
• Archery game - not covered
• Reaction time game - not covered
• Whack-a-mole - not covered
• Bubble shooter - not covered
• Zuma/marble shooter - not covered
• Peggle/pachinko - not covered
• Plinko - not covered
• Slot machine - not covered
• Dice game - not covered
• Card game (non-deckbuilder) - not covered (like solitaire, poker, etc.)
• Chess - not covered
• Checkers - not covered
• Connect Four - not covered
• Tic-tac-toe - not covered
• Backgammon - not covered
• Dominoes - not covered
• Mahjong - not covered
• Hangman - not covered
• Crossword - not covered
• Anagram game - not covered
• Typing game - covered (Type Storm)
• Color matching - partially covered
• Shape stacking - covered (Block Cascade)
• Bubble pop - not covered
• Fruit slicing (Fruit Ninja style) - not covered
• Doodle/physics drawing - not covered
• Rope swinging game - not covered
• Bouncing ball game - not covered
• Catapult/trebuchet game - not covered
• Angry Birds style - not covered
• Lemmings style - not covered
• Worms style - not covered
• Turn-based strategy (non-card) - not covered
• Real-time strategy - not covered
• 4X game - not covered
• Civilization style - not covered
• Trading/economic game - not covered
• Stock market game - not covered
• Tycoon game - not covered
• Theme park builder - not covered
• Rollercoaster builder - not covered
• Bridge builder - not covered
• Tower stacking - not covered
• Jenga - not covered
• Domino chain - not covered
• Rube Goldberg machine - not covered
• Music maker/beat maker - not covered
• Pixel art editor - covered (Pixel Painter)
• Color theory game - not covered
• Optical illusion game - not covered
• Reflex/reaction game - not covered
• Simon says - covered (Pulse)
• Memory match/concentration - not covered
• Sliding puzzle (15-puzzle) - not covered
• Rubik's cube - not covered
• Tangram - not covered
• Jigsaw puzzle - not covered
• Spot the difference - not covered
• Hidden object - not covered
• Trivia/quiz - not covered
• Geography game - not covered
• Chemistry game - not covered
• Biology game - not covered
• Astronomy game - not covered
• Music theory game - not covered
• Language learning game - not covered
• Spelling bee - not covered
• Anagram solver - not covered
• Boggle - not covered
• Scrabble - not covered
• Crossword - not covered
• Cryptogram - not covered
• Sudoku variant - covered
• Kakuro - not covered
• Futoshiki - not covered
• Hitori - not covered
• Nurikabe - not covered
• Slitherlink - not covered
• Hashi (bridges) - not covered
• Akari (light up) - not covered
• Shikaku - not covered
• Star Battle - not covered
• Heyawake - not covered
• Yajilin - not covered

OK, there are many options. Let me think about what would be:

1. Unique and not done before
2. Useful to the audience
3. Fun and engaging
4. Technically distinct from previous games

I think a physics-based bridge builder game would be really interesting and unique. The player draws structural elements to create bridges that can support weight, and then tests them by sending vehicles across. This combines physics simulation, creativity, and puzzle-solving.

Actually, let me think about something even more unique and useful. How about a constellation drawing / star mapping game? The player connects stars to form constellations, learning about real astronomy. That's educational and unique.

Or how about a color theory / color mixing puzzle game? The player mixes primary colors to match target colors, learning about additive/subtractive color mixing. This is educational and visually appealing.

Actually, let me think about what would be really engaging and different. How about a gravity-based particle simulation sandbox where the player places gravitational bodies and watches particles orbit? That's more of a toy than a game though.

Let me think about something that's a proper game with goals, progression, and fun mechanics...

How about a labyrinth marble tilt game? The player tilts the board to roll a marble through a maze to reach the goal, avoiding holes. This uses physics, is tactile and fun, and hasn't been done. But it might be too simple.

How about a catapult physics game? The player adjusts angle and power to launch projectiles at targets, with physics-based trajectories. This is fun and educational (teaches projectile motion).

Actually, I think a really cool and unique game would be a constellation connect-the-dots astronomy game. The player connects stars to form real constellations, learning about mythology and astronomy. It would be visually stunning with a night sky theme, educational, and mechanically unique (connect-the-dots with a twist).

Wait, let me think about something even more engaging. How about a bubble shooter / Zuma-style marble shooter? That's a popular genre not yet covered. But it might be too similar to existing match-3 games.

Let me think about what's truly unique...

How about a farming/garden simulation game? The player plants seeds, waters them, watches them grow, harvests crops, and sells them. This is a relaxing simulation game that hasn't been done. It could have a day/night cycle, weather, different crop types, and progression.

Actually, I think a pinball game would be really cool and unique. It's a classic arcade genre not yet covered, with physics-based ball movement, flippers, bumpers, targets, and scoring. It would be visually exciting and mechanically distinct.

Or how about a Pachinko/Plinko game? Drop balls through a field of pegs, aiming for high-value slots. This is physics-based, visually exciting, and unique.

Let me go with something really creative and unique. How about a constellation stargazing game where you connect stars to form constellations? Here's my vision:

"Star Weaver" - A constellation drawing game where:

• The player sees a night sky with stars
• They need to connect stars in the right order to form real constellations
• Each level features a different constellation (Ursa Major, Orion, Cassiopeia, etc.)
• Stars glow when connected correctly
• The player learns about the mythology and astronomy of each constellation
• There's a free mode where they can create their own constellations
• Beautiful night sky aesthetic with twinkling stars, nebulae, and shooting stars

Actually, this might be too similar to Neon Flow (connect the dots). Let me think of something else.

How about a rhythm-based action game that's different from Beat Drop? Like a rhythm platformer where you jump to the beat?

Or how about a fishing game? Cast your line, wait for a bite, reel in the fish. Different fish types, locations, upgrades. This is a relaxing game genre not yet covered.

Actually, let me go with something really unique and fun: a physics-based demolition game. The player places explosives to demolish structures, trying to bring down buildings while meeting certain criteria (e.g., all debris below a certain height). This is physics-based, creative, and unique.

Hmm, but implementing a good physics engine for demolition would be complex. Let me think of something more feasible.

How about a color mixing puzzle game? The player has to mix colors to match target colors. This teaches color theory (RGB additive, CMY subtractive) and is visually appealing. Each level gives you primary colors and you need to combine them to match a target.

Actually, I think I'll go with a pinball game. It's a classic arcade genre, visually exciting, physics-based, and completely different from anything in the collection. Let me design it:

"Neon Pinball" or "Cosmic Pinball" - A pinball game with:

• Physics-based ball movement with gravity, friction, and elastic collisions
• Two flippers controlled by left/right keys (or touch)
• Bumpers that bounce the ball and award points
• Drop targets that disappear when hit
• Ramps and lanes
• Multi-ball mode
• Tilt mechanic
• Score multipliers
• Beautiful neon/space aesthetic
• Sound effects using Web Audio API
• High score persistence

Actually, wait. Let me reconsider. A pinball game with proper physics is quite complex. Let me think about whether I can pull it off well.

The key physics components:

1. Ball with position, velocity, and radius
2. Gravity pulling the ball down
3. Collision with walls (reflect velocity)
4. Collision with circular bumpers (reflect based on normal)
5. Collision with flippers (rotating line segments)
6. Collision with drop targets (rectangles)
7. Collision with ramps/curved surfaces

This is doable with a simple physics engine. The trickiest part is flipper collision, but I can handle it with line-segment collision and angular velocity transfer.

Let me go with this. It's a great choice because:

• It's a classic arcade genre not in the collection
• It's physics-based (different from the match-3/puzzle games)
• It's visually exciting with neon aesthetics
• It's mechanically deep with scoring, multipliers, multi-ball
• It's fun and engaging for more than 2 minutes
• It uses Canvas rendering (different from DOM-based games)
• It uses Web Audio for sound

Let me design the game in detail:

Cosmic Pinball - A space-themed pinball game

Layout:

• Vertical playfield (e.g., 400x600 canvas)
• Ball starts at top, rolls down through bumpers and targets
• Two flippers at the bottom
• Side walls with one-way gates
• A plunger to launch the ball

Elements:

• Bumpers (circular): Bounce ball, +100 points, light up on hit
• Drop targets (rectangular): Disappear when hit, +50 points, clear all for bonus
• Slingshots (triangular): Bounce ball away from drain area
• Spinner: Rotates when ball passes through, +10 points per spin
• Rollover targets: Light up when ball rolls over, +25 points
• Kickout hole: Ball gets trapped, then kicked out after a delay
• Multi-ball: Hit certain targets to release additional balls

Scoring:

• Bumpers: 100 pts
• Drop targets: 50 pts each, 500 bonus for clearing all
• Spinner: 10 pts per spin
• Rollovers: 25 pts each
• Multi-ball: 2x score while multiple balls in play
• Jackpot: 5000 pts for completing all targets

Controls:

• Left flipper: Left arrow / A key / left side of screen tap
• Right flipper: Right arrow / D key / right side of screen tap
• Plunger: Space / down arrow / tap center
• Tilt: Up arrow / W key (limited uses, penalized if overused)

Visual style:

• Dark space background with stars
• Neon glowing elements
• Particle effects on hits
• Screen shake on big hits
• Ball trail effect
• Glowing score display

Let me build this. I'll use HTML5 Canvas for rendering, Web Audio API for sound, and vanilla JS for everything.

Actually, let me reconsider the name. "Cosmic Pinball" is good but let me think of something more unique... "Stellar Pinball"? "Astro Flipper"? "Void Ball"? "Quantum Pinball"?

I'll go with "Stellar Pinball" - it's catchy and fits the space theme.

Wait, actually, let me think about this more carefully. The collection already has a lot of neon/space themed games. Let me make this visually distinct. How about a retro arcade pinball with a different aesthetic?

Actually, the space theme works well for pinball because it allows for creative table elements (planets as bumpers, comets, black holes, etc.). Let me keep the space theme but make it visually distinct from the other games.

Let me think about the color scheme. The other neon games use cyan/magenta/purple. I'll use a different palette - maybe warm oranges and golds with deep blue background, like a sunset in space. Or I could go with a retro green/amber CRT aesthetic.

Actually, let me go with a unique aesthetic: retro arcade pinball with a deep purple/gold color scheme. The playfield has a dark purple background with gold and orange neon elements. This is distinct from the cyan/magenta neon games.

Let me start building this. I'll create a comprehensive pinball game with:

1. Physics engine (ball movement, collisions)
2. Game elements (bumpers, targets, flippers, slingshots, spinner, rollovers)
3. Scoring system with multipliers and bonuses
4. Multi-ball mode
5. Ball saving
6. Visual effects (particles, glow, screen shake, ball trail)
7. Sound effects (Web Audio API)
8. High score persistence
9. Touch and keyboard controls
10. Responsive design

Let me write the code now. This is going to be a substantial single HTML file.

Let me plan the physics carefully:

Ball physics:

• Position (x, y), velocity (vx, vy), radius
• Gravity: vy += gravity * dt
• Friction: vx *= friction, vy *= friction (very slight)
• Max speed cap to prevent tunneling

Collision with walls (line segments):

• Find closest point on segment to ball center
• If distance < ball radius, reflect velocity along normal
• Push ball out of wall

Collision with bumpers (circles):

• If distance between centers < ball radius + bumper radius
• Reflect velocity along the normal (direction from bumper to ball)
• Add extra bounce velocity (bumper kick)
• Award points

Collision with flippers (rotating capsules):

• Flipper is a line segment with a pivot point and rotation angle
• When flipper is active, it rotates from rest to active position
• Ball collision with flipper: treat as line segment collision
• If flipper is moving, add tangential velocity to ball based on flipper angular velocity

Collision with drop targets (rectangles):

• AABB-circle collision
• If hit, mark target as down, award points
• Don't bounce ball (or slight bounce)

Collision with slingshots (triangles):

• Treat as line segments with extra bounce velocity

Let me code this up. I'll be thorough and make it polished.

Actually, let me reconsider the scope. A full pinball game with all these elements is quite complex. Let me focus on making a solid, fun pinball game with the core elements done well:

Core elements:

1. Ball with physics
2. Two flippers
3. 3-4 bumpers
4. Drop targets (bank of 3-5)
5. Slingshots (2, near flippers)
6. Spinner
7. Rollover targets (3, at top)
8. Plunger
9. Drain (ball loss)
10. Ball save

Scoring:

• Bumpers: 100 pts
• Drop targets: 50 pts each, 1000 bonus for clearing bank
• Spinner: 25 pts
• Rollovers: 50 pts each, 500 bonus for lighting all
• Multi-ball: 2x multiplier
• Jackpot: 5000 pts

Game flow:

• 3 balls per game
• Launch with plunger
• Play until ball drains
• Bonus awarded at end of ball
• Game over after 3 balls
• High score saved

Let me write this now. I'll create the file at /space/games/stellar-pinball/index.html.

Let me think about the canvas dimensions. A typical pinball table is tall and narrow. I'll use 480x720 (2:3 ratio) for the playfield. I'll make it responsive by scaling.

Let me code the physics engine first, then the game elements, then the rendering, then the UI.

Here's my plan for the code structure:

Let me write this now. I'll aim for a polished, complete game.

Actually, I realize I should think more carefully about the flipper physics, as that's the most critical part of pinball.

A flipper has:

• A pivot point (fixed position)
• A length
• A rest angle (pointing slightly down and inward)
• An active angle (pointing up and inward)
• An angular velocity when activating

When the ball collides with the flipper:

1. Find the closest point on the flipper line segment to the ball
2. Calculate the normal (perpendicular to the flipper at that point)
3. If the ball is moving towards the flipper, reflect its velocity
4. If the flipper is moving (activating), add velocity to the ball based on:
   • The angular velocity of the flipper
   • The distance from the pivot to the collision point
   • The direction of the flipper's motion at that point

This gives the ball a "kick" when the flipper hits it, which is the core mechanic of pinball.

Let me implement this carefully.

For the flipper, I'll represent it as:

• pivot: {x, y}
• length: number
• restAngle: number (radians)
• activeAngle: number (radians)
• currentAngle: number (radians, interpolated)
• angularVelocity: number (radians per frame)
• isActive: boolean
• radius: number (thickness of flipper)

The flipper tip position:

• tipX = pivot.x + cos(currentAngle) * length
• tipY = pivot.y + sin(currentAngle) * length

For collision, I treat the flipper as a capsule (line segment with radius). The collision detection:

1. Find closest point on the line segment (pivot to tip) to the ball center
2. If distance < ballRadius + flipperRadius, collision occurred
3. Normal = normalize(ballCenter - closestPoint)
4. Reflect ball velocity along normal
5. If flipper is moving, calculate the velocity of the flipper at the collision point:
   • pointVelocity = angularVelocity × distanceFromPivot (perpendicular to the flipper)
   • Add this to the ball's reflected velocity

Let me code this up now. I'll write the complete game.

Let me also think about the table layout. Here's my design:

Actually, let me design a more interesting layout. Pinball tables have lanes on the sides that the ball can travel through. Let me add:

• Left and right side lanes (with one-way gates at the top)
• A plunger lane on the right side
• An upper loop

Here's a more detailed layout:

Hmm, this is getting complex. Let me simplify and just make a clean, fun pinball table. I'll focus on the core gameplay rather than an overly complex table.

Let me design a simpler but still fun table:

The plunger lane is on the right side, separated by a wall. The ball launches up through the lane and enters the play area at the top.

Let me code this now. I'll write the complete HTML file.

Actually, I want to make sure this game is really polished and fun. Let me think about what makes pinball fun:

1. Ball control - The flippers need to feel responsive and give good kicks
2. Satisfying hits - Bumpers should have visual and audio feedback
3. Progression - Clearing drop targets, lighting rollovers, building up to multi-ball
4. Risk/reward - Going for hard shots vs. playing safe
5. Flow - The ball should move smoothly around the table
6. Juice - Screen shake, particles, glow effects, sound

Let me make sure I implement all of these.

For the visual style, I'll go with a deep space theme:

• Background: Dark navy/purple with stars
• Bumpers: Glowing gold/orange circles
• Drop targets: Cyan rectangles
• Flippers: Bright orange/red
• Slingshots: Purple triangles
• Spinner: Silver/white
• Rollovers: Green lights
• Ball: Silver with glow trail
• Score: Gold text

This gives a rich, colorful pinball table that's distinct from the other neon games.

Let me write the code now. I'll create a comprehensive, well-structured game.

One more thing - I need to make sure the physics are stable. The main issues with simple physics engines are:

1. Tunneling - Ball passes through objects at high speed. I'll use sub-stepping (multiple physics steps per frame) and/or continuous collision detection.
2. Jittering - Ball gets stuck in corners. I'll add a small epsilon and position correction.
3. Energy gain - Ball speeds up indefinitely. I'll cap velocity and add slight friction.

For sub-stepping, I'll run the physics at a fixed timestep (e.g., 1/120s) and do multiple steps per frame if needed.

OK, let me write the code now. This will be a large file but I'll make it clean and well-organized.

Let me start writing:

Let me write the full game now. I'll be very thorough.

Actually, I realize I should think about the game more carefully before writing 1000+ lines of code. Let me plan the key systems:

Physics System

• Fixed timestep simulation (120 Hz physics, 60 Hz render)
• Ball: position, velocity, radius, active flag
• Gravity: constant downward acceleration
• Collision types:
  • Circle-Circle (ball vs bumper)
  • Circle-LineSegment (ball vs walls, flippers)
  • Circle-Rectangle (ball vs drop targets)
  • Circle-Triangle (ball vs slingshots)
  • Point-Circle (ball center vs rollovers)
  • Ball vs spinner (line segment crossing)

Flipper System

• Each flipper has: pivot, length, rest angle, active angle, current angle, angular velocity
• When activated, rotates from rest to active over ~3 frames
• When released, rotates back over ~5 frames (slower return)
• Collision: treat as capsule (line segment + radius)
• On collision: reflect + add flipper velocity at contact point

Scoring System

• Track score, multiplier, bonus
• Bumpers: 100 × multiplier
• Drop targets: 50 × multiplier each, 1000 bonus for clearing bank
• Spinner: 25 × multiplier per spin
• Rollovers: 50 × multiplier each, 500 bonus for lighting all 3
• Multi-ball: 2× multiplier while 2+ balls in play
• End-of-ball bonus: sum of all bonuses accumulated

Game States

• READY: Ball in plunger, waiting to launch
• PLAYING: Ball in play
• BALL_LOST: Ball drained, brief pause before next ball
• GAME_OVER: All balls used, show final score
• HIGH_SCORE: New high score entry

Multi-ball System

• Hit all drop targets to release a second ball
• While 2+ balls in play, 2× score multiplier
• Multi-ball resets when down to 1 ball

Ball Save

• After launching, 5-second ball save period
• If ball drains during save, relaunch for free
• Visual indicator (glowing drain area)

Visual Effects

• Particle system for hits
• Screen shake on big hits
• Ball trail
• Glow effects on all elements
• Twinkling stars in background
• Flashing lights on bumpers when hit

Audio

• Bumper hit: short pop sound
• Flipper: thwack sound
• Drop target: ding sound
• Spinner: whoosh sound
• Drain: descending tone
• Multi-ball: fanfare
• Bonus: ascending arpeggio

OK, I think I have a solid plan. Let me write the code now.

Let me think about the table layout more carefully with actual coordinates:

Canvas: 440 × 640

Plunger lane: x = 400-440, y = 0-640 (right side) Play area: x = 0-400, y = 0-640

Walls:

• Left wall: x = 0, y = 0-580
• Right wall (play area): x = 400, y = 100-580 (gate at top)
• Top wall: y = 0, x = 0-440
• Bottom: open drain area

Actually, let me make the plunger lane narrower and the play area wider:

Canvas: 460 × 680

Plunger lane: x = 420-460, y = 0-680 Play area: x = 10-420, y = 0-680

Hmm, let me just use a clean layout. I'll define the walls as line segments.

Let me think about this differently. I'll define the table as a set of wall segments, and place the elements (bumpers, targets, etc.) at specific positions. The physics engine will handle collisions with all of these.

Here's my table design (in a 440×640 canvas):

Walls (line segments):

• Left wall: (20, 20) to (20, 540)
• Left bottom angle: (20, 540) to (160, 620) - angled wall leading to left flipper
• Right wall (inner): (400, 100) to (400, 540) - separates play area from plunger lane
• Right bottom angle: (400, 540) to (280, 620) - angled wall leading to right flipper
• Plunger lane right wall: (420, 20) to (420, 620)
• Plunger lane bottom: (400, 620) to (420, 620)
• Top wall: (20, 20) to (420, 20)
• One-way gate: (400, 100) - ball can pass from plunger lane to play area but not back

Bumpers (circles):

• Bumper 1: (140, 180), radius 22
• Bumper 2: (260, 180), radius 22
• Bumper 3: (200, 120), radius 22

Drop targets (rectangles):

• 4 targets at y=280, x=100, 160, 220, 280, width=40, height=15

Spinner:

• At (200, 360), a horizontal line segment that rotates

Rollovers:

• 3 at y=50, x=100, 200, 300, radius=15

Slingshots (triangles):

• Left: (60, 480) to (60, 530) to (110, 505)
• Right: (360, 480) to (360, 530) to (310, 505)

Flippers:

• Left flipper: pivot at (150, 590), length 70, rest angle = 0.5 rad (pointing right-down), active angle = -0.5 rad (pointing right-up)
• Right flipper: pivot at (270, 590), length 70, rest angle = π - 0.5 rad (pointing left-down), active angle = π + 0.5 rad (pointing left-up)

Wait, I need to think about the flipper angles more carefully. In pinball:

• Left flipper: pivot on the left, tip points right. Rest position: tip down. Active position: tip up.
• Right flipper: pivot on the right, tip points left. Rest position: tip down. Active position: tip up.

For the left flipper:

• Rest angle: ~30° below horizontal (pointing right and slightly down)
• Active angle: ~30° above horizontal (pointing right and slightly up)
• So rest angle ≈ 0.5 rad, active angle ≈ -0.5 rad

For the right flipper:

• Rest angle: ~150° from positive x-axis (pointing left and slightly down) = π - 0.5 ≈ 2.64 rad
• Active angle: ~210° from positive x-axis (pointing left and slightly up) = π + 0.5 ≈ 3.64 rad

Wait, that's not right. Let me think again.

In screen coordinates, y increases downward. So:

• 0 rad = pointing right
• π/2 rad = pointing down
• π rad = pointing left
• 3π/2 rad = pointing up

Left flipper (pivot on left, tip on right):

• Rest: tip points right and slightly down → angle ≈ 0.3 rad
• Active: tip points right and slightly up → angle ≈ -0.3 rad (or equivalently 2π - 0.3)

Right flipper (pivot on right, tip on left):

• Rest: tip points left and slightly down → angle ≈ π - 0.3 ≈ 2.84 rad
• Active: tip points left and slightly up → angle ≈ π + 0.3 ≈ 3.44 rad

When the left flipper activates, the angle decreases from 0.3 to -0.3 (rotating counterclockwise in screen coords, which is the flipper going up). When the right flipper activates, the angle increases from 2.84 to 3.44 (rotating clockwise in screen coords, which is the flipper going up).

The angular velocity for the left flipper when activating is negative (angle decreasing). The angular velocity for the right flipper when activating is positive (angle increasing).

For the flipper kick, the velocity at the contact point is:

• v = ω × r (cross product in 2D)
• Where ω is the angular velocity and r is the vector from pivot to contact point
• In 2D: v = ω × (-ry, rx) = (ω × -ry, ω × rx)

Wait, let me be more careful. In 2D, if we have angular velocity ω (scalar, positive = counterclockwise in math coords, but in screen coords positive = clockwise), and a point at position r relative to the pivot, then the velocity of that point is:

v = ω × r_perp

where r_perp = (-ry, rx) for counterclockwise rotation.

But in screen coordinates, y is flipped, so positive ω means clockwise rotation visually. Let me just work in screen coordinates directly.

If the flipper angle is θ and it's changing at rate dθ/dt, then a point at distance d along the flipper from the pivot has position:

• px = pivot.x + d * cos(θ)
• py = pivot.y + d * sin(θ)

The velocity of that point is:

• vx = -d * sin(θ) * dθ/dt
• vy = d * cos(θ) * dθ/dt

So the velocity is perpendicular to the flipper, with magnitude d * |dθ/dt|.

For the left flipper activating (θ going from 0.3 to -0.3, so dθ/dt < 0):

• vx = -d * sin(θ) * (negative) = positive (pushing ball to the right) ← wait, this depends on θ
• Actually, at θ = 0 (horizontal), sin(θ) = 0, so vx = 0, and vy = d * cos(0) * (negative) = negative (pushing ball up). That's correct - the flipper pushes the ball up when it flips.

OK, this makes sense. Let me implement it.

For the flipper animation, I'll use a simple approach:

• When activated, set target angle to active angle
• When released, set target angle to rest angle
• Each frame, move current angle towards target at a fixed rate
• The angular velocity is (target - current) clamped to a max rate

Actually, for better feel, I'll use a spring-like approach:

• The flipper has a current angle and angular velocity
• A spring force pulls it towards the target angle
• This gives a snappy activation and smooth return

Or even simpler: just lerp the angle towards the target with a high speed for activation and lower speed for return. The angular velocity is the change per frame.

Let me go with the simple lerp approach:

• Activation speed: 0.5 rad per frame (at 120Hz physics, that's 60 rad/s - very fast)
• Return speed: 0.15 rad per frame (at 120Hz, that's 18 rad/s - slower)

This gives a snappy flip and a slower return, which feels right for pinball.

OK, I think I've planned enough. Let me write the code now.

Let me also think about the plunger. The plunger is a spring-loaded launcher. When the player holds the plunger key, it compresses (visual indicator). When released, it launches the ball upward with force proportional to the compression.

Plunger mechanics:

• Hold space/down to charge (0 to 1 over ~1 second)
• Release to launch ball with velocity proportional to charge
• Ball travels up the plunger lane and enters the play area at the top
• One-way gate prevents ball from re-entering plunger lane

Let me code this all up now. I'll write the complete game.

Let me also think about what happens when the ball gets stuck. I'll add:

• A "ball stuck" timer - if the ball hasn't moved much in 5 seconds, give it a nudge
• A tilt mechanic - the player can nudge the table slightly, which adds a small random velocity to the ball. Too many tilts = tilt warning and ball drain.

Actually, for simplicity, I'll implement the nudge/tilt as:

• Press up/W to nudge the table
• This adds a small upward velocity to the ball
• 3 nudges within 3 seconds = tilt penalty (ball drains)
• Visual shake effect on nudge

OK, let me write the code now. I'll create the file.

Let me think about the overall structure of the JavaScript code:

This is a clean structure. Let me write it all out now.

Actually, I realize I should just start writing the code. Let me create the file. I'll write it in one go, being very careful about the physics and game logic.

Let me think about one more thing: the table layout. I want to make sure the ball flows well around the table. The key is:

1. The ball should be able to travel from the plunger lane to the top of the play area
2. The ball should bounce around the bumpers in the upper area
3. The ball should be able to hit the drop targets in the middle
4. The ball should flow down to the flippers
5. The flippers should be able to send the ball back up

For the table shape, I'll use:

• Straight side walls in the upper portion
• Angled walls in the lower portion (leading to the flippers)
• A curved top (or just a flat top with the plunger lane entry)

Let me define the walls as an array of line segments:

Wait, I have the right inner wall and the plunger lane left wall overlapping. Let me reorganize:

The plunger lane is on the right side, from x=400 to x=420. The wall at x=400 separates the play area from the plunger lane. There's a one-way gate at the top (y=100) that lets the ball pass from the plunger lane into the play area.

So the walls are:

• Left wall: (20, 20) to (20, 480)
• Left lower angled: (20, 480) to (140, 580)
• Right wall (separating play area from plunger lane): (400, 100) to (400, 480)
• Right lower angled: (400, 480) to (280, 580)
• Top wall: (20, 20) to (420, 20)
• Plunger lane right wall: (420, 20) to (420, 620)
• Plunger lane bottom: (400, 620) to (420, 620)
• Plunger lane left wall (below gate): (400, 100) to (400, 620)

Wait, the right wall and the plunger lane left wall are the same wall (x=400). The gate is at y=100, so:

• (400, 100) to (400, 480) is the play area right wall
• (400, 100) to (400, 620) is the plunger lane left wall

These overlap from y=100 to y=480. That's fine - it's the same wall seen from both sides. The ball in the play area bounces off the left side, and the ball in the plunger lane bounces off the right side.

Actually, for collision purposes, I need to be careful about which side the ball is on. A line segment collision should check the normal direction. Let me handle this by defining walls with a "normal" direction, or by checking which side the ball is on.

For simplicity, I'll use a different approach: I'll define the walls as line segments and always push the ball to the correct side based on its current position. The collision function will:

1. Find the closest point on the segment to the ball
2. If the distance is less than the ball radius, push the ball out along the normal (from closest point to ball center)
3. Reflect the velocity along the normal

This works for both sides of the wall, which is what I want.

For the one-way gate at the top of the plunger lane, I'll handle it specially: the gate only blocks the ball if it's trying to go from the play area into the plunger lane (i.e., the ball is on the left side of x=400 and moving right). If the ball is in the plunger lane and moving up, it passes through the gate.

Actually, let me simplify the one-way gate. I'll make it a wall that only exists when the ball is in the play area (x < 400). When the ball is in the plunger lane (x > 400), the gate doesn't exist, so the ball can pass through to the play area at the top.

Hmm, this is getting complicated. Let me simplify the table design:

Instead of a separate plunger lane, I'll have the ball start at the bottom right and launch upward along the right wall. The right wall has a curved top that directs the ball into the play area. No separate lane needed.

Actually, you know what, let me just go with a simpler design. Many simple pinball games don't have a separate plunger lane. The ball just appears at the bottom and the player launches it upward.

Let me redesign:

Simplified table layout (440 × 640):

Walls:

• Left wall: (20, 20) to (20, 500) - straight
• Left lower angled: (20, 500) to (150, 590) - angled toward left flipper
• Right wall: (420, 20) to (420, 500) - straight
• Right lower angled: (420, 500) to (290, 590) - angled toward right flipper
• Top wall: (20, 20) to (420, 20) - straight (or slightly curved)
• Top left curve: (20, 20) to (60, 40) - slight curve (I'll approximate with segments)
• Top right curve: (420, 20) to (380, 40) - slight curve

Actually, for the top, I'll just use a flat wall. The ball bounces off it.

The plunger is at the bottom right, between the right wall and the right flipper area. When the player charges and releases the plunger, the ball shoots upward along the right wall.

Wait, but without a separate lane, the ball would just go straight up and come straight down. That's not fun. Let me add a separate plunger lane after all, but keep it simple.

OK, let me go with this design:

Table layout (460 × 680):

The table has a main play area and a narrow plunger lane on the right.

Main play area: x = 20 to 400 Plunger lane: x = 400 to 440 Wall between them: x = 400, from y = 120 to y = 580 Gate at top: x = 400, y = 120 (one-way, ball passes from lane to play area)

Walls:

1. Left wall: (20, 20) → (20, 500)
2. Left angled: (20, 500) → (150, 590)
3. Right play wall: (400, 120) → (400, 500)
4. Right angled: (400, 500) → (290, 590)
5. Top wall: (20, 20) → (440, 20)
6. Plunger right wall: (440, 20) → (440, 640)
7. Plunger bottom: (400, 640) → (440, 640)
8. Plunger left wall (below gate): (400, 120) → (400, 640)

The gate at (400, 120) is a one-way gate. When the ball is in the plunger lane (x > 400) and reaches y < 120, it passes into the play area. When the ball is in the play area (x < 400) and hits x = 400 at y < 120, it bounces off (can't re-enter plunger lane).

Actually, I'll implement the gate as follows:

• The wall at x = 400 exists from y = 120 to y = 640 (for both play area and plunger lane)
• Above y = 120, there's no wall, so the ball can freely move between the play area and plunger lane at the top
• But I'll add a small "deflector" at the top of the wall that directs the ball from the plunger lane into the play area (a short angled wall)

Let me add: 9. Gate deflector: (400, 120) → (370, 90) - angled wall that deflects ball from plunger lane into play area

This way, when the ball comes up the plunger lane, it hits the deflector and gets directed into the play area. When the ball is in the play area and tries to go right at the top, it hits the deflector from the other side and bounces back.

Actually, the deflector would block the ball from going right in the play area too. Let me think about this differently.

In real pinball, the one-way gate is a flap that only opens in one direction. I'll implement it as:

• A wall segment at (400, 100) to (400, 120) that only blocks the ball if the ball is on the left side (play area) and moving right
• If the ball is on the right side (plunger lane) and moving left/up, it passes through

I'll implement this as a special collision check in the physics step.

OK, I think I'm overcomplicating this. Let me just go with a simple design where the plunger launches the ball from the bottom right, and the ball goes up and to the left, entering the play area. No separate lane needed. The ball just starts at the bottom right corner and gets launched upward with some leftward velocity.

Here's my final simplified design:

Table layout (440 × 640):

The ball starts at position (400, 600) - bottom right area. The plunger launches it upward with velocity (random small leftward, -large upward). The ball travels up the right side, bounces off the top wall, and enters the play area.

Walls:

1. Left wall: (20, 20) → (20, 500)
2. Left angled: (20, 500) → (150, 590)
3. Right wall: (420, 20) → (420, 500)
4. Right angled: (420, 500) → (290, 590)
5. Top wall: (20, 20) → (420, 20)

That's it! Simple and clean. The ball bounces around inside these walls.

The drain is the gap between the two angled walls at the bottom, between x=150 and x=290 at y=590.

The flippers are positioned at:

• Left flipper: pivot at (155, 585), pointing right
• Right flipper: pivot at (285, 585), pointing left

The slingshots are above the flippers:

• Left slingshot: triangle around (80, 500)
• Right slingshot: triangle around (360, 500)

The bumpers are in the upper area:

• (140, 180), (280, 180), (210, 120)

The drop targets are in the middle:

• 4 targets at y=280

The spinner is below the drop targets:

• At (210, 360)

The rollovers are at the top:

• 3 at y=50

This is a clean, simple layout. Let me code it up now.

Actually wait, I just realized that without a plunger lane, the ball would need to be launched from somewhere. Let me add a small plunger area at the bottom right:

The right angled wall goes from (420, 500) to (320, 590). Below that, there's a small area where the ball sits before being launched. The plunger is at the bottom of this area.

Actually, let me just have the ball appear at a fixed position and launch upward when the player presses the plunger key. No need for a visual plunger lane. The ball just starts at (380, 590) and gets launched upward.

Hmm, but that's not very pinball-like. Let me add a simple plunger lane:

Updated table layout (440 × 640):

Plunger lane: x = 390 to 420, y = 100 to 610

• Right wall of plunger lane: (420, 20) → (420, 610)
• Left wall of plunger lane: (390, 100) → (390, 610)
• Bottom of plunger lane: (390, 610) → (420, 610)
• Gate at top: (390, 100) - one-way

Play area: x = 20 to 390, y = 20 to 610

• Left wall: (20, 20) → (20, 500)
• Left angled: (20, 500) → (150, 590)
• Right wall (play area): (390, 100) → (390, 500)
• Right angled: (390, 500) → (270, 590)
• Top wall: (20, 20) → (420, 20)

The ball starts in the plunger lane at (405, 590). When launched, it goes up the lane, passes through the gate at y=100, and enters the play area. The gate prevents the ball from going back into the plunger lane.

For the one-way gate, I'll implement it as:

• A wall segment from (390, 100) to (390, 80) that only blocks balls coming from the left (play area side)
• If the ball is at x > 390 (in the plunger lane) and moving left, it passes through
• If the ball is at x < 390 (in the play area) and moving right, it bounces off

Actually, let me just make the gate a wall that exists only when the ball is in the play area. I'll check the ball's x position: if ball.x < 390, the gate wall exists; if ball.x >= 390, the gate wall doesn't exist.

This is simple and works. Let me implement it this way.

OK, I've spent enough time planning. Let me write the code now. I'll create a comprehensive, polished pinball game.

Let me write the complete HTML file. I'll aim for around 1500-2000 lines of well-organized code.

Actually, let me think about one more thing: the rendering. I want the game to look great. Here's my plan for the visual style:

• Background: Dark gradient (deep purple to dark blue) with twinkling stars
• Table border: Glowing gold/orange lines
• Bumpers: Glowing circles with radial gradient (bright center, darker edge), flash white when hit
• Drop targets: Cyan rectangles with glow, fade out when hit
• Flippers: Bright orange/red with rounded ends, glow effect
• Slingshots: Purple triangles with glow, flash when hit
• Spinner: Silver rotating bar with motion blur effect
• Rollovers: Green circles that light up when ball passes over
• Ball: Silver/white circle with glow and trail
• Score display: Gold text at top
• Particles: Colorful sparks on hits
• Screen shake: On big hits

For the glow effect, I'll use canvas shadowBlur and shadowColor, or draw multiple circles with decreasing alpha and increasing radius.

Let me also add a nice UI:

• Score display at the top
• Ball count indicator
• Multiplier indicator
• Current bonus display
• Messages (e.g., "MULTI-BALL!", "JACKPOT!", "BALL SAVED!")
• Game over screen with final score and high score
• Start screen with instructions

OK, let me write the code now. I'll create the file in one go.

Let me think about the code size. This is going to be a big file. Let me write it in sections and combine them.

Actually, I'll just write the whole thing as one big file. Let me start.

One more consideration: I need to make the game responsive. The canvas should scale to fit the screen while maintaining aspect ratio. I'll use CSS to scale the canvas and handle touch events relative to the canvas position.

For touch controls:

• Tap left half of screen: left flipper
• Tap right half of screen: right flipper
• Tap and hold center bottom: plunger
• Swipe up: nudge

Actually, for simplicity:

• Touch left side: left flipper
• Touch right side: right flipper
• Touch and hold bottom center: plunger charge
• Double tap: nudge

Or even simpler:

• Touch left half: left flipper
• Touch right half: right flipper
• Plunger auto-charges when ball is in plunger area, tap to release

Let me go with:

• Touch/click left half of canvas: left flipper
• Touch/click right half of canvas: right flipper
• When ball is in plunger lane, a "LAUNCH" button appears, tap to launch
• Up arrow / W / swipe up: nudge

Actually, for the plunger, I'll make it automatic: when the ball is in the plunger lane, the player holds the space bar (or taps the launch button) to charge, and releases to launch. On mobile, there's a launch button.

Let me simplify further: when the ball is ready to launch, the player just presses space (or taps the launch button) and the ball launches with a fixed strong velocity. No charging mechanic. This is simpler and still fun.

OK, let me write the code now. For real this time.

Let me think about the structure one more time:

Let me write it all now. I'll create the file at /space/games/stellar-pinball/index.html.

I need to be very careful with the physics. Let me write the collision functions first and make sure they're correct.

Circle-LineSegment collision:

Circle-Circle collision (for bumpers):

Flipper collision: The flipper is a capsule (line segment with radius). I need to:

1. Find the closest point on the flipper segment to the ball
2. Check collision (distance < ball.radius + flipper.radius)
3. Push ball out
4. Reflect velocity
5. Add flipper velocity at contact point

This looks reasonable. Let me refine it as I write the full code.

OK, I'm going to write the complete game now. Let me create the file.

Let me think about the file size. I want to write this as a single HTML file. It's going to be large (maybe 2000+ lines). I'll write it in one go using the write_file tool.

Actually, given the size, let me write it in parts. I'll first write the HTML/CSS part, then append the JavaScript.

No, let me just write the whole thing at once. I'll be thorough but efficient.

Let me start coding now.

For the audio, I'll use the Web Audio API to generate sounds procedurally. Here are the sounds I need:

• Bumper hit: short sine wave pop (200Hz, 0.1s, quick decay)
• Flipper: square wave thwack (100Hz, 0.05s)
• Drop target: triangle wave ding (400Hz, 0.15s)
• Spinner: noise burst (0.1s, filtered)
• Rollover: sine wave beep (600Hz, 0.1s)
• Drain: descending sawtooth (200Hz → 50Hz, 0.5s)
• Multi-ball: ascending arpeggio (200, 300, 400, 500Hz, 0.1s each)
• Jackpot: ascending arpeggio (400, 500, 600, 800Hz, 0.15s each)
• Ball launch: noise sweep (0.3s)
• Tilt: buzzer (150Hz square, 0.3s)
• Bonus: ascending sine arpeggio

Let me write the audio system:

OK, this looks good. Let me now write the complete game. I'll create the file.

Let me think about the game flow more carefully:

1. Start screen: Shows title, high score, "Press SPACE / TAP to start" message
2. Ball ready: Ball appears in plunger lane, "PRESS SPACE / TAP LAUNCH" message
3. Playing: Ball is in play, flippers active, scoring happening
4. Ball drain: Ball goes down the drain, brief pause, check for ball save
5. Ball save: If within save period, ball is relaunched, "BALL SAVED!" message
6. Next ball: If balls remaining, go to ball ready. If not, game over.
7. Game over: Show final score, high score, "PRESS SPACE / TAP to play again"
8. New high score: Special celebration if new high score

For multi-ball:

• When all drop targets are cleared, release a second ball
• While 2+ balls in play, 2× score multiplier
• Multi-ball ends when down to 1 ball
• Drop targets reset after a delay when cleared

For the bonus system:

• Each bumper hit adds to the bonus
• Each drop target adds to the bonus
• Each rollover adds to the bonus
• At end of ball, bonus is added to score (with multiplier)

Let me also add a "combo" system:

• Hitting targets in quick succession builds a combo
• Combo multiplier increases score
• Combo resets after 2 seconds of no hits

This adds depth and excitement. Let me implement it.

OK, I'm going to write the code now. Let me create the complete file.

Let me also think about the visual layout of the UI:

The top bar shows score, ball count, and multiplier. The mobile controls are only visible on touch devices.

For the start screen and game over screen, I'll use HTML overlays positioned over the canvas.

Let me write the code now. I'll create the file at /space/games/stellar-pinball/index.html.

I need to be careful about the canvas scaling. I'll use a fixed internal resolution (440×640) and scale the canvas to fit the screen using CSS. The touch/mouse coordinates need to be converted from screen space to canvas space.

Here's my approach for responsive scaling:

OK, let me write the complete game now. I'll be thorough and make it polished.

Let me also think about what makes this game "useful to the audience" as the task says. Pinball is:

1. Fun and engaging
2. Tests reflexes and timing
3. Teaches physics concepts (gravity, collisions, angles)
4. Classic arcade entertainment
5. Different from all other games in the collection

I think it's a great choice. Let me write it now.

Let me write the complete file. I'll structure it as:

1. HTML head with meta and title
2. CSS styles
3. HTML body with canvas and overlays
4. JavaScript game code

Here goes:

Actually, I realize I should think about one more thing: the spinner. A spinner is a flat metal piece that rotates when the ball passes through it. In my game, I'll represent it as:

• A line segment that the ball can pass through
• When the ball crosses the segment, the spinner rotates
• Each rotation awards points
• Visual: a rotating bar

For collision, the spinner doesn't block the ball - the ball passes through it. But I need to detect when the ball crosses the spinner's line. I'll do this by checking if the ball's position crossed the spinner's line segment between the previous frame and the current frame.

Actually, for simplicity, I'll make the spinner a narrow gap that the ball passes through, with walls on either side. When the ball enters the gap, the spinner rotates and awards points. I'll detect this by checking if the ball is within a certain area.

Or even simpler: I'll place the spinner in a lane (between two walls) and detect when the ball passes through a trigger zone. Each pass awards points and spins the visual.

Let me implement the spinner as a trigger zone: a rectangular area that, when the ball enters it, awards points and triggers the spin animation. The ball passes through freely.

OK, let me write the code now. For real.

Let me also think about the rollovers. Rollovers are sensors in the playfield that detect when the ball rolls over them. In my game:

• They're circles on the playfield
• When the ball's center is within the circle, the rollover is "lit"
• Lighting all rollovers awards a bonus
• Rollovers reset after being lit for a while

For the plunger, I'll implement it as:

• When the ball is in the plunger lane (x > 390, y > 500), the plunger is active
• The player holds space to charge (visual: plunger compresses)
• When released, the ball launches upward with force proportional to charge
• If the player just taps space, the ball launches with a default force

Actually, let me simplify: the player just presses space to launc

OK, I need to write the complete pinball game. Let me write it as a single HTML file. I'll be very careful and thorough. Let me write the complete file now.

I've planned the game extensively. Let me write the complete code. I'll create it using the write_file tool.

The file is going to be large. Let me write it in one go.

The file is written. Now let me verify it by checking the HTML structure and JavaScript syntax. Let me also test the game logic to make sure it works correctly.

Let me first validate the HTML structure and then test the JavaScript.

The test script has a syntax error because of the complex mock object. Let me fix the test script by simplifying the mock.

We have 5 test failures. Let me analyze each one:

1. "Wall collision reverses velocity" - The ball at (25, 200) with vx=5 hits the wall at x=20. The collision should push the ball to the right (x > 25) and reverse vx (vx < 0). The first test "Wall collision pushes ball right" passed, so the ball position was updated. But the velocity reversal failed. Let me check the collision function...

Actually, looking at the collideSeg function:

The ball is at (25, 200) with vx=5, vy=0, r=9. The wall is from (20, 30) to (20, 490). The closest point on the segment is (20, 200). dx = 25-20 = 5, dy = 200-200 = 0. ds = 25. md = 9. 25 < 81, so collision occurs. nx = 5/5 = 1, ny = 0. b.x = 20 + 19 = 29. vn = 51 + 0*0 = 5. Since vn > 0, the velocity is NOT reversed!

Ah, I see the issue. The ball is moving TOWARDS the wall (vx=5, moving right), but the normal points AWAY from the wall (nx=1, pointing right, towards the ball). The dot product vn = vxnx + vyny = 51 + 00 = 5, which is positive. The condition if(vn<0) is not met, so the velocity is not reversed.

Wait, that's wrong. The ball is at x=25, moving right (vx=5). The wall is at x=20, to the LEFT of the ball. The ball is moving AWAY from the wall, not towards it. So the collision correctly doesn't reverse the velocity because the ball is already moving away.

But the test expects the velocity to be reversed. The test is wrong! The ball at x=25 with vx=5 is moving away from the wall at x=20. The collision pushes the ball out (to x=29), but since the ball is already moving away, no velocity reversal is needed.

Let me fix the test: the ball should be moving TOWARDS the wall, i.e., vx should be negative (moving left towards the wall at x=20).

Actually wait, the wall is at x=20 and the ball is at x=25. The ball is to the RIGHT of the wall. If the ball has vx=5 (moving right), it's moving AWAY from the wall. If the ball has vx=-5 (moving left), it's moving TOWARDS the wall.

So the test should use vx=-5 to test velocity reversal. Let me fix the test.

2. "Bumper collision pushes ball away" - The ball is at (130, 200) with vy=5, hitting the bumper at (130, 200). Wait, the ball is AT the center of the bumper! dx = 130-130 = 0, dy = 200-200 = 0. ds = 0. d = 0.001. nx = 0, ny = 0. The ball gets pushed to (130, 200) which is the same position. The velocity isn't reversed because vn = 00 + 50 = 0, which is not < 0.

The issue is that the ball is exactly at the center of the bumper. I should place the ball slightly offset. Let me fix the test to place the ball at (130, 225) (below the bumper, moving up towards it).

Actually, the ball at (130, 200) is at the center of the bumper at (130, 200) with radius 24. The ball radius is 9. The minimum distance is 33. The ball is at distance 0, which is less than 33, so collision occurs. But since dx=0 and dy=0, the normal is undefined (0/0.001 = 0). The ball doesn't get pushed anywhere useful.

Let me fix the test: place the ball at (130, 225) with vy=-5 (moving up towards the bumper).

3. "Flipper collision occurs" - The flipper is at pivot (150, 585) with angle 0, so the tip is at (150+66, 585) = (216, 585). The ball is at (180, 585) with vy=5. The closest point on the segment from (150, 585) to (216, 585) to the ball at (180, 585) is (180, 585). dx = 0, dy = 0. Same issue as the bumper - the ball is exactly on the flipper line.

Let me fix: place the ball at (180, 595) with vy=-5 (below the flipper, moving up).

4. "Flipper kick sends ball upward" - Same issue, ball at (180, 585) is on the flipper line. Fix: ball at (180, 595).

5. "Triangle collision pushes ball away" - The ball is at (60, 520) with vx=5. The triangle has vertices at (30, 495), (30, 545), (85, 520). The ball is inside or near the triangle. Let me check...

The closest point on the segment from (30, 495) to (30, 545) to the ball at (60, 520) is (30, 520). dx = 60-30 = 30, dy = 0. ds = 900. md = 9. 900 > 81, no collision on this edge.

The closest point on the segment from (30, 545) to (85, 520) to the ball at (60, 520)... Let me calculate. The segment direction is (55, -25), length = sqrt(55^2 + 25^2) = sqrt(3025 + 625) = sqrt(3650) ≈ 60.4. t = ((60-30)55 + (520-545)(-25)) / 3650 = (3055 + (-25)(-25)) / 3650 = (1650 + 625) / 3650 = 2275 / 3650 ≈ 0.623. Closest point: (30 + 0.62355, 545 + 0.623(-25)) = (30 + 34.3, 545 - 15.6) = (64.3, 529.4). dx = 60 - 64.3 = -4.3, dy = 520 - 529.4 = -9.4. ds = 18.5 + 88.4 = 106.9. md = 9. 106.9 > 81, no collision.

The closest point on the segment from (85, 520) to (30, 495) to the ball at (60, 520)... Direction: (-55, -25), length = 60.4. t = ((60-85)(-55) + (520-520)(-25)) / 3650 = (2555 + 0) / 3650 = 1375 / 3650 ≈ 0.377. Closest point: (85 + 0.377(-55), 520 + 0.377*(-25)) = (85 - 20.7, 520 - 9.4) = (64.3, 510.6). dx = 60 - 64.3 = -4.3, dy = 520 - 510.6 = 9.4. ds = 18.5 + 88.4 = 106.9. 106.9 > 81, no collision.

So the ball at (60, 520) with radius 9 doesn't actually collide with the triangle! The ball is too far from all edges. The test is wrong - the ball needs to be closer to the triangle.

Let me fix: place the ball at (45, 520) with vx=5 (closer to the left edge of the triangle).

Actually, let me recalculate. The left edge of the triangle is from (30, 495) to (30, 545). The ball at (45, 520) is 15 pixels away from this edge. With ball radius 9, the minimum distance is 9. 15 > 9, so still no collision.

Let me place the ball at (35, 520) with vx=5. Distance to left edge = 5. 5 < 9, so collision occurs.

OK, so all 5 failures are test issues, not game code issues. Let me fix the tests and re-run.

Actually, let me also double-check: the "Wall collision pushes ball right" test passed, meaning the ball position was updated (pushed from x=25 to x=29). But the velocity wasn't reversed because the ball was moving away from the wall. This is correct behavior! The test expectation was wrong.

Let me fix all 5 tests and re-run.

Almost there! Only 1 failure: "Flipper kick changes ball velocity". Let me analyze this.

The flipper is at pivot (150, 585) with angle 0, angVel -0.5. The ball is at (180, 597) with vy=-3.

The flipper tip is at (150 + cos(0)*66, 585 + sin(0)*66) = (216, 585). The closest point on the segment from (150, 585) to (216, 585) to the ball at (180, 597):

• Segment direction: (66, 0), length 66
• t = ((180-150)66 + (597-585)0) / (6666) = (3066) / 4356 = 1980/4356 ≈ 0.4545
• Closest point: (150 + 0.4545*66, 585) = (150 + 30, 585) = (180, 585)
• dx = 180 - 180 = 0, dy = 597 - 585 = 12
• ds = 0 + 144 = 144
• md = 9 + 8 = 17
• 144 < 289, so collision occurs
• d = 12, nx = 0, ny = 12/12 = 1
• b.x = 180 + 017 = 180, b.y = 585 + 117 = 602
• contactDist = 0.4545 * 66 = 30
• fvx = -sin(0) * (-0.5) * 30 = 0
• fvy = cos(0) * (-0.5) * 30 = -15
• rvx = 0 - 0 = 0, rvy = -3 - (-15) = 12
• vn = 00 + 121 = 12
• Since vn > 0, the velocity is NOT reflected!

Wait, that's the issue. The ball is at (180, 597) which is BELOW the flipper (y=585). The normal points from the closest point (180, 585) to the ball (180, 597), which is (0, 1) - pointing DOWN. The ball is moving UP (vy=-3). The relative velocity is (0, -3 - (-15)) = (0, 12). The dot product with the normal (0, 1) is 12, which is positive. So the condition if(vn<0) is not met.

But wait, the ball is moving UP towards the flipper, and the flipper is moving UP (angVel = -0.5, which means the tip moves up). The flipper is moving faster than the ball, so the relative velocity of the ball with respect to the flipper is downward (the flipper is catching up to the ball from below). The normal points down (from flipper to ball). So the relative velocity dot normal is positive, meaning the ball is moving away from the flipper in relative terms.

This is actually correct! The flipper is moving up faster than the ball, so from the flipper's perspective, the ball is moving away. The collision shouldn't reflect the velocity in this case.

But the test expects the velocity to change. The issue is that the flipper kick should still apply even when the relative velocity is positive. In real pinball, when the flipper hits the ball, it transfers momentum regardless of the relative direction.

Let me reconsider the collision logic. The current logic:

1. If the ball is moving towards the flipper (vn < 0), reflect the velocity
2. If the flipper is moving, add the flipper's velocity

But if the flipper is moving faster than the ball (vn > 0), neither happens. The ball just gets pushed out but doesn't get kicked.

I should modify the logic: if the flipper is moving and hits the ball, always add the flipper's velocity, regardless of the relative velocity direction. The reflection should only happen if the ball is moving towards the flipper, but the kick should always happen.

Let me fix the collideFlipper function:

Wait, looking at the current code more carefully:

The flipper kick is INSIDE the if(vn<0) block! So it only applies when the ball is moving towards the flipper. I need to move it outside.

Let me fix this in the game code. This is actually a real bug - the flipper kick should always apply when the flipper is moving, regardless of the ball's relative velocity direction.

Let me update the collideFlipper function in the game file.

The original test suite still has 4 failures, but those are the test expectation issues I identified earlier (balls positioned at exact centers or moving away from walls). The corrected test suite (test_pinball2.js) passes all 26 tests. The flipper kick fix resolved the real bug.

Now let me update the master index.html to add the new game. I need to:

1. Increment the game count from 34 to 35
2. Add a new game card for Stellar Pinball

Let me do that now.