Claude 3.5 Sonnet Tutorial: Create a Game From Start to Finish in Javascript/React

Claude 3.5 Sonnet Tutorial: Create a Game From Start to Finish in Javascript/React

👊 Become a member and get access to GitHub and Code:

🤖 Great AI Engineer Course:

🔥 Open GitHub Repos:

📧 Join the newsletter:

🌐 My website:

Today we use Claude 3.5 Sonnet to create a JS / React game with Sprites, Sound effect and Music using the new LLM. We test out artifacts feature and run our game from VS Code Studio. We do some detailed prompting with Claude 3.5 Sonnet. Hope you can learn something

00:00 Claude 3.5 Sonnet Game Intro
00:40 Game Plan
02:06 Create the Physics Engine
06:09 Creating the Game UI
08:34 Move into VS CODE
11:56 Adding Midjourney Sprites
14:47 Adding Music and Sound Effects
17:50 Adding a Background
19:14 Playing the final game
20:11 My Impressions Claude 3.5 Sonnet

[kimie]

I love this content. Ai news are boring. Creating tools and games with AI will be the next wave. 🤩🤩🤩

[efficiencyvi]

I automated a little task for my colleagues like getting a file from my work, analysing it and send updates to a telegram chat. Never worked in python but 20 years of experience in other languages.

Sonnet 3.5 programmed everything based on my description. Script worked immediately with minor bugs that were fixed by Sonnet. Then I copied everything and said "make it pretty" and it outputted everything in a nice formatting. Got everything checked by Chatgpt.

Overall it would have taken me maybe 2 days to get into python and make this. Sonnet did everything in 2 hours.

[ShpanMan]

It does the work so elegantly. I love how all these AI experts STILL INSIST these models can't do anything useful or new or smart, how lacking in creativity.

[Thedarkbunnyrabbit]

I know that's not the point of the video, but you could definitely improve the game by adding an animation to the glove (make it pull back as you click and then shoot upward when it punches) and track the camera to the ball. Have a long scaling image that changes the higher the ball goes, with various easter eggs in the background that your pokeball goes by. Perhaps the 'win' condition is punching it until it reaches space and breaks orbit so it no longer is affected by gravity.

[jeffwads]

Used the older version to make a pac-man type game in Python. Amazing tool and it has great comprehension.

[tubaguy]

LMAO at the punch timing, made me root for the possibility of Claude doing that as a troll.

[NakedSageAstrology]

Very cool! I used it to make a remote desktop app which I can access via any web browser. It works great and even has a file explorer.

[lilan]

enjoyed it. thanks. hope to see more content like this with claude 3.5 sonnet

[playthisnote]

I made OpenAI api create games and use exec() to view/run the script created so I assume Claude could be used from api and therefore it would auto run. Which isn’t in browser but you know you’d rather just do things from your pc anyway.

I also made it auto upgrade features (adds a random upgrade/feature it comes up with itself) before presenting to me while looking for errors. Which was fun.

[Tebriz]

Wow! That's was amazing. Now I'm sure that I need to switch from ChatGPT to Sonnet

[briankgarland]

I hate the message and file upload limitations, but the output is soooo good.

[micbab-vgmu]

great model :) I am waiting for Opus or GPT5 or Gemini 2.0 :) - an interesting year - )

[SahilP]

Anybody remember that ball popper game? I forgot what it was even called. There was a boy that had to dodge balloons or balls, once you hit it with a blowdart it would split into 2 smaller ones and they would keep bouncing around but also lose momentum. You have to dodge the balls and pop them, but because they split into 2, you had to take care not to pop too many. I kind of want to make that game now in Android and iOS.

[poisonza]

cool stuff 😮 maybe build vs extension to smooth the workflow. seems tedious to go back and forth between claude artifact tab and vscode.

[jiyuhen]

Never stopped procastinating this fast...😂

[PerfectlyNormalBeast]

After watching this video and another trying to make snake:

Imagine a wrapper to these feature requests that takes the generated text, compiles, sends any compile errors for rework, repeat until clean

Then the human gets the results

Take it a step further and have side processes unit testing the latest code, with other llms watching, making sure it behaves according to design spec

[punkouter]

I never tried adding a sketch with my prompt. .does it really help that much ?

[totheknee]

What happens if you click once? Or zero times? My guess is that it will still go hundreds of meters.

[DanCreaMundos]

I sincerity think this could be an amazing tool for prohrammers, specially to turn messy code into readable one 😂 then you can just check if its right

[lucface]

Does Claud have a playground where can use an api and just keep going?