Turn Your Song Into a Browser Game With Free AI Tools

Overview

Four stages take you from a song to a game your fans can play on the web, using the free plans of four AI tools. ChatGPT builds the game, Gemini designs your character, Claude puts everything together and tests it, and Netlify gives you a link to share.

Claude never draws the art. Your character comes from Gemini in Stage 2, and Claude writes the code that makes it move in the game.

Stage

Tool

What you get out

1. Core build

ChatGPT

A working game in one zip: index.html, style.css, script.js and an assets folder

2. Character

Gemini

Your artist as a side-view game character, a T-pose and key poses (idle, run, jump, fall)

3. Put it together

Claude

A finished, tested game with your character, your song, your lyrics and your link, in one zip

4. Go live

Netlify

A free public link to share with your fans

Have these ready before you start:

• Your song as a WAV or MP3. Claude converts a WAV to a web-sized MP3.

• Your lyrics with timings (a .lrc or a text file with a time stamp on each line), so the lyrics can show on screen in time with the song.

• How long the song is (for example 1:58). The level gets paced to it.

• Your streaming link, where players land when they finish. If the song is on Feelz Machine, use your Feelz Machine link. It must start with https://.

• A picture of your artist character. No picture yet? Stage 2 shows you how to make one in Gemini.

• Free accounts with ChatGPT, Gemini, Claude and Netlify.

Stage 1: ChatGPT builds the core

ChatGPT gets the game working end to end: movement, platforms, collectibles, music and the start screen. It uses a plain block as a stand-in for your character until Stage 3. Start a new chat in ChatGPT, fill in the two bracketed values, then paste this:

Act as an expert HTML5 game developer. I want to build a single-level 2D platformer web game that runs entirely in the browser using Vanilla JavaScript, HTML Canvas and CSS. The game is an interactive promo for my new music track.

I am a beginner, so give me the complete, working code and step-by-step instructions. Do not leave out or shorten any code. I need full code blocks I can copy and paste straight into my files.

My track is called [TRACK NAME] and is [LENGTH, e.g. 1:58] long.

Core requirements:

1. Gameplay: a side-scrolling level where the player moves left and right and jumps across platforms to reach a Finish flag. Use smooth physics, gravity and proper collision detection:
   - Platforms are solid on every side, not just the top. The player can never walk or fall through the side of a platform.
   - One jump per button press. Holding the button must not bunny-hop.
   - Falling into a pit costs nothing yet, but puts the player back on the last platform they stood on, with a run-up.
   - Make the level long enough that a good run takes about as long as my track.

2. Character: use a plain coloured rectangle as a placeholder. My real character will arrive later as ready-made images, so build the player around it:
   - Track a facing direction and four states: idle, run, jump and fall.
   - Put all player drawing in one drawPlayer() function that receives the state, the facing direction and a run-cycle phase.
   - Add a PLAYER_SPRITE settings object at the top of script.js (image path, frame width, frame height, one row per animation with its frame count) and comment exactly where the character art plugs in.

3. Music: a "Click to Play" overlay. One click must hide the overlay, start the game loop and play a local file, assets/promo-track.mp3, on a loop. This is needed to get past browser autoplay rules. When the player reaches the finish, fade the music out over 3 seconds and stop it. "Run it back" restarts the music from the top.

4. Collectibles: vinyl records and music notes placed along the level, including a few that are risky to reach. Show a score counter.

5. Promo link: add a PROMO settings object at the top of script.js with my track title, a listenUrl and a button label. The finish screen shows a "Listen to the full track" button that opens listenUrl in a new tab. Only accept links that start with https://, and hide the button while listenUrl is empty.

6. Controls: keyboard (arrows or A/D to move, Space, W or Up to jump). Keep all input in one shared object, so touch buttons and game controllers can be added later without touching the physics.

7. Mobile: on-screen touch buttons on any touchscreen device (use the pointer: coarse media query, not screen width). The start screen must fit on a phone in portrait and landscape without scrolling the game.

8. Structure: separate index.html, style.css and script.js plus an assets folder. No build step, no frameworks. Keep it modular so I can turn it into a Progressive Web App with Supabase later.

9. Finish: give me the full folder structure, every file in full, and a short list of what I need to add myself (my MP3, my song link, my character art).

ChatGPT answers with a plan first. Don't make the folders yourself. Send these two follow-ups in the same chat:

1. Get the files in one zip, so you never have to create folders and files by hand:

Please build the game and present the files in a single zip.

2. Test it before moving on:

Open the game here in the window so I can test it.

It will look basic, with a block for a player. That's expected. Check that you can move left and right and jump, then download the zip and keep it for Stage 3.

Stage 2: Gemini designs the character

A platformer needs the character seen from the side, full body, on a plain background. Gemini is good at keeping a character the same across images, which is what you need here (Google help page). Image generation works on the free plan, with a daily limit. You must be signed in, and uploading images needs you to be 18 or over.

No picture of your artist yet? Make one first in its own chat, then download it:

Create a full-body character for my music artist: [DESCRIBE YOUR ARTIST, e.g. a tall producer in a red bomber jacket, gold headphones and white sneakers]. Side view for a 2D platformer, plain background.

Use your own artist or an original design. A look-alike of a famous cartoon or movie character can get your game or video taken down.

Now start a new chat and do Prompts A, B and C in that one chat, so Gemini keeps the same character in mind. When you attach an image, Gemini may ask you to agree to its terms first. Tap Agree, or the upload won't go through. Download each result as you go.

Prompt A: the full-body side view. Attach your artist picture with this:

Using the attached image as the reference for my music artist character, create a full-body 2D game character design of the same person.

- Side view, facing right, full body from the top of the head to the shoes, nothing cropped.
- Relaxed standing pose, arms slightly away from the body so the hands are clearly separate from the torso, legs slightly apart.
- Keep every signature detail from the reference: [LIST THEM, e.g. black ribbed beanie with gold trim, black angular face mask with gold edges, neck tattoo].
- Clean stylised game-art look with bold shapes and strong silhouettes, not photo-real.
- Flat, even lighting, no cast shadow, no ground line.
- Plain solid white background, nothing else in the image.
- Square image with the character centred and filling most of the height.

Prompt B: the T-pose.

Same character, same outfit and proportions. Now show them from the front in a T-pose: standing straight, arms straight out to the sides at shoulder height, palms down, legs slightly apart, facing the camera, neutral expression. Full body visible, plain solid white background, flat even lighting, no shadow.

Prompt C: the key poses.

Same character, same outfit, same side view facing right, same size and the same plain white background. Draw each pose as a separate image, with the character the same height and the feet at the same level in every image:

Idle (4 images): standing relaxed, with a slight breathing movement between images.
Run (6 images): one full running stride split into 6 evenly spaced moments, from front foot touching down through to the next front foot touching down.
Jump (2 images): pushing off, then rising with one knee raised and one arm reaching up.
Fall (2 images): legs extending down, arms out for balance.

Tips for clean results:

• If a detail drifts (wrong colour, missing trim), say exactly what to fix in the same chat instead of starting again.

• Download every image at the largest size offered and keep the file names simple (artist-side.png, artist-tpose.png, artist-poses.png).

• Check that both hands and both feet are fully visible in every pose.

Stage 3: Claude puts it all together

This is the most important stage. Claude takes ChatGPT's game, your Gemini images, your song and your lyrics, makes them work together, plays the game to test it and fixes what's broken. Start a new chat in Claude, paste the prompt below, then attach everything:

• The game zip from Stage 1

• Every character image from Stage 2 (side view, T-pose and key poses)

• Your song (WAV or MP3)

• Your timed lyrics

Fill in the bracketed values before you send it. Forgot a file? Drag it into the same chat while Claude is still working and say what it is. Claude picks it up and carries on.

I've attached a single-level HTML5 platformer that ChatGPT built as a promo for my music track, plus my character images from Gemini, my track and my timed lyrics. Before changing anything, run the game in your container, play it, and tell me everything that is broken or weak in one list. Then fix all of it in one pass and test again.

My track is [TRACK NAME], [LENGTH] long.
My song link for the finish screen is [https://YOUR-SONG-LINK].

CHARACTER (code only)
- Do not draw, redraw or restyle my character. Use my Gemini images as they are. Cut each pose out of its image, remove the plain white background with code, and pack the poses into one sprite sheet: one row per animation (idle, run, jump, fall), same frame size, feet on the bottom edge.
- Wire the sheet into drawPlayer() through a PLAYER_SPRITE settings object at the top of script.js: image path, frame width and height, on-screen height, and frame count and speed per animation.
- Tie the run animation to the player's ground speed so the feet don't slide, play jump and fall once and hold the last frame, and flip the art when the player faces left.
- Show me a screenshot of each animation in the game so I can check it.

MUSIC AND LYRICS
- Use my track as assets/promo-track.mp3. Convert a WAV to a web-sized MP3.
- Show my lyrics on screen in time with the song, one line at a time, using my timings.

PROMO LINK
- Add a PROMO settings object at the top of script.js with my track title, listenUrl and a button label, filled in with my details.
- The finish screen shows a "Listen to the full track" button that opens my link in a new tab, with Run It Back as the second button. Only accept https links, and hide the button while listenUrl is empty.
- Show the track title on the start screen.

LEVEL AND CHALLENGE
- Pace the level so a good run takes slightly less than my track, and finishing before the song ends is the goal. Show a countdown of the track in the HUD that turns red in overtime.
- Four zones that get harder (INTRO, VERSE, HOOK, OUTRO), with a banner as each one starts.
- Enemies the player can stomp from above (with a bounce) and that hurt from the side: ground walkers and flying drones.
- Spikes, pits, moving platforms and floating ledges.
- 3 hearts, a short invulnerability flicker after a hit, mic-stand checkpoints that restore a heart, and a restart from the last checkpoint when all hearts are gone.
- Generate the level from a fixed seed so it's the same every run.

FEEL
- Solid platforms on every side. One jump per press, hold for a higher jump, a little forgiveness just after running off an edge and just before landing.
- After a pit, respawn on the last safe ground, never on spikes or a moving platform.

SOUND
- Sound effects made with the Web Audio API, no files: jump, record, note, stomp, hit, fall, checkpoint, wipeout and a finish fanfare, mixed under the music.
- Fade the music out over 3 seconds at the finish. Restart it from the top on Run It Back. Pause it when the tab is hidden.

CONTROLS
- Keyboard, on-screen touch buttons, and game controllers through the Gamepad API (stick or d-pad to move, A or B to jump, A or Start to begin), including Bluetooth controllers paired to a phone. Hide the touch buttons while a controller is connected. Rumble on hits where supported.

MOBILE
- Touch buttons on any touchscreen. In portrait, put them in a strip under the game so they don't cover it. In landscape, fit the whole game to the screen height. The start and finish screens must never push the game out of view.

FINISH SCREEN
- Records collected out of the total, time, enemies cleared and wipeouts, plus a rating: Flawless, You Beat the Track, or You Made It.

TESTING AND DELIVERY
- Play the whole level with an automated test player to prove it can be finished, report the time it takes against my track, and show screenshots of desktop, phone portrait and phone landscape.
- Compress oversized images without changing how they look.
- Give me the finished game as a single zip, ready to drop into Netlify.

On the free plan, a big build like this can hit Claude's usage limit before it finishes. Claude tells you when it resets. Come back after that time and send "continue" in the same chat: it picks up where it left off, so you can finish in a few sittings.

When Claude reports back, play the game yourself. Ask for changes in plain words, such as "the OUTRO is too hard" or "make the drones slower", and ask Claude to retest after each change. Download the final zip for Stage 4.

Stage 4: Put it live on Netlify

Netlify hosts your game for free and gives you a link anyone can open (Netlify docs).

1. Sign up at netlify.com (free).

2. On the "Deploy your first project" page, scroll to the bottom, to the box that says you can drop a folder, zip or HTML file.

3. Click it and choose your game zip (the one from Claude, or ChatGPT's zip if you want to try the basic version first).

4. Wait a few seconds. When it says your project is live, open it and press Play.

5. Give it a proper name: open the project, go to Project configuration, click Change project name, type something like your-track-name-game and save. Your link becomes your-track-name-game.netlify.app.

6. Copy the link and share it. Open it on your phone and on a computer and play it through once, music on.

To update the game later (for example when Claude sends a new zip):

1. Open the project and go to Deploys.

2. Drag the new zip onto the drop area.

3. It goes live on the same link as soon as it finishes.

Keep the game under 50 MB. A 2-minute MP3 at 192 kbps is about 3 MB.

Finished game checklist

Tick these off on the live link before you share it.

• ☐ Your Gemini character plays idle, run, jump and fall, and faces the way it moves

• ☐ Music starts on Play, fades out at the finish, and restarts from the top on Run It Back

• ☐ Your lyrics show on screen in time with the song

• ☐ The finish screen's Listen button opens your song in a new tab

• ☐ Sound effects for jump, records, notes, stomps, hits, falls, checkpoints and the finish

• ☐ A good run finishes just inside the track length, and the HUD counts the track down

• ☐ Four zones that get harder, with enemies to stomp, spikes, pits and moving platforms

• ☐ 3 hearts, checkpoints that restore a heart, and a restart from the last checkpoint

• ☐ Keyboard, touch buttons and a game controller all work

• ☐ Plays properly on a phone in portrait and in landscape

• ☐ The finish screen shows records, time, enemies cleared, wipeouts and a rating

• ☐ Live on Netlify with your own project name

Sources

• Generate and edit images with Gemini Apps, Google

• Gamepad API browser support, Web Platform DX

• Netlify Drop quickstart, Netlify