♟️ Code CHESS in JavaScript (Super simple!)

hey everyone and welcome to this video in which I'm going to be building a working game with chess and I'm going to be building it purely in JavaScript no canvas okay this is actually one of the harder JavaScript tutorials that I have done so if you're looking to practice your JavaScript fundamentals then this is the perfect video for you so this is what the final thing will look like as you will see we will have the Beijing brand squares but you will notice that it's not just Beijing Brown it goes from brown brown to beige beige so that is something we're going to do with modulus and a bit of math and then of course we're going to have to implement the moves of each and every chess piece for those of you not familiar we've got the pawns which move one or two steps at the beginning and then they can also take over other opponents pieces diagonally and then we also have the Knight which Moves In This L shape The Rook which moves horizontally or vertically assuming there's no one in this way and then also the Bishops which move diagonally we of course then have the queen who can move like the bishop or The Rook as well as the king who could only move one step so that's what our finished product is gonna look like I hope you're excited let's do it okay so first off we're just gonna get up our code editors I am using webstorm which means that I can simply choose to name this project I'm going to call it JavaScript chess I'm just going to save it in the directory that I want maybe let's just call it JS chess for shorts and then we're going to spin up that project so there we go here is our project and of course we need to create some files so let's go ahead and do it I'm going to create one file that's going to be for HTML so I'm going to call it index.html and there we go the HTML extension will tell our code editors to treat this as an HTML file webstorm also gives you some boilerplate so that has been added next I'm going to create a file for our style sheet so I'm going to call it Styles CSS so I'm going to add the CSX extension or you could just click that it is up to you we of course need some JavaScript so I'm going to make it app.js for our JavaScript I'm going to actually make another one as well okay I'm going to make a separate one just for organizational purposes called pieces JS where we're going to store all our JavaScript pieces okay our chest pieces so that is what we have so far I'm just going to minimize that and let's continue with our index.html so I'm just going to call this let's just call it chess because we're wacky like that and let's continue next I'm going to just link up the style sheets I'm going to use the link tag like so and I'm going to do Rel stylesheet and then we have to actually get the star sheet so we called it stars.css just make sure it's named the same way that is here okay great and now let's link these scripts so basically I'm going to link the app.js file but before it before I want to read this file I actually want to read the content of the pieces file okay because I will be showing you why we want the content of this to be read before we go ahead and read that because we'll be defining some pieces in here that we then use in the app.js file great now this is going to be super simple we're not going to really do much here at all we're just going to have a dip and we're going to give this the ID of game word just like that and everything is going to be injected into we're going to add this or in JavaScript I'm just going to add a p element here that is going to tell us whose Goa is so I'm going to do it is and then we'll use the span element to kind of interrupt that P element and let's do a space here I'm going to go and then in here I'm going to pick this out so I'm going to give this span the ID of players we can display whose go it is right so that's what I have done and finally I'm just going to have another P element and this is going to have the idea of info display so we can just add extra info if we need okay I'm just going to format that a little bit better of course we will be formatting this much nicer when we actually finish this and upload onto GitHub um let's just get this done for now okay so that is it in webstorm I can just go ahead and click here and that will open up my chess game or if you are not using webstorm you can simply click here copy the path copy the absolute path and then that just means that we can paste it in like so either way is good and then we just inspect this so we can see what's going on so you already see it is go that is the HTML we added and this is essentially the path to my file so the index HTML file we made and the project called JS chess that lives in my webstorm projects great let's carry on so now let's actually go ahead and create our game board so like I said we're going to be doing this all in JavaScript which means we need to pick out this whole element the div with the ID game board so I'm just going to pick that out and then in here let's define it so I'm going to go into my whole document use Query selector to look for an element with the ID so hash is for ID of game board okay and then what should we save this as I think we should store this as just game board like so so there we go okay next I'm also just going to pick out everything else while we are here so let's pick out the span with the ID of player so let's copy that document query selector and then I'm just going to look for the ID so hash for ID of player and what should we say this as I'm going to save it as the const player display so we can display whose go it is great again I will be kind of cleaning this up later um for you I'm just going to keep that consistent for now next let's also pick out the info display so let's grab this I'm going to use document again dot query selector and I'm going to look for the info display and it is an ID so once again we need to put the hash there and I'm going to save this as info display because I'm really original plus it's just more readable great now let's go ahead and Define what kind of state we want to have at the beginning right so I'm going to just Define this as const start pieces and we're going to have an array that's going to essentially symbolize what every single one of my squares is going to look like there's 64 squares because there's an eight by eight board so maybe let's yeah do we need the width let's let's define the width here because I do think we will need that eight by eight board and now let's get to defining what goes into all of the spaces in our chess board so for this I'm going to actually Define pieces which I'm going to store in here now for this we're actually going to use svgs we're going to use them from the internet so already existing svgs here is where to find them so here is just one of the king and we're literally just going to take this code so here is the URL and this is the code you need okay so either navigate to that or I will put the full file of all the pieces in the video description below so you can take that too so fast off I'm just going to do const king equals and then I'm basically going to open up some quotation marks and just paste that SVG so that is the whole SVG as you will see let's go ahead and grab the others so that is the king let's also do the queen so const Queen equals and then we're gonna open up our quotation marks and let's search for the queen so let's search Queen just like so I'm going to grab this one click on SVG copy all of this and then just paste it in like so so that's two I'm also going to do The Rook so const Rook equals and then ignore that auto completion we're just gonna put the quotation marks and then let's search for a rook so I'm just going to search for Rook like so and there we go we've got a rook get this SVG of course you can pick whichever ones you want I'm just going for the first ones that show up just because I kind of like them so we've got our rug next we need the bishop so that we go again ignore the auto completion just get your two quotation marks and then go back here and let's search for the Bishops I'm just going to search Bishop like so I'm going to copy this so get the SVG copy that and whack that in so that's our Bishop uh we also need pawns right so const Pawn equal let's find a pawn let's also find I'm just going to get them all up here now we need a knight and I believe that is it so let's find our Pawn phone there we go again get the SVG copy that paste it in and finally get the Knight so I'm going to just search for Knights let's go down here copy that and paste that in so that is now done which is going to do a few more things before moving on so each one of these I'm actually going to wrap in a div itself so I'm going to give it an opening tag and the first one I'm going to give this the class of Peace so that we know that all of these are pieces and could treat them essentially like so so we've got the class of Peace there and then I'm also going to give this the ID of King just so when we click on this div in the future we know that it contains a king so that is something I have added next I'm just going to actually go ahead and close this so I'm going to put the closing tag at the end so right here I'm just going to close that off with a closing div and there we go so that is our complete string if your code editor is not liking it perhaps just put it in single quotation marks to make your life easier okay and everything more readable so there we have one let's do the same for here so opening div and then in this opening div I'm going to add the class of Peace so all of these are going to have the class of Peace but this one's going to have the ID of Queen okay so in fact maybe let's just copy this and just paste it in like so and just change this out so this is Rook this is going to be Bishop this is going to be porn and this is going to be night right and then let's put the closing tags at the end so we have one already so I'm going to copy that with the final quotation mark and just paste it in because it's a closing div closing tag that the SVG needs to be wrapped in okay great so that is the whole file again please feel free to take mine if you want I'll leave it in the description below okay so now that we have all those pieces like I said that will be red so now we can just use those constants so these constants in our app.js file because that's red here okay so let's do it so my stop pieces I'm going to start off with a rook then it's going to be a night then we have the bishop then we have the queen then we have the king then we have the bishop again then we have the Knight and then we have the Rook now let's do the second row so this is basically all pawns right so I'm just going to put porn one two three four five six seven eight and then I'm just gonna have empty spaces so I'm literally just gonna do empty spaces like that and put eight of them so one two three four five six seven eight one two three four then we're gonna have a bunch of Pawns again and then we're gonna have the same so there we go Bishop queen king that is looking correct to me and we don't need that comma there so those are all start pieces at the moment you won't see them here right because we haven't really done much with them just gonna get rid of that so next is actually displaying this in the browser so for this I'm going to create a function this function is going to be called create board and where's that you're going to use it to create our board so inject a bunch of stuff into this div with the ID of game also injecting into here so let's do it first off I'm gonna actually use this array of 64 items just think of an array of 64 items because we want to create 64 squares with pieces so I'm going to get the stock pieces and use four each and then for each I'm just going to get the syntax so for each start piece let's call it okay and for each stop piece I'm going to use document create element to create a div okay and let's call this Square so there we go we've just created a div we've saved us the const square and I can get that square and use class list and a class of square well we have to actually you know style that up so first off maybe let's go to our style sheet and get the game board so I'm going to grab this and it's a bit bigger for you and look for anything with the ID of game board and let's style it up I'm going to give our game board the width of 320 pixels uh let's also give it a height of 320 pixels okay so that looks like a square so if I go background color black and just look in here there we go and next I want to put 64 squares in here so let's make a square first so we just created a class of square and Y square if I want to fit 8 on the width that means the height and width are going to be 40 pixels right each to make a square that fits eight by eight in the game board great so that we go and then we're also going to alternate right a class of beige that we are yet to kind of use in our JavaScript but I'm simply just going to add the background color and this is beige so one one zero one one zero nine eight great and let's also do brown so background color we can just do brown or if you want you can like make an RGB as well uh so maybe let's do that's Omega RGB 43 43. great so we just made beige and brown cool so now what the next thing to do is well let's actually so we've just made the squares right let's actually put them in to our game board so that's what I'm gonna do next I'm gonna go in here and I'm gonna grab the game board and each time it Loops we're creating a div we're adding a class of square to the square then we're going to get the game board and append this Square we just made after that class has been added but uh oh the square just has the square class only has a width and a height right so I could also do Square class list and add another class so I can do face of course then they will all be beige but let's have a look so I'm just going to get this function and call it down here and there we go we've just created 64 squares so there we go they go all the way down they're not wrapping though so for this I need to go back to here and I'm just going to get rid of the background for now I'm going to do display flex and I'm going to do Flex wrap wrap okay and wonderful so now we have all the squares however of course if you look in here in the game board so we've injected 64 squares each one has a class of square and a class of beige although we don't really want this right one to be beige brown and let's also maybe give them an ID so actually what I'm going to do is just pass through I for the index and I'm also going to get this Square and I'm going to use set attribute to set a unique attribute of square ID and I'm just going to set that square ID to be I so if we look now and refresh and look in here you will see we've just now added that unique attribute and then an ID to each of the squares going all the way down to 63 because of course we start accounting from zero but there's 64 squares in there great let's do the colors next so this is good so far um in fact maybe before we move on let's actually use these start pieces so I can actually also get this square and I can use inner HTML to set essentially this this string as the inner HTML of the div we just created so I'm just literally going to grab the start piece because that is was what presented so here The Rook you will see the Rook is this so if we save this now we've literally let's go ahead and get our div with the ID game board so we've created the squares we've added a class of square we've added class of page we've also given them an ID and the the ones that have you know stuff to put in them we did we put in a div with a class of peace and the idea of rock right you remember making that in the pieces.js file and then it's also got the SVG so how cool is that what a fun way to create a board maybe before moving on I'm just going to style the SVG a little bit more so we're going to grab the actual SVG itself so in here I'm just going to say that if an element that has the class of square also has an SVG in it I just want to make sure that that SVG has a height of 30 pixels a width of 30 pixels and a margin around of 5 pixels to make up for the lack of the uh 40 pixels that it should fill up for this Square okay so there we go that is looking much better I'm just going to make this bigger for us let's move on to actually getting the colors of these squares next so let's go back to our app.js file and let's do it so for this I'm just going to comment that out this time I'm going to actually Define a row so row and I'm going to use a math floor and then I'm going to do 63 minus I right so whatever We're looping so 60 minus I the first Loop will be zero so this is going to be 63 over 8 and then we're going to add 1. and this is going to Define you know like kind of what row we are in and now if row modulus 2 equals 0 so essentially every other row then we're going to get the square class list add and now we're going to do if I so now it's essentially we're kind of like checking what row we're in and now we're checking which Square we are in in that row and if I is modulus 2 and that equals zero and that is true we add beige otherwise if it's not true we add Brown okay cool and then we have else and then we just do the opposite so if when the other row you grab this and then we just reverse these so I'm going to do brown and then beige cool so let's see what that looks like just make sure to wrap this around sort of funky Behavior happens and let's check it out and great we have done it so as you will see beige brown beige brown but when it gets to here it's brown brown and here is beige beige and here is brown brown again so that is how you would create a chessboard wonderful next let's work on actually changing the color of some of these pieces so we want the first two rows to be black and the last three rows to be white so I'm going to say that if I so once again we're just looping over each one of these squares right and if we are n square that is smaller than or equal to 15 so index 15 which means that it's Square 16 we want the first 16 squares to essentially be black right so that means I would get this Square so literally go into this Square get the first child but then get the first child of that and I actually just want to add the class list of black to it now these are by default black but I'm just going to do it just so in case you want to know how to change this so let's go into the first child once again the first chance to the first child then the first child again and now I'm going to do class list add and I'm going to add the class of black which means we need to of course Define it so here let's do black and this is going to be a fill because svgs works with Phil okay we're on the SVG we need to change its fill and I can just do black if I wish or maybe let's go ahead and do another color just so it's obvious that it's changing so I'm just going to go ahead and um let's make it like here or something so 28 RGB two eights two eight two eight okay so that's what we have done we've done it on the first 16 squares so you will see that is slightly changed it might be difficult to tell but if I go into the div get a first child and get that div's first child we've added the class of black which means that the fill has been changed here and I can also change it like that if I want to just be very sure that that is changing great so now let's do the same for the bottom 16 squares so this time I'm going to say that if I is larger than or equal to 48 because that will account for the last 16. I'm literally just going to let's just copy this and I'm going to add the class of white so this time I'm going to go back in here and Define white so dot White and again it's the fill so what is y again is two five five two five five two five five so now if we refresh this those will be white amazing so I think we're done with the board for now let's add the drag and drop functionalities next so to do this what I would do is I would first off back in here well we're going to have to make each one of these draggable right so I think yeah we can do this forever if square has a first child Okay so we've just added the start piece so if a first child exists right because here we have the parents here's the first child so if it has one as you will see these do not then so if that is true we can get this Square first child and we do set attribute drag bull true we could also make this shorter by just checking if a child exists then we do that okay great set attribute so now if we look in here the first child okay so once again I'm just going to minimize this first child draggable true and on these well they don't have a first child so nothing is added cool but all of them should have Dragon Ball true wonderful this is looking fantastic let's carry on so we are done with the create board function there it is let's move on so I'm just going to move down here just like okay now what we're going to do is just grab every Square so to do this I'm going to essentially look in my game board and grab every we could grab every element with a class of square or you could just grab the div it is totally up to you how you want to do it so let's go ahead and do that now so I'm going to go document query selector all and we're going to look in the document for an element with the ID of game board and then grab every element inside of that with a class of square okay you could have done div it is up to you and let's save this as something I'm going to save it as the cons or squares equals just like that great so that is done so now for all of the squares we're going to grab all of the squares if I consol all this I'm just going to show you what this looks like or squares let's have a look okay we've just picked up all those squares right and we've put them in a node list so you will also see that each of the squares you see the div you see the class that it has and you see the color so that is a bunch of useful information that we can use and now once we have all those squares in our node list I'm going to say for each one of them so for every single one of that node list let's call it a square what I'm going to do is add event distance to each one of them so I'm going to grab the square and use add event listener to listen up for a drag start event and then when the dragging starts I'm going to call a function that I have called dragstart okay so I'm going to Define that here drag start just like so and for now I'm just going to pass through e for event and console log the event so we can see what's happening so this just means that when I start dragging any one of these the drag event is called and this is the event I really just want the target so I'm just going to get this so this is the information I want I want the div with the idea of Pawn that also has a class of peace I want to save that so let's use dot notation because it's an object to get the target okay so I'm just going to go e Target which means that now when I drag a piece that is the only information you get so I'm literally getting that whole element and it's got the SVG in there and so on okay I'm dragging that whole thing which is pretty cool so that's what I am doing on the drag start in fact let's go ahead and save this as something so we could either save the whole thing but in fact we only really care about the start position so I only care about the parent that this element's in so the square so if I do e-target parents note let's try that again I'm going to get this Pawn I know that that pawn lives in the div with the square ID 10. and if we look in here it does so I just want this Square ID so I'm going to use get attribute in order to get this value so parent node get uh attribute and I'm gonna get the square ID so now what do you think will happen when I drag this one that's right we just get the ID that it started in so let's save this as the start position so I'm going to actually save this as a universal thing so let's start position ID equal and I'm just going to essentially start off with it being nothing so null and then instead of consorting this out I'm just going to save that to start position okay so we start dragging at the moment start positions now but as soon as you start dragging something we get that square ID we save it to here which overrides it up here great I'm also actually just in case just gonna get the whole drag element itself and save it as well so drag element it's just the e-target right so again let's drag element cool so now we have those two things being saved you could have just saved the drag element and then got the ID from it later it's totally up to you Okay so we've got the drag start now I also want the drag over event so as soon as you start dragging over anything so let's define drag over function drag over and this time I'm just going to prevent the default action happening so you prevent default okay so when we're dragging over the default action of drag over should not happen so if I didn't have this it's going to console log e Target you will see oops e is not defined plus two e you will see it's telling me what I'm dragging it over I don't care about that and it might cause some funky Behavior so I'm just going to do e prevent default next I'm going to do drag drop where all the magic is gonna happen so we're gonna listen out for a drop event and we're going to Define drag drops so these I'm not making up these come from a long list of things that we can listen out for so let's define drag drop here function drag drop just like so and drag drop so this is interesting because we are dropping into squares that are empty right most of the time but of course we're going to have to drop into squares that already have something in there and if I drop into this well we are dropping into the div but technically we could also be dropping into the part the SVG the piece and so on we don't want any of this to happen right we just want to make sure that we are dragging and dropping into the square itself so I'm going to show you how to do that first off I'm just going to go into the style list and I'm going to say that each Square has a position of relative because each of its children so the SVG I'm going to position relative but also give it a z index to make sure it's always behind the square so let's go ahead and um you can go very aggressive like minus nine I don't really know what we have in France we've got the SVG done let's also get the path and again just give it a position relative we can make this minus 10 to make sure that the part is always behind the SVG and then also one last thing I'm going to get the piece so the actual piece itself and put it in front of the square so I'm going to position relative but but this is a positive number so let's go with nine so this just means that the piece will always be fast okay so when we hover over is the piece that shows up and not the square so that works which means that when we drag over onto here we'll be interacting with the piece and then dropping into the square so replacing that piece so that's what you have to do now let's go back here and to prevent any funky Behavior happening so we don't you know drop into two pieces and this function is cooled twice I'm going to use e stop propagation so that is important okay and then we can get whatever we are dropping into so that square so the E Target parent node right because as I said this is what we are dropping onto or jogging onto the piece but the parent node is the square so that's what we want to drop into right so we're going to get the parent node and append the element we are dragging so this drags element hopefully that makes sense but this is only if you know something exists in that square because if it doesn't there will not be a parent node it will just be the square so in that case we just get e Target and then we just append the dragged element okay so if we are going here that will be dropped in there as you will see ta-da we can now drag and drop pieces and if we are wanting to replace the piece of course that will not work so let's get rid of that let's do that this will add another piece into here but of course we need to remove the existing piece so for that to happen I will need to essentially after we append it to e Target remove everything in there great so now it would be like that and now we can take over the pieces of course that's not the correct Play We Are we still have a lot to do so let's continue I just wanted to show you how to drag and drop efficiently in JavaScript okay so let's move on let's make sure this only happens if there is already a piece there and that it's also the opponent's piece okay so that is something that we're gonna have to Define so first let's check if something is taken so I'm going to Define taken and how would we Define taken well if e target class list contains the class piece right because if you look in here if the classes contains peace that we know that there's something in there right so once again I'm just going to console log e Target for you let's put it up here and just checking if we have any console logs but I don't think we do so if I now drop that in here you will see that we dropped it into this Square that's the e-target or if I drop it into here you will see that we've dropped it into the div with the class of square and brown and the square id19 so that means if we drop in here and we look in here there is a class of peace that exists here so we know that is taken so that's essentially what we're looking for we're dropping it and if this e-target classes contains the class of Peace we know that it is taken so that's why we've saved it under the cons taken next we need to actually keep count of whose go it is right because we need to know if it's Argo or what would the blacks go or the whites go so I'm going to Define that here let player go and currently let's start off with the player go being black so black should start let's also while we are here get the player display and use text content to change that to be black let's go okay so that just means it is black go we can probably even change this to be s just so it's obvious and the grammatically correct so we're starting off with being black skirt we've changed that player display context so this is like the start state and now let's actually switch this every time we drop so I think if it's a successful drop so for now I'm just going to put it in here I'm going to write a function called change player okay and just call it so let's define this function function change player just like so and if player go equals black which it currently does we want to reverse it so we want to go player go and override it to be white and we also want to get the player display text content and change it to be white that is not the only thing we need to do but for now I'm just going to finish this off else player go equals black and player display context equals black okay great so now every time we drop that should change even though you know it's not successful we are changing that each time thanks to this function right here one other thing we want to do is actually reverse the IDS right because when we are black you know that makes sense that we're starting off with this being a zero for the square ID and this being id63 but when it's y goes we want this to be square zero and this would be 63 so that we can move the chest pieces in the correct way think of it like flipping the board right if you're playing against yourself so we now need to revert these IDs so I'm going to write a function to do that so I'm going to do this down here function reverse IDs and I'm going to use document query selector all to grab everything with the class of square in fact we could have just done that up here where did I do that we don't really need to look in the game board let's just get everything with the class of square and let's save this as all squares so getting the squares we're getting the freshest squares when we call this function because the other ones are stale now not stale but you know what I mean again the freshest ones that we call this function and for each of them so let's grab all the squares and for each Square we're gonna have to get the index and I'm just going to override the square ID so I'm going to get the square I'm going to use set attribute just make sure to name this exactly the same so you can override these Square ID I'm just going to put this on a new line for you and then we're going to override it with the reverse of it so this is a cool way to do reverse with the multiply by width so essentially 64 minus 1 right because we're going to start with 63 and we're just going to minus I from it so the first time we loop I think we're missing a parenthesis here and here so the first time we Loop the I is going to be zero so width multiplied by width minus 1 is 63 minus zero so we override the first Square which originally had Square D 0 to be 63 and then we minus 2 format so 62 and so on and so on so that's how you would reverse the IDS now let's write a function to revert the IDS so function revert IDs just like so and this time once again we're going to get the freshest Square so I'm going to grab all that and now I'm just gonna grab all the squares again and for each Square thank You tab nine for that auto completion this time I'm just going to get the square and use set attribute and just place it back to being I so I'm going to get the square ID and then just make it I again so we want to revert them back when the players go is back to being black but we want to reverse them when we want the players go to be white okay so once again let's check it out so let's look at these just make sure you are looking at these numbers right here if I take a go you will see those ideas are now reverted so that square ID 0 is now here and it's just like as if we flip the board so we can play both pots okay and I'll do it again and it will keep reversing and so on and so on so great there we have it we have now reversed these squares what should we tackle next now let's go back to writing our drag drop function where a lot of stuff is happening so we're already checking if a piece is taken let's also now check for if it's taken by the opponent or if even if it's the correct go okay so let's check that the correct player is actually dragging stuff so I'm going to get the dragged element and if the dragged elements first child class list the class list you can make this bigger contains player go so play a go so whatever we have here's whatever's being stored so what this line is saying is if the drags element I'm just going to console the drag element if we are dragging a black piece obviously we want to make sure that the class is black but there's also a line to play a go which should be black so let's check it out this is black here I'm dragging that and the first child does indeed have the class of black so that should be a correct go let's define that so all I'm going to do is say const correct go because if we are dragging it and it does not contain black it contains white that will not be a correct go so this at the moment the plus and we did it would be true so we can now use it now let's also Define the opponent go const opponent go okay and play a go which we defined as black above if player go equals white well then we want to just change it so we know that the opponent in this case is the black otherwise it's white okay great so we've just defined the opponent go and now let's define if something is taken by the opponent so const taken by a potent so just like that I'm Gonna Get You Target so whatever we're dropping it into again it's maybe console like that up here so I can show you e Target and we're gonna get it first child and if it exists because sometimes it might not exist class or checking if the classes contains the opponent go this time okay so let's check it out I'm dragging this I'm going to drop it in here well we know that this will contain a first child and we're going to get that e Target so the first child the class list is opposite ours right because we're black it's white so we know that is taken by the opponent right because this is a class of white whereas we're currently I'm just going to console log this as well console log Play It Go maybe let's just do this so it's really obvious play a girl e-target so play a go I'm going to drop here puego is black that's what we're dropping into we're getting the first child and we're checking the class list contains opposite so play Go equals white no it equals black so then we return white let's also console log opponent go okay I'm just going to move that down here so let's check it out so if I grab this I'm dropping it here we are plago is black that's e-target the opponent goes white and we're going e-target first child and we're checking the classes contains opponent go which it does because we've got class white so we know that that is taken by the opponent got it good I'm just going to get rid of all these console logs again okay so now we've defined a bunch of stuff let's use it so if correct go right and this just means that we are the correct player you know I'm the black player and I picked up a black piece as we've defined here we're just checking that that dragged element does indeed have the class of black then I'm going to um we're going to you must check this first check this first I'm just gonna make some pseudocode for you we're gonna check if taken by opponent foreign is another thing we're going to have to Define if it's taken by the opponent and it's valid we essentially want to you know replace that element right so we're going to put in all of these things as we discussed before we're going to essentially append that dragged element the element we are dragging and remove whatever else is in there great and then of course we can't also change the player so I'm going to do that here and then I'm just going to return out of this so I'm going to move this from here so that is if it's taken by the opponent and it's a valid move however if so we're going to do then check this if it's just taken right we're not going to do anything we're just going to return out of this you can if you want put some text here saying like you can't go there so info display text content you cannot go here if you wish this is optional if you want you can also just make sure that the info display kind of resets itself with an empty string after some time has passed if you want so I'm going to do set timeout and just pass that through into here and make sure that happens after let's say two seconds great that is something you can do so let's check that out I'm just going to comment that out make sure that piece is for correctly you cannot go here and that will disappear of course it will go for here too because we haven't said and not taken by opponents so and not taken by opponent okay so now it won't happen there but it will happen here so that is optional you don't have to have that if you don't want I'm just gonna put that back in for now and now finally if valid so once again we're going to have such a fine valid well then we just want to drag in the element right so we're assuming nothing's in the Square it's just valid it's a valid move so we can't just put that in there and then we can change the player as well and then let's return out of this so let's divide this valid shall we let's do it so I'm just going to go ahead and do that up here so const valid and we're actually going to write a function the function is going to be check if valid so we're going to pass through the target so what we just dropped into and now let's file function so let's do so here I'm just going to make some space so function check valid check if valid and we're going to just pass through the target of what we have just dropped into now the target um let's just console log Target so it's e-target essentially obviously I didn't pass through e-target I just passed through Target because we call whatever we want I'm just going to show you what this looks like so this is the target just making sure line 95 in fact maybe let's get rid of this in this case the target is a square it's got div class Square Brown it gives us the ID wherever if I drag it here we dragged into a pawn right so we want to account for both of these and essentially what we want is just the ID of the square so we're going to do this we're going to say let's define our Target ID and I'm going to get the Target and I'm going to use get attribute Square ID right because in the case of this being a square so if we dropped here we would just get the square ID this is the target I'm using get attribute to get the square ID which is the value 18. however we also need to account for if this is a piece so to do that I'm going to say get that but if that does not exist then we get the target so if it's the pawn piece we then need to get its parent node and then we use get attribute Square ID right because in the case of us dropping it here we need to get its parent and that lives in this square with square ID 14 and then we get that value so hopefully that makes sense so now I can just console log Target ID okay and it was this should now just show me whatever Square we are in regardless or if there's a pawn or anything like that in there we now need to also change this to a number as we're going to be adding and subtracting so I think the easiest way to do this is just wrap this in number and also wrap this in number so just like that and that gets saved to the const Target ID we then also need to get the start ID start ID and for that we can just use the start position ID so where is it stop position ID so we can just grab that and then also pass it through number just to make sure we're going to be adding numbers together and not numbers and strings great and now I just want to get the piece so const piece so I'm going to get the dragged element so whatever this is so like this Pawn that gets ID so why ID I just mean whatever we called it in this case it would be the string Pawn so dot ID so I'm just going to console log this out we've got the target ID console log start ID so start ID and then console log peace peace so then now we have all that information right so if I go from here to here we know that we started at square with ID 12 and we went for square with id28 and we try to drag the pawn so that's all the information we're gonna need from now on to find out if a move is valid so let's do it so let's start off well I'm going to just use these switch case for this switch and we're going to switch out what happens based on what piece we are dragging so that's what I'm just going to pass through the piece and that's what we're going to switch out so if the case is Pawn as we just saw then it should go here we're gonna have to do a bunch of math for this so this is a lot of codes I try to refactor it but in the end I kind of kept it like this because by refactoring I just made it more messy so I think this is the best approach but if you have a different approach then please do let me know please feel free to take this you know improve on it and just feel free to yeah make it your own so I'm just going to actually Define these start row right because as we know with pawns they can move two spaces but only if they start off in their original place so for that first move so the starter Row for the pawns is going to be square with ID 8 so that one all the way to square with id15 so let's define that eight nine 10 11 12 13 14 15. there we go so that is the starter row and of course when we change player then this will be let's try this I'm going to show you just drag one oh we can't now because we've put some uh code there but this will flip out right so then we'll start zero one two and this will be the starter row so that will be true for when we are playing with the white pieces okay now if starter row includes start ID then we know that we are in this star arrow right because if we start off if we drag one and it's gone a then we know when the starter rows so that's what I'm checking so if that is true and start ID plus width so Plus 8 multiplied by 2 equals the target ID then we know this is a valid move so let's talk this through okay so there we go I'm actually going to do a lot more of these so let's put this on in you bro so what was our start ID so we know that if star ID is an 8 and that is included in this we know that we are in fact in the starter row and then we're also checking that the start ID plus width multiplied by 2 so 16 equals the target ID so what I mean by this is that oops I'm just gonna do return true as that is what we're gonna wanna return if I drag this piece and what this has Square ID 8 right I am saying that my saw ID is going to be eight and what's my target ID want gonna be well it can be eight plus the width multiplied by 2 because 8 plus 16 will take me here to the square with ID 24 okay so if that is true and that equals a Target ID 24 because I just dragged in there that is a valid move okay so we're literally just using maths to figure out if the target ID is valid for where we want to go great so that is one of them should I talk you through again maybe let's do a simpler one so this time if star ID plus width which we know is 8 because we defined it up here equals Target ID then we also know it's valid right so let's talk it through start ID plus width equals Target ID so say I want to this one so my star ID would be eight I dropped it in here by mistake so Target ID is eight so nothing already happened but if I was to grab this again so it might start ID would be eight and I want to drop in here so if I drop that in there my target ID would be 16 right so I can say that 8 plus the width which is 8 equals 16 and that is a valid move so this should be valid okay this however should not be valid because eight plus width does not equal 17 right so that is not a valid move so again we're just using maths to essentially say what moves are valid thanks to the Target ID and using the width constant so that is another one the next thing I'm going to do is allow for moves allow me to move here and here so let's do that first and then make sure that there is an opponent there to take over because that's the only time that move is valid so this time I'm going to once again get this start ID I'm going to add width to it what I'm gonna minus one and if that equals the target ID then that is a valid move okay so that just means so what is width minus one eight minus one is seven so star D plus seven should equal the target ID which means that if I go here that is a valid move because star ID plus seven does equal sixteen great now let's just make sure there's an opponent there too so to do this I'm going to check that also I'm going to use document query selector and I'm going to look for so let's get our back ticks I'm going to look for the custom attribute of square ID and just make sure that it equals star ID so I'm actually going to have to use to make sure there's a backtick so that you can put code in here and then I'm going to pass through the site ID plus the width minus one okay so I'm literally finding the square that we are planning to go into and then checking if it has a first child okay because if it does and that is true and this is true then it's a valid move so that's what I have just done there let's do the same so I'm just going to copy all of this for width plus one so essentially if we want to go in the Square here which means that we also need to find that square or the board and check if that's square that we want to go into has a fast chart because if it does we know that it's taken by the opponent or essentially anyone in general and then that is a valid move great so that is now it for the pawn moves this is looking good we can't go there because there's no opponent we can go here and we can also go too forward however we can't go through forwards we can go here we can't go there unless there's an opponent there so great so now let's try this out I'm going to go here it's white girl I'm going to go here I'm going to go here it's white goes again and now it's blacks go so I'm going to try to take over that and we did it we took it over because that was now a valid move great let's move on so let's go back here now I'm just going to essentially break out of this just like that and let's write our next case so case and this time let's deal with the Knight so there we have it there is our case for the night if we're going to use the same logic however the night well we're gonna get the star ID and then we're going to essentially how does the knight move so if we are here oops it's common that out for now if we are here what idea is this this is ID six so we're going to have to add one to the width with multiply by 2 to be here and then minus one so let's do it I'm gonna do star ID plus width multiply two minus one so that is a valid move and we're just going to check it equals the target ID so the square we want to drop into so that's a valid move for the Knight some other ones are well of course if we have minus one we also have plus one because we want to be able to be able to drop here right so that is also a valid move what else do we have we have start ID plus with minus 2 and we're going to check if that equals the target ID because this time we're just going one width and then minus two and then let's do it for the opposite side as well so I'm going to get set ID plus width plus two just like that and now let's do some more so this time let's do minus so I'm going to copy these changes between minuses because it could also go minus so if the Knight was here it can go backwards as well so that is valid for the Knight and we're also going to do the same for this so I'm going to grab these again and just change these to be negatives like so so that should be all the moves of the night great and if any of those are true then I want to return just the value true so our function will return the Boolean of true wonderful and now let's break out of this next let's do the bishop so case Bishop just like so yeah and I'm going to do if the bishop well I'm going to say that the bishop can go start ID plus with plus one and make sure that equals the target ID right because we are checking that the bishop can move with plus one so width plus one should be here so that is a valid move for the bishop now let's do it for the next row so we're going to get the start ID we're going to do plus with multiplied by 2 now plus two right because we're checking now if we can go width with two so write that so that's what I have done however when doing this we also need to check that there's no other piece in that path so once again I'm going to use document query selector and I'm going to look for the square ID I'm going to check that it equals and then I'm going to use my dollar sign and curly braces to just pass through the previous step that we were in so we're essentially checking if we're going here that nothing exists here because if something exists here we cannot go there so we're checking that nothing exists here so we put the bang in there and then we just check for the first child right because that's the actual thing that we're checking for so actually this needs to be in back ticks all the way up to here great so there we go and just make sure that is wrapped like so and then get rid of that one cool next one so hopefully you get the just now I'm just going to copy this one and paste it and let's check for width multiply by three plus three and now we're going to check for two of these we're going to check for this one but also and the next one so we're going to do with multiply by 2 plus 2. wonderful so let's do this all the way up to seven so maybe it's easy just to do this so multiplied by four plus four multiply by five plus five multiplied by six plus six multiplied by seven plus seven now let's check for these two squares so I'm going to get all of that paste it but also look for the next one down so I'm going to copy this and paste that some multiply by three plus three okay and again let's just get this whole row in fact we can do it for all of them now I'm just going to paste that in let me format that a little bit better and we're just now going to add the next one here so we're going to check for width multiply by four plus four going to copy this one paste it we'll just replace the next one multiply with five plus five and again here so paste paste five plus five but now also multiplied by six plus six so there we go that should be all of them now I'm just going to make this smaller just to check that we have accounted for all of them four five six great now let's continue because we have a lot more to do so that is one Direction so essentially we've got this one and checked all the way for this let's do the others so now again I'm just going to grab the start ID this time I'm going to do minus width minus one and in fact I'm just going to copy all of these because it's probably easier to do that and just change them also be minuses instead of pluses so copy all of this and now I'm just going to do minus minus minus minus minus minus and the same for here minus minus minus minus minus minus so that means that also in these if I'm just going to do command in fact yeah I'm just going to do it manually because I don't want to make any mistakes this is very fiddly right so make sure that your attention span is on high alert at the moment because one little mistake will ruin all of this and same for here so minus minus minus minus minus minus minus minus minus minus just a few more now minus minus we're nearly done just bear with me of course the code will be available if you are part of the code within your community so please check that out again minus minus minus minus minus minus and a few more minus minus minus minus and last one minus minus and the next one let's do it so once again I'm just going to copy all of this for the next one because now we're going to want to go backwards as well so once again let's copy of this and let's do every direction that we can move so this time I'm going to do minus plus so the second ones are pluses now plus which means it here also they are Plus Plus [Music] Plus Plus and then here's a plus Plus plus and then pluses on the fours pluses on the fives and then just one on the six and last one so again I'm just going to paste and this time pluses are first and then minus I'm just going to change these to be pluses and then the minus so there we go and this should account for all the moves for the bishop so there we go that's the first one then we have here we need to check Plus Plus plus plus [Music] and then here Plus us Plus Plus and there we go so this is now looking good let's move on let's just get rid of this final operator that wonderful so if any of those are true and there's a lot return true and then let's break out of this break okay now we're gonna do The Rook so case of the string of Rook and this is very similar to the bishop so if start ID plus width so we're literally going one down in the chessboard equals Target ID it's a valid move right because we are checking that we can go from here to here that would be a valid move however if we go from here to here and there's something here then we can't go there so we need to check for that as well so very similar to what we just did start ID this time plus with multiply by 2 equals Target I do but also let's check so ah let's check that nothing exists in between so document query selector but I'm just going to literally maybe copy that so we don't make any mistakes but this time we are checking for start ID plus width only start ID s width and let's do the rest so once again maybe I'll zoom out gonna copy this apologies if this is really small and then let's do add this one but check that it's start ID plus width multiplied by two this time so change that to a three and in fact maybe let's just copy these and just decide how many we want to do you want to do four five six and seven and then let's copy the rest of these so I'm just going to foreign copy all of this paste that in and let's account for the next one so I'm going to copy that paste it in and just make sure that's width multiplied by three copy it paste it add another one but making sure to pass you width multiplied by four copy all of this one and then just make a space there and make sure to add another one checking for if width multiplied by five and last one so copy all of that paste it and add one to check for start ID plus width multiplied by six great so that is one done let's move on to the other because we're going to have to check for multiple directions right so I'm just gonna do the same as above so do two lines comment that out and paste it and this time we're just going to change everything on this one to be minuses so minus minus minus minus minus minus minus P are the same minus minus minus minus minus minus and then we have minus minus minus minus minus again minus minus minus minus minus minus minus minus minus and then minus okay let's paste again because now we're going to do just going to the left and right so this time we don't need the width we're just going to do start ID plus one start ID plus two start ID plus three plus four star D plus five so I have D plus six and plus seven which means that we again just check for start ID plus one plus one plus one one here let's just make it plus two plus two plus two I'm just going really slow with this just so it's really obvious what I'm doing for those following along I'm doing it very manually I'm not using any like commands or shortcuts plus three plus three plus three plus four plus four plus four plus five plus five and then plus six and one last one this time I'm just going to change this all to be negative this time so I'm going to copy all of this just like so paste it and let's just change it to negative so negative negative negative negative negative negative negative minus one minus one minus one minus one minus one minus one minus two minus two I know this is really boring but you know it's necessary if you want a working game of chess and of course you can use the commands if you want again I'm just doing this so slow so that anyone following along can see exactly what I'm typing because I think sometimes when you use like commands um it's not so obvious on a tutorial so there we go we have just just done all of them this should now work so if any of those are true now we want to return true okay and make sure that's in the curly braces great okay and now let's break out of this and we're going to write the queen so case for the queen this is going to be easy okay because all I'm going to do is say if and the queen can move like the rook and the bishop I can't add case Queen here and Case green there because that'll be double and it won't work it will just pick up the first one which means I'm just going to have to make its own case so I'm going to copy all of the Bishops moves and make them valid for the queen and then add an operator because I'm also going to add all the rocks move so let's grab all the Rooks moves right so I'm just grabbing all the Rooks moves this time all of these copying them and adding them to the Queen's moves and there we go so those are all the Queen's moves it is a lot so if any of those are true return true okay and break out of this one last one we have the king so let's do it I'm gonna do case King if and the king is easy right because he can just move a start ID plus one and we check that's the target ID so in fact this is kind of good thanks tab nine I'm just going to hit enter on that and then start ID minus one but then he can also go plus with he can also go minus width so you can essentially go all the way around right and then we have start ID plus width minus one let's do plus width plus one and then we have minus width minus one and minus width okay and then this we return as sure cool so now we've accounted for all the moves this should work they must always equal the target ID right because that's where we are heading that's what we are checking against so just add in that equals Target ID there just like I am doing now making sure that it looks good so once again here as well and it means we're going to have to do this on the Queens ones as we copy pasted from there so again if you want to refactor this please be my guest I've chosen this approach but of course you don't have to you can choose whatever approach you wish and you can take this code and you can improve on it and you can let me know if you've managed a neater way of doing this but for me this was the neatest way and I played around with this loads but you know I'm obviously always open to other people's Solutions on how to create this game and hopefully this will give you a good starting point if you do wish to you know expand on it yourself so here we go so everything's not equaling a Target ID wonderful now that we've done that let's actually write what happens when we check for a win so let's do it I'm just going to do it at the bottom so let's do it here function check for when and great now to check for the wins we're actually going to collect all the kings I think that's the easiest way to do it so I'm going to look in my documents and I'm going to use Query selector all and I'm going to find everything with the ID of King so this should be two for this to work as I'm going to use sum the method of sum I need to put this in an array so I'm going to create an array from this okay so that's all I have done I've just collected all the kings so I'll console log this out just so you can see now what I'm going to do is say that if so what I'm going to do is get the Kings and if any of them so I'm going to use sum so if any of the two kings have so King a first child that has a class list that contains white actually that does not contain white well then we know that the black player wins right so I'm just going to do info display inner HTML because what I'm saying is if at this point there is we had two kings a black king and a white king and then suddenly there's no white king there was a black player wins right so that's all that is saying right we're just finding looking for the Kings and if there's no white Kingdom the black player obviously wins I've explained that twice okay black player wins uh and then all I'm also going to do is get all the squares of console squares and I'm going to use document query selector all so I'm going to grab everything with a class of square and why am I doing this is because I want to remove the event listeners to make them draggable so that we can't drag anything anymore so squares for each and for each Square I'm just going to get the square and I am going to check that the first child exists and if it does I'm going to do set attribute draggable and override it to be false great so that's all I've done and now let's just copy this and do the same for if the there is no black king because if there's no black king well then the white player wins and we display that and where do we want to call this function I think we should call it right before we change the player so right here and also right here and that's it we finish the game so let's give it a whirl so I'm just going to move these out let's go ahead and get the queen in action and let's kill that king so I'm just going to move that there blacks go whites go I'm just going to move that here I'm gonna get that and then let's get the king uh it's White's go sorry get the king black player wins great because we've gotten rid of the other king and that's it so please hope you have fun with this play around with it please let me know if there's any bugs I'm pretty sure there isn't but I can never be too sure and yeah just please take the game make your own silent up and I just hope you have fun thanks so much for watching

Channel: Code with Ania Kubów

Views: 133,677

Keywords:

Id: Qv0fvm5B0EM

Length: 88min 6sec (5286 seconds)

Published: Thu May 18 2023