Orbital Golf: build a game where gravity changes every shot

Straight to the target? The planet has other plans

A mint ring waits across the board. You set the angle, choose the power, launch a pale ball — and suddenly its path starts bending. The planet pulls it closer. You need to use that bend to reach the target without crashing on the way.

That is our Orbital Golf. We made three boards: a flight over a planet, a route below a larger globe and a finale between two worlds. Play above or download one HTML file and open it offline. No account or libraries are needed. Your score lasts only for the current session; closing the file means starting again next time.

After a miss, try less power

Clicking or touching the board sets the direction. Use the slider for finer adjustments: a positive angle aims up, a negative one down. The second slider changes power. Dots show the opening part of the predicted flight. An orange circle at their end warns that the ball will hit a planet along that section.

More power does not always help. A fast ball spends less time near the planet, so it may not bend enough. After a failed attempt, change only the angle or only the power and compare the flight. Attempts are unlimited. The counter is useful when you want to improve the score for your whole run.

A shot ends on a planetary collision, leaving the board or after ten seconds of flight. When the ball’s center enters the ring, you get a success message and a next-board button. “Reset shot” interrupts the flight or returns the ball to the start, but keeps the counter. Only “New game” resets the score and returns to the first level.

How to describe this game to a model

Start with the rules: what the player sets, what happens after firing and when they can move on. The prompt below describes a game similar to ours. Once you receive the file, check failure, retry and victory immediately. Without those three states, you have an animated scene but not a complete game.

Our HTML is an example we prepared for comparing with your own result. It did not come from a single answer by a named model. You can also give a model the finished file and ask it to change one board. Moving a target or increasing gravity is enough for a new puzzle.

Build a small Orbital Golf game in one HTML file with embedded CSS and JavaScript. It must work offline without libraries, fonts or network connections.

Rules: the ball starts on the left; planets pull it toward their centers. The player chooses an angle from -65 to 80 degrees and power from 10 to 100%. Hitting a planet, leaving the board or 10 seconds of flight ends an attempt. The ball’s center entering the target ring completes the level. Create 3 playable boards: above a planet, below a larger planet and between two planets.

Use one Canvas and a logical space of 900 × 500. Calculate physics at a fixed step of 1/120 second, independently of screen refresh. The preview of the first part of the trajectory must use the same function as the actual flight. Find a verified angle and power pair for every level; a hint button must set it.

Add sliders with labels and values, mouse and touch aiming, and buttons for launching, retrying, the next level and a new game. Show the shot count. The entire flow from start to victory must work with a keyboard. Tab selects controls; arrows adjust sliders. Announce game state in ordinary text outside Canvas.

Appearance: dark navy, cream ball, mint target, subtle stars. No continuous background movement. Animate only flight; disable the decorative trail for prefers-reduced-motion. Fit layouts from 320 px wide. Add render_game_to_text() exposing current state and advanceTime(ms) for deterministic checking. Explain how to run the game and provide verified shots for all boards.

The dots must predict the same flight

The player aims using the preview, but the ball flies differently? First, we would check whether prediction and flight share their calculations. In our file, both call stepBall. The preview simply ends the simulation earlier. With two separate functions, it is easy to fix one and forget the other.

We calculate movement in 120 small steps per simulation second. requestAnimationFrame, the browser’s animation mechanism, draws subsequent frames. Separating the jobs keeps the same physics on screens with different refresh rates. The calculations are simplified and the units chosen for the game. We are not calculating a real orbit.

Three shots you can start with

We verified a solution for each board in the simulation: first, 30° and 45% power; second, −10° and 35%; third, 15° and 35%. “Show hint” sets those values. If you get stuck, try them and watch the route. After the third success, the game reports your total attempts and lets you start again.

When checking your own version, deliberately do a few things wrong too. Hit a planet, adjust the angle and interrupt the next flight with reset. Failed and interrupted shots should still count. Rapidly clicking “Launch” during flight must not create extra balls or increase the counter.

Repeat the controls with a keyboard and on a narrow screen. Our demo’s sliders show values, and its success message is text outside the graphic. A screen reader also gets a description of the start, target and planet positions. It still requires imagining the path, but you can set a shot without touching a tiny point.

Now make your own board

After downloading the HTML, find the LEVELS array. It holds start and target positions, planetary radii, gravitational strength and hint settings. Move the target a small distance first. Try the old shot, then change one planet’s mass.

A new board needs a new verified hint. Find one and complete the level: the settings saved for the previous version may no longer work. This is the interesting balancing act in design — the player should have something to figure out, but must also be able to win.