Build Your First AI Game With ZERO Coding (Lovable + Grok 3 + Claude 3.7)

0:00 righty so if you stick with me in this 0:02 video I promise you I will show you how 0:04 to create a fully functional game that 0:07 you can deploy on the internet share 0:09 with your friends and family and look 0:10 like a genius we're going to do this 0:12 using artificial intelligence so no 0:14 coding experience is required if you've 0:16 never coded before in your life don't 0:18 stress we are going to use two tools Gro 0:21 and lovable those are the only two tools 0:23 we're going to use Plus on top of all of 0:25 this they are completely free so we're 0:27 going to build this for completely free 0:29 let's get into it okay so I'm in grock 0:32 and I find grock is the best when it 0:33 comes to outlines when it comes to 0:35 planning so in our case when we want to 0:37 develop out the design and the plan for 0:40 our game grock is the way to go 0:42 especially with its deep search function 0:45 okay so how are we going to do this 0:46 you're going to come to grock completely 0:48 free just sign in and you're going to 0:50 hit the Deep search button to make sure 0:52 it's toggled on and then I've got a 0:54 couple of prompts that you guys can 0:55 literally just steal and I want to copy 0:58 those across now okay so I've got our 1:00 prompt here and it's create a highly 1:02 polished AI robot theme shooter game I 1:05 thought the AI theme would be cool given 1:07 the purpose of my channel and the 1:09 newsletter AI the boring so we went with 1:12 that using p5.js this is a JavaScript 1:14 format that is best for 2D games which 1:16 is what we aiming to build so that's 1:18 that and then the game should have 1:20 smooth mechanics responsive controls and 1:22 engaging visual effects right one thing 1:24 to note here is we said design all 1:26 Sprites and assets from scratch this is 1:28 important in that it's all the different 1:30 characters and sound effects and 1:32 components that make up our game we 1:33 saying we want to build it from scratch 1:35 so you know down the line we don't get a 1:39 you know a request to integrate with an 1:41 external asset catalog or an API that's 1:44 paid and it just starts complicating the 1:47 development of our game so I've said 1:49 create everything from scratch keeps it 1:50 nice and simple and we go from there 1:53 right do not use any pre-made or 1:54 external assets final product should 1:56 feel sleek and refined and with an 1:58 immersive experience for players all 2:00 righty so we're going to toggle deep 2:01 search on and we're going to hit Run 2:04 Deep search is now going to run and 2:06 might take about a minute or so and it's 2:08 going to build out our full outline for 2:10 our game in very much in a lot of depth 2:13 and we'll go from there once it's 2:15 complete okay it's done so you can see 2:18 how much information is here it thought 2:20 for 47 seconds use 10 different sources 2:23 and you can see it's reasoning thinking 2:25 planning game design implementing enemy 2:27 Ai and it gave us this so key points 2:30 game overview asset design mechanics and 2:32 controls visual effects so forth so 2:35 forth and you know a little bit of code 2:36 here so this gives us a good outline I 2:39 mean even a table for organization so 2:41 for players enemies projectiles so forth 2:44 so it really just does a good job of 2:46 doing a deep dive into the game we want 2:47 to achieve and you know giving us that 2:50 outline now what do we do right what do 2:52 we do is or what we do is I have another 2:56 prompt here that I'm going to copy 2:57 across and it says create create a 3:00 complete and functional code block for 3:01 this game so we're saying take the 3:03 design and give us the code right all 3:05 assets and Sprites must be fully 3:07 original and created within the script 3:09 like we said before ensure smooth 3:11 gameplay mechanics so forth so forth the 3:13 final implementation should be immersive 3:14 and ready to play without any additional 3:16 files or dependencies okay so we're 3:18 going to take this piece of code and 3:19 then we're going to put this into 3:21 lovable let's run this first what we 3:23 going to do now is we're going to switch 3:24 to the think model um and basically this 3:27 just allows us we're not doing a deep Di 3:29 we're not asking for a further outline 3:31 we just want the code so it's saying 3:33 take that outline and give us the code 3:35 for it so we're use the think module for 3:36 that so we going to run that it's going 3:38 to think shouldn't think for too long 3:41 and it should give us our code in the 3:43 meantime I've got lovable up over here 3:45 which we're going to run there but I've 3:47 also got another component up which is 3:49 p5.js which is our JavaScript format 3:52 that we're building the game in and this 3:54 is a free website where you can just go 3:56 to p5js org hit the start coding button 4:01 and then it gives you a little bit of 4:03 like a canvas of code where you can 4:05 preview the game right so it's it's 4:08 really simple to do so once we have the 4:10 code here we will trial it in this web 4:12 edit just to see how it looks and then 4:14 we'll go into lovable and we start 4:15 making it look real fancy and oh let's 4:18 wait until this is stopped thinking and 4:21 we've got our code and then we'll go 4:22 from there okay so it started to 4:24 actually build out our code it did think 4:26 for quite a quite a while so if we 4:27 actually scroll over here thought for 4:29 121 seconds so about 2 minutes and then 4:33 it gives us our game overview and the 4:35 complete set of code right over here so 4:37 it's I think just completed yep so 4:41 simple enough does give us information 4:43 on how we can run this so copy this code 4:45 into the p5.js editor and go ahead and 4:47 edit it and run your game and play your 4:48 game but that will mean you know 4:51 providing this code to to anyone that 4:53 you want to play the game and then they 4:55 have to run it's in this web and it's 4:58 just terrible so we're going to run in 4:59 the web editor just to show you how it 5:01 looks so let's copy the code literally 5:04 come over here let's paste that code in 5:06 and we are literally going to go ahead 5:08 and say run and you can see here really 5:11 really basic let's run it again let's 5:15 see if we can move around at all trying 5:17 to see okay you shoot with your mouse 5:20 but okay so you can't even move you just 5:22 got to shoot you can see it actually 5:24 like times out a bit so shoot there okay 5:27 so not great at all and Bear with me 5:30 because we're going to make this work 5:31 and look a lot better cuz right now I 5:34 agree it looks terrible it's functioning 5:36 not too great and this is how far you 5:39 could get but now we're going to bring 5:40 in lovable plus I mentioned earlier or 5:43 in the title that Claude 3.7 Sonet is 5:46 involved here loveable have now 5:48 integrated with Claude 3.7 Sonet which 5:50 is Making Waves over the last week with 5:53 its functionalities when it comes to 5:56 workflows and external tools so from a 5:59 no code perspective using clae 3. 3.7 6:02 Sonet is really a game changer and I'm 6:04 going to show you how Okay so we're in 6:06 lovable and we are basically going to 6:09 preempt the code we're going to add in 6:11 here all I'm going to do is I'm going to 6:12 just paste in this prompt saying I am 6:14 building a p5.js implementation of an AI 6:17 robot theme shooting game and I have the 6:18 code to implement below colon just 6:22 double click copy up code and go ahead 6:25 and just paste it in there straight 6:27 we're going to launch it in lovable and 6:29 and then we're going to let lovable run 6:30 through the the code where it needs to 6:32 go and give us a preview hopefully with 6:34 no errors but let's see I'm going to 6:36 jump to the output and then we'll go 6:39 from there okay so no errors and we 6:41 actually got the game successfully into 6:43 lovable which looks very similar to the 6:44 one we had on the web editor so it says 6:47 game over click to restart if we click 6:49 we can basically we can try and shoot 6:52 these but it's actually really hard and 6:55 difficult okay we killed one there one 6:57 there click to restart okay so now we're 7:01 going to add in this prompt so I'm going 7:03 to go in there I'm going to say I found 7:05 the game played to be too simple and not 7:07 competitive at all the environment and 7:10 enemy robots are absolutely hideous they 7:12 barely resemble robots or a stunning 7:14 environment or/ Battlefield and fail to 7:16 intimidate me at all a for the game to 7:19 go viral where my focus is a products 7:20 and building of those products redesign 7:22 the robots in the environment to make 7:25 and make any other tweaks to boost the 7:26 chances of it going viral so let's start 7:28 with that and let me just show you I've 7:30 done this previously with another game 7:32 that I I'll launch and I'll link in the 7:34 description but I want to show you how 7:36 lovable takes this and then you know 7:39 just picks it up and and goes with it so 7:41 let's run that and let's see how lovable 7:44 responds because right now it does look 7:46 pretty trash so I understand you want to 7:48 make the game more competitive and 7:49 Visually appealing that's enhance it so 7:52 this might take a while so I'm going to 7:53 jump to when we have a results and we'll 7:55 go from there all righty and on edit 7:57 number two after editing that proms you 7:59 can see how much it has revamped the 8:02 game so we've got cyber robot 8:03 Battlefield show controls so arrow keys 8:07 to move your robot Mouse to aim your 8:09 weapon left click or space to shoot 8:11 collect powerups so we powerups in 8:14 health Shield rapid fire that's pretty 8:16 cool and let's play a little bit of the 8:19 game so let's move around wait let's try 8:24 and see okay we can't move that's 8:26 definitely something to work on so I'm 8:28 going to see here cannot move in the 8:31 game by using the arrow keys so let's 8:35 work on that and let's improve that but 8:37 you can already see off the bat it's 8:39 just a much more beautiful UI the 8:41 functionality is a lot better and I mean 8:43 when we start comparing it to you know 8:46 this over here it starts adding some 8:48 nice depth and we're only on edit number 8:50 two within within loable so the whole 8:52 thing here for me is it takes oh that's 8:56 it takes lovable takes the game that 8:58 you've built out of the plan and Lev 9:00 really does transform it so let's try 9:03 again here and see if we can move around 9:05 okay there's a lot of these guys 9:07 shooting at us this makes it really 9:09 difficult okay so let's see if we can 9:10 first move around so click to restart 9:13 okay I can't move still can't still 9:17 cannot move around and the game the game 9:23 is quite difficult let's make it a wave 9:29 for formats so a wave formats in the 9:31 sense of like the enemy's coming waves 9:33 right so wave one wave two is harder 9:36 than wave 1 wave three is harder than 9:37 wave two and so forth it gets more and 9:39 more difficult as you go so let's see 9:41 how that goes I'm going to jump to the 9:44 results of this and then we can just see 9:46 how it's looking okay so we on edit four 9:48 and let's see how this goes restart okay 9:51 perfect we can actually start moving 9:53 around and we can actually start using 9:55 this game so you can see our enemies 9:57 have a life on them oh what still fairly 10:00 difficult to shoot these guys but we're 10:02 getting there getting there okay you can 10:05 just aim with your a that's much better 10:07 okay okay okay so you can aim with your 10:11 mouse okay there we go nice let's get 10:13 out the way okay that's good that's good 10:15 that's good got it wave one complete 100 10:18 points next wave in 1 second and then it 10:20 fails okay so or we got shot down on the 10:23 first thing of wave two but this goes to 10:25 show just how easy it is to build these 10:27 games you can go ahead and then just 10:29 start prompting lovable and building out 10:31 your game but it gives you a solid start 10:32 it's better than going into lovable and 10:34 saying Hey I want to build a firstperson 10:37 shooter and it's going to give you 10:38 something so weird to start with this 10:40 you know what you're building you know 10:42 what you're building in you can trial it 10:43 in 10:44 p5.js and I mean you can see from what 10:46 we've gone to to what it looks like now 10:50 is you know miles apart within two edits 10:52 in lble so from now on you can just 10:55 basically prompt it and build it and you 10:57 can really get the game to exactly what 10:58 you want so that is the video I really 11:01 hope it was beneficial I actually 11:02 carried on building out a similar game 11:04 to this which there is a link in the 11:06 description below to check out so go 11:08 check it out give it a play let me know 11:10 what you think of it and once you guys 11:11 build out your games drop them in the 11:13 comments let other people play around 11:14 with them I'll dive in there I'll go 11:16 play around with them get in contact 11:17 with me let me know what you're building 11:19 I'd love to know about it and then just 11:21 before I go one final request over 95% 11:24 of the people that watch this channel 11:25 are not subscribed so if you did get 11:27 some benefit out of this or you are a 11:29 person that watches my videos but is not 11:32 subscribed it does amazing things for me 11:34 if you can hit that subscribe button hit 11:36 the like button maybe drop a comment 11:38 does amazing things and allows me to 11:40 continue making better and better 11:41 content for you so other than that I 11:44 will see you guys in the next video 11:45 cheers