Claude 3.5 Sonnet Tutorial: Create a Game From Start to Finish in Javascript/React
HTML-код
- Опубликовано: 29 июн 2024
- 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:
/ allaboutai
🤖 Great AI Engineer Course:
scrimba.com/learn/aiengineer?...
🔥 Open GitHub Repos:
github.com/AllAboutAI-YT/easy...
📧 Join the newsletter:
www.allabtai.com/newsletter/
🌐 My website:
www.allabtai.com
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 
Наука
![Megan Thee Stallion - Otaku Hot Girl [Official Audio]](http://i.ytimg.com/vi/USxIYOaIpig/mqdefault.jpg)
+10 years of game dev on my CV
I love this content. Ai news are boring. Creating tools and games with AI will be the next wave. 🤩🤩🤩
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.
It's true though this really isn't anything special, we've messed with these tools internally at Microsoft. It's old news about a year-old tool. Furthermore, it's so simple to hook GPT into an gizmo env and have it update in real-time using function_calls. It doesn't take a genius and it's nothing amazing. It's rubbish at best.
@@Jshicwhartz
It's rubbish for technical people who only look at it from a technical viewpoint. Pass it to the people and they will find creative things to do with it.
@@watchdog163yeah the technical side of anything always kills my creative side. I have no creative energy left after dealing with the technical side basically. But if I go into something with just creativity the skies the limit for what will happen.
It’s like choose your path.
@@Jshicwhartz If it's so easy then where is Microsoft's superior product? Oh wait
@@watchdog163 Like wasting a ton of money trying to get it to do something simple ? okay then... think ill stick with things that actually do things first try.
LMAO at the punch timing, made me root for the possibility of Claude doing that as a troll.
haha
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.
awesome job both of you 😄
Used the older version to make a pac-man type game in Python. Amazing tool and it has great comprehension.
so excited for seeing this!!
thnx for tuning in :)
enjoyed it. thanks. hope to see more content like this with claude 3.5 sonnet
thnx, for sure :)
that was fun! thanx.
So cool ! I love it !
thnx mate :)
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.
yeah for sure! like you said, this is more about the workflow than the result. tnx for tuning in :)
Thank you, great video.
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.
that is vert cool. have been thinking about something similar
@@AllAboutAI yes the only drawback then was no images for menu and games and you would have to manually create them but with this sprite thing (ai created png) it is easier. I’m happy about this. We could get it to create ten per object and we just select the best one or just go with everything on auto. Or both as an edit after reviewing.
I’ve also had tkinter menu made automatically. Could go extra mile now and have both made but when it comes to all of this we just keep going on and on imagining all sorts of options. That’s why I like that ai comes up with the idea for feature update. And it reviews itself. I enjoyed creating it. The more I think about it having it create menu plus game at the same time is kinda cool.
The only thing I’ll add beyond this is the script I created, I ran the same script for both game and menu just ran twice with different prompt. I think you did something similar where you can just ask for Python or html or whatever scripting language you want and whatever your use case is.
The trick is getting it to automatically install the additional required libraries and getting it to test itself and verify installation. So you don’t have to pip install anything. In other words (I was able to get it to auto pip install)
Maybe the pygame or other game creation has menu options built in.
Wow! That's was amazing. Now I'm sure that I need to switch from ChatGPT to Sonnet
tnx for tuning in :)
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.
cool stuff 😮 maybe build vs extension to smooth the workflow. seems tedious to go back and forth between claude artifact tab and vscode.
great model :) I am waiting for Opus or GPT5 or Gemini 2.0 :) - an interesting year - )
The only problem could be that, at the current pace, instead of collaboratory helping us to create something, gpt5 might simply answer like this: "I don't think your idea is correct. I have a better one. I'll implement it now" 🙃
GPT-5 isn't going to be a chat assistant. So, your hopes on that one are dead. It's going to be a companion inside a new device, oh, and it won't even be called GPT-5 it's going to be named GPT-Next it will be ready June next year.
opus 3.5 will be ready later this year, gpt5 probably mid next year, gemini wont be that interesting :s
yes!!
Hi, friend. What kind of neuron is doing with context? I use Chatgpt 4o Plus to write code for wordpress and often I don't have enough context in order to work better. Is there more context here?
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
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
How can I set up a voice instruction to Clause 3.5 and it reads back to me the text it generates? Anyone has an answer for it? Something that really works. Tested and tried!
THANK YOU!
Never stopped procastinating this fast...😂
i tried building a simple dice game but updates kept breaking the entire gameplay. This happened a few times now. The 5 image limit is frustrating but there are ways around it.
I followed every step, but how can I interact with the game in Claude 3.5? It said I can't do this.
Right, right
can you share the github to the above video please ? couldnt find it
I never tried adding a sketch with my prompt. .does it really help that much ?
i just see it as more context :)
Does Claud have a playground where can use an api and just keep going?
yes! but not with the artifacts UI
Noice
Do you know if there are any local LLMs that could create apps as well as Claude 3.5?
no
not really atm, maybe llama3 400B if it comes :)
The reality is, that within the next 2 years, we will not even need to create/develop games or any asset for them.
The next generation of A(G)I models will be capable of emulating games in real time (they are just interactive videos using some rules for gameplay). They may just need to be a few times faster at inference than what they are now to be viable for gaming (which will happen before 2026 because of algorithmic advances, better hardware, or most likely both).
Anybody else is asking phone number to register or it's just me?
Same
that was the point where my story with claude ended
@@carlosrivadulla8903 Me too, they can go to hell with their fancy LM. I'm not giving even more data so they flood me even more with phone advertising.
Didn't ask any phone from me
I'm registered for long time
@@carlosrivadulla8903 oh no you've been asked your number for a two step authentification ! quick hide ! the nsa fbi cia is onto you ! Morron womp womp
good thing fake AI understands typos lmfao
Bored to hell of seeing about 'Claude 3.5 Sonnet' it isn't anything amazing. Any indie dev could hook into GPT and then have it output via an gizmo using a function call, and it would probs do a better job most things I've seen C3.5 do are rubbish except data analysis that it's good at.
Your mom died in a car accident when you were 10.
@@bag1667 still not as sad as their original comment, tbh
All the developers trying to attack Claude so they can stay relevant. In 2 years when they're unemployed, I guess these comments will age like milk.
@@Weirdgeek83 You're clearly dumb as hell if you think developers won't have jobs any more. AI systems will never be able to manage full source projects. I wish people would get this into their stupid domes.
@Jshicwhartz Oh, wow. How original. Another man thinking he's smarter than the rest. Clicked on this video for no other reason but to throw out rubbish comments? What a shock. You want to know what's truly rubbish? Your lack of creativity and common decency. Instead of wasting your time bashing Claude, maybe focus on actually doing something impressive yourself instead of tearing others down. If you're that bored, go create your own LLM with higher quality then claude. We both know that's impossible, so spare us the theatrics. oh and while you're at it, how about some respect for the people who actually put in the hard work? Claude is amazing, and this channel has consistently provided amazing content for us all. Keep spewing hate and watching us rise above your pathetic attempts at trying to derail the progress.
How can I set up a voice instruction to Clause 3.5 and it reads back to me the text it generates? Anyone has an answer for it? Something that really works. Tested and tried!
THANK YOU!