I Built a No-Code Chess Game in 10 Mins (Cursor AI)
23:21

I Built a No-Code Chess Game in 10 Mins (Cursor AI)

Alex Finn 05.09.2024 4 197 просмотров 121 лайков обн. 18.02.2026
Поделиться Telegram VK Бот
Транскрипт Скачать .md
Анализ с AI
Описание видео
#ai #coding #programming #cursor #games Follow my X: https://x.com/AlexFinnX Subscribe to my newsletter: https://www.1percentbetter.io/subscribe Learn how to build a simple Chess game with AI! No programming experience necessary! Beginner friendly! We use Cursor to build a simple game in under 10 minutes. You can then use these skills to build any application or game you want. Timestamps 0:00 What are we building? 0:50 Introduction to Cursor 2:26 Project Set Up- Install React 5:36 Start Building Game 7:02 Chess Board Set Up! 9:08 Implement Pieces 10:36 Implement Chess Rules 16:31 Debugging the game 19:56 Bouncing Ideas Off AI 20:12 Adding Further Stylistic Changes 21:16 Fun Customization 22:50 Final Game Commands: npx create-react-app chess-game If it doesn’t work: sudo create-react-app chess-game cd chess-game Npm start #ai #coding #programming #cursor #games

Оглавление (12 сегментов)

  1. 0:00 What are we building? 182 сл.
  2. 0:50 Introduction to Cursor 339 сл.
  3. 2:26 Project Set Up- Install React 606 сл.
  4. 5:36 Start Building Game 231 сл.
  5. 7:02 Chess Board Set Up! 420 сл.
  6. 9:08 Implement Pieces 301 сл.
  7. 10:36 Implement Chess Rules 1040 сл.
  8. 16:31 Debugging the game 618 сл.
  9. 19:56 Bouncing Ideas Off AI 54 сл.
  10. 20:12 Adding Further Stylistic Changes 185 сл.
  11. 21:16 Fun Customization 285 сл.
  12. 22:50 Final Game 97 сл.
0:00

What are we building?

I want to build a chess game and boom just like that you go to chess. com right now it's going to look just about as good as this and I built it in what 3 minutes we in here I'm going to show you how to make a chess game all by yourself no coding experience necessary just using AI the gaming industry is by far the biggest industry in the world it's bigger than movies and music combined if you can make a video game all by yourself you can put it on the internet and make tons of money off of it with cursor AI you can now make fully functional video games all by yourself even if you've never written a line of code in your entire life if you watch this video Until the End I personally guarantee you'll be able to build video games by yourself you'll start with the chess game I'm showing you then you can move on to any idea you have let's get into it boom I'm over here now let's get
0:50

Introduction to Cursor

right into it what you're looking at here is cursor I'm about to walk you through step by step how to build your own chess game you don't need any programming experience quow I'll walk you through exactly how to use cursor some of the tools you need to know about if you've already seen my videos before it'll be a quick refresher if you're new to them you'll be good to go after watching this so we'll go through cursor how to use it we will go through the setup of the chest game we'll build it out we'll test it we'll debug it everything will be good to go by the end of this video you'll be a cursor Master you'll be building all your own games you'll have your own chess game good to go right put it on your resume whatever you want to do this is huge right the video gaming industry is massive if you build your own video games and they are successful you can sell them for big money let's get into it so first thing we are going to do is cover a little bit about cursor this is the most powerful AI application in the world over on the right hand side is your AI Chat bar this is where you can go hey AI build this for me and it writes a bunch of code this is command L if you are on Mac the other big feature which we'll be using mostly here is the composer this is command shift I you're looking at the composer here this is the most powerful tool in cursor this basically has complete control over your application can build out whatever files you need write code for all those different files puts it all together it's like your composer in the orchestra right it's just that you go over here you do this code it's your own personal developer so let's start from the top let's get things installed for this
2:26

Project Set Up- Install React

application we will be using react. js it is a JavaScript technology it is one of the most popular Frameworks for web applications on planet Earth if you learn this you'll be good to go you can build other web applications so let's start from the top here let's open up a folder create a folder anywhere on your computer and documents on your desktop for this chess game you can just name it chess whatever you want open folder documents and I'm opening up the game folder that's opened up now we are going to in install react so we're in the folder I hit command or I hit control till day that brings up the uh console and now I'm going to do npx create react app and we're going to call it my chess game uh I'm going to put all these commands down below so pause it here if you need to copy paste put it into your console what this command does is it creates a baseline boilerplate react app application that we can build on top of so I'm going to hit enter here any command I use I'll be putting it down below um but feel free to follow along you know pause wherever you need to this is more of a relaxed laidback video so it's creating the react application again if you learn react you know you'll be able to build any kind of web application you want uh it's the most popular language on the internet today uh and once we get this up and running we're going to get into the AI and we're going to start having the AI run some code for us which is going to be a lot of fun it's going to be cool so here we go it's building the code only takes a second here boom all done now we can get into the code so we do CD my and then you can hit Tab and it autoc completes so what it did if you look over here on the left is it created a folder for our game and put all the files in there so we want to go into it so in the terminal CD and the name of the folder with a slash tab Auto completes hit enter to confirm we went in I type in LS hit enter it shows me the files matches up there we're good to go and then we can do npm start and that runs the application so that's getting going over here on my right which I will pull in is our working web app boom boilerplate code if this is your first time doing this you just built your first web app congratulations big props uh what I'm going to do here now is I'm going to move this over to the side of my screen so that we can keep this up the whole time and watch our game be constructed so I move that boom we now have it on our screen at all time one important note here too before you start using the AI also make sure to go into your game go into the source folder and then click on app. js and this will make sure that the AI knows where to begin coding and now let's start coding right so we got our application to the right we got cursor to the left what I'm going to do now is hit command shift I that is going to uh open up our composer and we're going to start
5:36

Start Building Game

talking into the AI like it's our own personal developer right so we're going to go hey there so for the record I talk to my AI very properly I say hey hello thank you please one day AI is going to be more powerful than us and if you don't want to be destroyed by your AI you need to make sure you're treating it nice up front so I treat it very nice hey there I want to build a chess game I want it to be very simple and easy because I am a beginner we got to spell beginner right beginner I want to build this using react let's do this one step at a time by building the board all right so what we're doing is we're talking to the AI like it's our own personal developer right we're talking to it in plain English where we don't have to use any sort of code we just say hey I'm new to this help me out here I want to build a chess game I hit enter it starts setting up the uh files for us that we need um so it's going it's creating different code let's see what we got here and it's setting up the chess board for us and once this is complete it is applying the code we can hit accept
7:02

Chess Board Set Up!

all and boom just like that the chess board is set up this is great so we got the chess board set up it created the code for us just like that pretty incredible all I had to do is write that one sentence we got the chess board obviously we're not done yet we're going to add the pieces game logic but what you can see so far here is I took one sentence it already started building me the app I didn't write a single line of code uh this is as simple as it gets so let's go back into the composer let's keep talking to our developer here excellent I like to give it prop so it knows it did something well right excellent uh what would okay so it's actually telling us the next steps here the next steps would include adding chest pieces implementing game logic let me know if you want to make any changes excellent let's say board looks good what would you recommend the next step be right so this is another thing two you don't need to come up with all the steps in your own head if you just have a final Vision you can figure it out right you can ask the AI hey what would you do next here even if you don't know what a final the final vision is and you just want advice from the AI you can say hey how would you make this better how would you improve this right so I'm going to say hey what would you recommend the next steps be here AI goes great the next logical step is ADD chess pieces to the board let's create a simple representation of the initial chess setup using UN code chest symbols here's how we can modify the files so it's creating new files for us it's creating the new code this update adds uni code next steps then has gives us next steps let's just accept this the way it is now boom we got chess pieces on our board we're getting there we're making progress right in just a couple minutes we got the board we got the chest pieces okay that looks awesome again I'm treating my AA right listen AI when you become generally intelligent please don't hurt me all right see I'm being very nice here please don't hurt me when you get general intelligence all right so that looks awesome let's implement the peace
9:08

Implement Pieces

movement all right so we're going to the next step it recommended peace movement let's do the piece movement great let's Implement basic piece movement We'll add the ability to select a piece and move it so here we go so it's creating a lot of code for this one so great let's implement it here's how we can modify all let's update the SS to highlight the selected pieces these changes Implement basic we converted the board to a state variable added select piece implemented okay so now you can click on a piece to select it and click on another Square to move the piece there this is very basic implementation it doesn't include any chess rules let's accept it let's move it all right let's see what happens if I click it can I move it just like that the pieces are moving right this is amazing obviously as it said there's no rules in there there's no rules around pieces there's no gamepl yet but we're doing it step by step right the best way to use cursor and AI is not all at once right I could have said hey create me a chess game then sit back and it does it I'd rather do it step by step for many reasons one it ensures it does it right AI is not perfect yet and two we learn along the way how everything works now I can go along read look at the code understand things every step of the way and that's big right this isn't all about just doing things getting it done you want to learn too you want to get better the better you understand how the AI works the better you'll be at using it so let's do next steps Implement
10:36

Implement Chess Rules

turn-based gam playay all right let's do it okay let's move on to the next step and Implement turn based gameplay make sure I spell that correctly and again I haven't written a single line of code I'm just giving the AI small commands it's going in writing new code changing code adding new files getting whatever and look this looks pretty nice you go to chess. com right now it's going to look just about as good as this and I built it in what 3 minutes we in here all right let's go on to the next one uh sure let's Implement turn-based gameplay we'll modify the app. js code to keep track of whose turn it is only allow moves for the current player here's how the updated code Works uh it adds the current player it implements black piece white piece it updates the handle only allow selection in place to become the current player only allow mover switch turns and valid move added status message to play display whose turn it is all right let's accept it current player white all right so if I go white player can I move it yep current player black now let's test it if I go back to White can't move it if I'm white but if I'm black I can move it works make sure to test every step of the way that's another recommendation I give you make sure you test every step of the way isn't this awesome we're it feels so good to build let me tell you this when you start building your own thing when you switch from consumer to Creator things change you get addicted to it you're going to be addicted to this trying new things building out new things customizing it you feel like a magician I kind of right now I've never built this chess game before I'm doing it live with you here all right let's see what's next Implement basic chess rules okay let's move on to the next step and implement the basic chess rules and let's see what it does when we just say that let's see what it decides what rules to implement all right let's Implement basic chess rules for peace movement good we'll start with the pawn rook and king here's an updated version all right so we're starting with a few pieces it checks to see let's scroll if there's a valid move function and checks if the mooves valid based on the positions it implements the basic movement rules for pawns Rooks and Kings uh and okay so it's doing it for a few of the pieces let's accept it it's completed now let's test this out so if I choose a pawn can I move it up here nope here yep okay if can I do the two yep okay uh let's see what else we can do can we move it here yep all right looks like that works well this is cool all right so next steps implementing movement for the remaining pieces this looks great remember complement your AI this looks great let's implement the remaining pieces here we go certainly let's implement the movement rules for the remaining pieces Knight bishop and queen we'll update the is valid move function all right so it's updating the function with the new rules and it is implementing that now so we got the rest uh wow it even puts in the advanced chest rules for you Advanced chest dorks out there and pant is now in so it knows everything the AI knows exactly how this works let's go accept boom which of these Advanced rules would you like to implement next uh for testing purposes and here's what's great too you don't need to do everything the AI says if you want to try other things out go off the beaten path you can do that I'm going to do that right here actually I'm going to ask it for testing purposes let's add a button that allows me to reset the board I'd really like to reset this board so every time I test something new I just move the pieces back so let's ask the AI to do that okay so it's implementing the new code it's adding a reset button it's going to make it look pretty for us uh so created on the board a new button it resets the game and it resets the Styles boom reset all right and the game's reset for so let's test it out here I move the pawn I move this actually let's move this up here and let's reset the game works well this is a good AI developer I like this I'm going to tip this AI developer all right so let's now you have the reset button as you start this will be useful for testing different scenarios all right okay what do you recommend the next step be all right so let's see what the AI wants to do next now that we have the reset function let's see here Let's uh Implement Pawn capture move allow pawns to capture diagonally okay let's do that would you like to proceed with implementing Pawn capture moves or let's move forward with that change see it's great it's my advisor it's not only the developer it's the consultant it's the adviser hey we should do this I go okay I feel powerful I'm feeling powerful right now the AI is like hey can I do this I go yes sir you go right ahead or yes ma'am right and it goes and it does it whatever gender the AI is I don't know it's implementing it for us let's go all right so let's see what it did first of all before I hit accept let's Implement Pawn capture will update the is valid move to allow pawns to capture diagonally here's the modified code all right I'll accept that and now let's get some pawns captured shall we so I move this up here boom I captured a pawn we have captured our first Pawn in our chess game amazing little
16:31

Debugging the game

side note here I know I'm doing a lot of different prompts use whatever prompts you want like I'm make these videos as kind of a guide where I kind of Hold Your Hand a little bit but if you want to go hey dude let me do this on my own and you walk away and you start building things your own way feel free to just keep the video on in the background and start building things on your own all right that looks good let's keep this moving let's keep this shaking here uh next steps include imp okay let's Implement that next step so now it's implementing some uh some more advanced rules for the game as well so if you're a chess expert you know what it's doing here it's adding in the advanced rules the end pant for capturing pawns that one appears to require a lot code so we're putting that in there let's accept it we're not even going to test that out we're going to assume that one works all right now let's move on uh adding castling for the implementing check and Checkmate detection okay perfect let's move on and Implement those rules including check and Checkmate detection all right so it's implementing those Advanced rules here we go so after this I mean we'll pretty much have all the rules complete we'll be able to do check and Checkmate if you have a friend with you they'll be able to come in control The Other Board sit next to you get your aunt or Uncle over say hey hey Auntie Jean um I built a chess game would you like to play with me she goes what I didn't know you were that smart you go yeah atie Jean I'm a programmer now I use AI to code I know how to build my own games apps I built the chess game play my chess game with me and she goes oh my God you're the smartest human being I've ever met in my entire life all right let's see what we got here it updated a bunch of things which would you like to do next uh let's accept the changes uh we got an error this is good um so let us debug this I think it's important you see how to debug as well uh we got an error this is what it looks like and then so when you get an error we're going to refer back to the AI is going to help us I'm keeping all this in here so I can show you how to improve this stuff and debug on your own so we got an error let's copy the error over and say we got an error this is what it looks like let's put it in send it to the AI I apologize for the oversight the AI apologizes to us errors is occurring because we've declared Checkmate twice once it's a state variable once it's a function let's fix this by renaming hey I trust the AI boom fixed just like that we debugged it back in the old days as in like 6 months ago when developer made errors like that and there were bugs it would take hours to fix you'd have to go through every single line of Code test 100 different things out now you just go hey AI I got an issue figure this out for me and it goes and it figures it out and in literally under 15 seconds it's fixed boom fixed that worked great what would you recommend as next steps let's see what it recommends next
19:56

Bouncing Ideas Off AI

we might be getting close to this game being complete soon at this point you can play the full game uh it has some Advanced rules let's do this let's move to the interesting part and do the AI add highlighting for possible moves when a piece is selected I like that I like
20:12

Adding Further Stylistic Changes

a piece is selected I like that let's Implement adding highlighting for possible moves when a piece is selected so for beginner chess players like me this is critical I got to know where the piece pieces can move when I click on it um so now we're implementing like Advanced UI techniques right so I can say add this in there the AI is going to update the UI and now it's going to have advanced functionality let's see here it's putting in the new code and this is one of the most fun Parts about using cursor and building applications with AI is you can customize it any way you want right you can use any kind of customization you want you customize the colors put it in dark mode put in light mode add little tool tips add little rules it really is amazing the things you can do here accept all boom look at that it puts a Green Dot where you can move it right that is pretty amazing now let's get into more fun customizations we can do here
21:16

Fun Customization

uh let's make it so the background is in dark mode and the board word is purple and green right now we're customizing this to make it our own we want to make it however we want this is the best part about programming is every little thing you want is customizable you can make anything look any way you want and just by going to the AI say hey change this customize this it can do it let's go apply boom I think that actually looks better I think that looks way better uh that is I mean that is actually pretty amazing we were able to go in there customize every little tiny thing we want this actually looks way better now I like the dark mode easier on my eyes and now you can take it from here we just built out a full game now you can take it from here do whatever you want customize it any way you want you know if you want to start implementing an AI so you can play against the computer you can start doing that here uh if you want to potentially make this even an online game you can do that here if you want to keep track of a history of moves you can do that let's see here what are other customizations we can Implement here and again anytime you want you can bounce ideas off the AI and it will give you hints right so we can do move history wow look at all this sound effects highlight last move flip the board capture pieces display move history custom piece designs theme switcher there's a lot you can do
22:50

Final Game

animations right this is the best part about programming this has always been is you can go in customize anything you want build anything you want this is why I got into programming I couldn't draw I couldn't paint I was bad creatively but programming allowed me to build anything I want right and now with AI anyone can build anything they want if you found this helpful if you learned anything hit subscribe turn on the Bell notification hit the like button I really really appreciate it love you all see you in the next video

Ещё от Alex Finn

Ctrl+V

Экстракт Знаний в Telegram

Транскрипты, идеи, методички — всё самое полезное из лучших YouTube-каналов.

Подписаться