Candy Crush in React

hey friends on the internet looking to learn how to master react by building a fun project in this case it's going to be a classic mobile app game called candy crush for those of you who have never heard of candy crush before the game is simple you have a grid of candies and your job is to match the candies in rows and columns of a certain number to gain points in this game of candy crush we will have six colors of candy red blue green orange and purple and yellow and we will aim to match either rows or columns of three or four of course once you master doing this there is nothing stopping you from adding more candy colors and matching longer rows or columns with different results if you wish we will also learn how to make sure that we can only move our candies left right up or down by one and make sure that the place we are moving the candy to will create a row or a column otherwise we can't move it now before we get going i just want to stress that if you're finding this difficult at any point i do have a tutorial on how to build this in javascript as well so if you want to start with that and move on to this after that is totally up to you the only prerequisites i ask of you before starting this video is have a basic understanding of html css javascript and react before starting but if you are feeling adventurous then please go ahead and try anyway as there really is no better way to learn than to push yourself in these kinds of exercises okay so a lot to learn including how to drag and drop elements in react i'm excited let's get to it okay so let's get to it first things first i'm just going to start off a new project in webstorm i am using webstorm as my id of choice however you don't have to you can use whatever code editor or ide you wish with the websome however i can spin up react apps pretty fast just by using the platform so i'm just going to go ahead and do that the project that i want to call this is going to be candy crush react and i'm saving in my webstorm projects directory now as you can see here because i have chosen react as my boilerplate you will see the create react app command showing up here the create react app is a great way for us to essentially spin up an environment fast it essentially comes pre-configured and has all the dependencies you need in order to start building a new single page react application in react when starting out using react i would actually strongly suggest building the project from scratch as you will then learn about babel and webpack but i'm going to assume everyone here already has that knowledge and knows the fundamentals of react and simply wants to practice what they know by building a game of candy crush so now that we know what create react app is time to get using it now as i said i can simply select it here from a drop down after selecting react in the menu right here on the left however if you are not using webstorm please use the following command in your terminal just like so so i'm just going to go into webstorm projects use the command and then just use whatever you want to call your directory that you're gonna store the project files in so for example you can do candy crush react and that's essentially doing the same thing okay i'm not gonna do that i'm gonna use this now if you are doing it using your terminal please make sure to have node version 14 and above installed and npm version 5.6 and above installed onto your machine so let's go ahead and create our project and there we go so as you will see my create react app is doing its thing and it's creating all the files necessary for my react project if i go ahead and just show you in here you will already see a package.json file the public directory as source directory the node modules the git ignore file the readme and a unlock file showing up as our project is installing and there we go all the files have now been installed okay so if i go ahead and run this so once again if you look in the package json you will see the start command if i run npm run start so again if you're not using webstorm please go ahead and run that in the terminal npm run start so i can do that here i'm just going to open up my terminal and do npm run start making sure that i am in the directory candy crush react or if you are using webstorm then please just go ahead and click here nvm run start and now that's going to spin up this app in the browser and there we go so that is our create react app project it's the template if you have a look in the source directory and on app.js you will see the code for the spinner that we just saw okay so here it is there's app logo and if we have a look again so if i just go ahead and save some text let's go ahead and just put ania you will see that changing in the browser too but at the moment i don't want this i want to start from scratch so what i'm going to do is just return an empty div for now so let's just make a div like so and i'm just going to get rid of the semicolons because i don't like using semicolons we are no longer using the logo so i'm just going to delete that i'm also going to delete this app css file because i'm not going to use it i'm just going to have one single css file in here which is going to be the index css file so let's go ahead and delete this one right here i'm going to delete it as we are no longer using it i am also going to delete the logo as we are also no longer using it so delete i am not going to be writing tests i'm just going to delete this test file as well and if we look in the index.js file i don't want to report web vital so i'm going to get rid of that and get rid of the import we want to keep the app imported we want to keep the index css file and we want to keep these two as well okay so now that we're not using web report vitals and we're not going to be doing tests i'm once again just going to delete these files right here so there we go i'm also going to delete the yarn lock as i'm not using yarn i'm using npm for this project and great let's go ahead and save that and if we look in our browser now you will see the app is still running however it's just a blank page you will see no errors in the console wonderful so there we are here's our blank slate now let's get to creating our game so i'm just going to minimize this for now and make this a little bit bigger so we can see okay so we are importing the app into our index.js file which is feeding it into our html so let's go have a look at the app so this is essentially where most of my game logic will happen so i'm just going to move this down and perhaps make it a little bit bigger so everyone can see and make this a little bit smaller the first thing that i'm going to do is decide how big i want my board now i want to make my board 8x8 so i'm going to use a const of width to do this and just assign the value 8 to the const width so we can reuse it in our code the other thing that we know is that we're going to have candy colors i'm going to spend it like that the american way and i'm going to make an array of all the candy colors so i know that we're going to have a blue candy also a green candy orange purple a red candy and a yellow candy so there we go those are my candy colors that is my width these are the two constants that we need for now okay so now it's time to start creating our board and i'm going to create our board using an array so the first thing i need to do is figure out how many squares make up my board because the width is going to be 8 and the height also is going to be 8 that's 64 squares that i need to make up my board and to make up those squares i'm going to use colors so i need 64 random colors in an array okay so let's go ahead and create that array first i am creating an array of 64 items and each of those items is going to be one of these colors so let's go ahead and do that with a function before we start i'm actually going to be using functional expressions for this so i'm going to write const app like so so that is a functional expression it's exactly the same as the function that we had written there before but it's just my preference so that is what i'm going to be using and let's go ahead and write our first function so const create board just like so once again to reiterate if this is the first time you're seeing this this is the same as me writing create board like so so function expression and this is a function so i'm just going to delete that and let's carry on so to create my array of 64 items or to be precise 64 randomly selected colors i'm going to create a for loop so i'm going to use for let i equals zero thanks top nine as long as i is smaller than well 64 because that's how many items are in my array or i could use width multiply by width because as we know width is 8 and 8 multiplies by 8 is 64. and i'm going to increment i by 1. okay great so each time i am incrementing well i am going to get a random color first so let's go ahead and do that let's call this const rand um color like so and my random color well i'm going to go into this candy colors array so let's grab that and i am going to essentially pass through a random number okay so i'm going to pass through either a zero one a two a three a four or a five to get back one of these and i could do so by essentially well i'm going to get the candy colors length and if i actually use math random on this so there we go math random and i'm just going to wrap this up in month floor just to make sure that the numbers are full numbers so integers okay so that'll round it down so if it's 5.5 it will round it down to 5 because of course there is not a 5.5 index number in here okay so hopefully that makes sense essentially this is just spitting out a random number from zero to five and we are putting it into the candy cars array with this syntax so if it makes it easier for you to read i can also go const random number from zero to five and take all of this out okay so that's how we get the random number and pass it through into here okay so it's up to you i'm going to keep it the way i did it here okay so to get a random color i'm essentially just passing through a number from zero to five into the candy colors array and that will return either blue green orange purple red and yellow so hopefully that makes sense that is how we get our random color and what i'm gonna do is that each time we get a random color well i'm actually going to create an array so let's call this random color arrangement and this is going to be an empty array okay for now and you put it above the loop because each time we loop we're going to get the random color arrangement and we're going to use the javascript method of push to push the random color inside the random color arrangement okay so hopefully that makes sense however let's see what happens so all right arrangement arrangement just making sure that's spelled correctly okay random color arrangement so now if i call this function actually let's console.log we can console outside of the loop what's going to happen so if i console log the random color arrangement here okay because if i consoled it here it would literally print out each time i'm going to do it here and if i now call create board so this is how we call the function and just open up in here you will see an array of randomly arranged colors okay and 64 of them so if i refresh this it will be different each time wonderful so hopefully that makes sense let's carry on so i don't need to console this anymore what i do need to do however is save this to state so i'm going to use the use state hook to do this so all i'm going to do is go like this hopefully you know the uh syntax of use state so here is my array and i'm going to say the color current color arrangement is going to be here and i'm going to use set current color arrangement to set this value okay a new state to start off is going to be an empty array and i'm going to also have to import it so let's go ahead and do that up here so i'm just going to use import use state from react because that is a dependency that has been installed for us as you will see here so we don't need to install it so i'm importing use state from react and now i'm going to use set current color arrangement and instead of console logging out outside of the loop i'm going to set the current color arrangement after this loop has stopped running so i'm going to get the random color arrangement array so once again after the loop has stopped running this should be full of 64 items and i'm going to set our current color arrangement using set current color arrangement okay so now if i console log this and look in the browser oh there we go that is going to keep repeating but there we go you can see 64 items are showing up okay so once again i am using set current color arrangement to set this value right here and if we start off use state will be an empty array and we are using set color current arrangement to change that by passing through the value here to make this value the same so hopefully that makes sense if you haven't used used states before please do watch a more in-depth tutorial on it so let's carry on what we need to next do is stop this from essentially re-rendering because this will happen so what i'm going to do is put this in a use effect so all i'm going to do is call this so i'm going to get the use effect right here just like so i'm going to whack the create board function in it and i only want this to run once i'm going to put an empty array here without any dependencies so we also need to import use effect if your code editor hasn't done that for you and now if we refresh this you will see the function only gets called once so once again if you don't know much about use effect please go ahead and pause here however in a nutshell use effect essentially lets you perform side effects in function components so we are in the function component i'm performing a side effect inside of it okay in this particular example what i am doing is using use effects to tell react that our component needs to do something after the render so it's rendered and after it's rendered i want to essentially call the function okay and we are only calling it once as i said if we had dependencies in here so if we had dependencies in here like so so for example if i had a variable in here so for example going to make up a variable because we don't really have one we can use at the moment so any time that uh the variable width changed then this would re-render okay so that's what we can do here so for example if width was to be changing during the project then this will get called each time but as i said i only want this to be called once so i'm going to leave an empty array okay great so now that we have done that let's carry on so we have created a random array the next thing i want to do is use this random array to create a board for us visually so what i'm going to do for this is i am going to go down here and in the return well let's start creating some visual components so let's go ahead and just name this app like so and save and i'm just going to get up my css file for the moment i'm just going to put it right next to us here just get rid of that and what i'm going to do is get rid of all this styling here and let's style up the div that has the class name of app so what i'm going to do in here is just simply display flex and give the whole app a padding of 30 pixels just to space it out and the next thing in here is well i'm going to create another div and i'm going to give this div the class name of okay and once again let's grab the class of game what i'm going to do is decide this is my game board and i'm going to say that the game board's width is going to be 560 pixels and the height is also going to be 560 pixels okay and what i'm going to do is use display flex and flex wrap wrap i've chosen the width 560 pixels as i know that this number is nicely divisible by eight which is our width and the same for the height so for example if i then want to say that any image so here's an image but any image that is in the div with the class of game so that is how we do that any image that will be in the div with the class of game or any element for that matter with a class of game i want to make sure that its width is an eighth of 560 so that is 70 pixels and also has a height of 70 pixels like so so there we go so now if we start mapping to create divs so what i'm going to do is get the current color arrangement just make this a little bit smaller and use the javascript method of map to map out each candy color that exists in this array so we can call this whatever we wish i've chosen to call it candy color for readability i'm also going to get it index and then i'm going to create an image for every single item in the current color arrangement array so just like so here is my image i'm going to open it up and then i am going to give this a key of whatever the index is but i'm also going to give it a background color making sure not to miss that right here okay so now webstorm is actually giving me some prompts let me know this is a number this is not code this is a prompt from web store and i'm just going to do style for now back ground color and then whatever the candy color is okay so i'm just doing this for now essentially we will be replacing this with the image but for now i just want to show you this is working so i'm literally going to be changing the background color of the image element okay so once again i am getting the current color arrangement array so all 64 items i've called each item candy color and for each item i'm also saying i want the index of it and then i am mapping that onto an image element so for example if this candy color has the string red i am then assigning it to the background color of this image element great and then make sure that it's a closing tag like so we seem to have missed a parenthesis and there we go so now if we look in here we have 64 images each with random colors so if we refresh that that will change and the reason this array is being arranged in this way is because we use display flex on the game itself so if i was to get rid of this so for example let's comment out flex wrap and flex display that will change okay great that is looking good i don't think i'll be needing this css file for now so i'm just going to get rid of this like sir and let's carry on and of course like with any image we need to make this more accessible so what i'm going to do is as an alternative text to the image i'm going to put candy color just like so so that it's more readable okay so to recap we have used a function called create board to essentially create an array of 64 items using this array right here and then we have essentially mapped that over and then we've used the javascript method of map to map the results of the array onto images okay and we have used css styling in order to make it visually appear like a grid on our browser wonderful so that is looking good let's now start to check for columns of four columns of three rows of four and rows of three so i'm going to do this with more functions so right above the create wood function let's write another function this time to check for column of three so there we go here is our function let's carry on so once again i'm going to have to loop in order to do this so i'm going to loop over all of my squares not all 64 of them however so let i equals zero and i this time well let's have a think if we have a it's gonna comment this out for now if we are checking for columns of three well a column of three you'd start with i here and you'd loop down to check the one below and the one below that so we're essentially going to add a width so if we add a number 0 here this would be number 8 here and this would be number 16 here so we're going by indexes and we would do that for this this column this column this column this column all the way this column this column this column this one this one this one to this column right here so we want to stop checking at this square and this square has the index 47 okay so if you don't believe me please have a go at counting going zero one two three four but essentially this has the index 47 so we need to stop looping at this one right here so i'm just going to uncomment this out and say that we're on a loop tool index 47 and increment by one so there we go so we are going to loop over all our squares up to square index 47 and let's now decide how we're going to define our column of 3 so let's call it const column of 3 like so and then we're going to say that we want to start our column from i and as we said we then want to get i plus the width and then i plus width times 2. so once again imagine we are here so square index zero we are looping our first index is zero and then we we are defining the column by indexes so we want to check square with index zero but also square with index seven eight and also square with index 9 10 11 12 13 14 15 16 okay so essentially zero zero plus width is eight and zero plus width times two is 16. so we have defined our column and of course as we loop over one this will be nine and so on and so on and so on okay so hopefully that makes sense if it doesn't please have a go at console logging this out as it loops over to get a better understanding great so we have defined what a column of three is the next thing that we need to do is choose the decided color that we're gonna check so i'm gonna go const decided color like so and well essentially that is going to be i'm going to go into the current color arrangement and just grab the first item okay so once again we are looping and if we are starting out here so zero that we know that the value of this is purple so we are grabbing purple and we are assigning the value of purple to decided color so that is the color that we are going to check in our column of 3. great so if this time we're going to get a column of 3 okay and if every square in our column of three has so we're going to get the column current color arrangement i'm going to pass through that square and if it equals the decided color we know that all three squares in our column of three are a match okay they're a column of three making sure to have enough parenthesis there once again let's talk this through so we've got our column of three we have decided the numbers from our array which make up of a column of three so once again this could be zero eight sixteen and if each of these items if each of the items okay if zero eight and sixteen so we have to call this a square you could call this number if each number and you pass it into the current color arrangement so once again if you pass it into this long array and it's zero which is purple and eight so zero one two three four five six seven eight well that's a green and then 16. well we already know this isn't a match but 9 10 11 12 13 14 15 16 so that's a green so the previous column would not be a match same for this one so square zero is red square number eight is orange and square number 16 is green okay so that's exactly what this line of code is doing here we are checking if each of them is essentially the same as the first square okay so none of them are the same as red so we can carry on but if this was true however well what would i want to do i would essentially want to get the column of three again and for each item or for each square inside that column column of three perhaps we don't want to call it square it's up to you you could say number uh for each square in that column of three well i again will need to pass that through into my current color arrangement i'm going to pass it through the square or essentially the picked color and all i'm going to do is say that i want it blank so blank let's go ahead and say that blank is just emptied like so great so this means that all of these right here if they are a match will just be replaced with an empty string so let's go ahead and try that out again i will need to call this function so let's go ahead and call it however i do want to call it in another use effect so let's go ahead and do that i'm going to do this below this use effect i'm doing it in a separate use effects because i want to trigger this when certain variables change so i'm going to put in some dependencies into it so i'm going to put use effect like so i'm going to whack and check column of 3 and call it in here however i did say that i want this to trigger each time something changes so actually i'm just going to put in the check for column of 3 function as a dependency in here and i actually want this to check for columns of 3 every 100 milliseconds okay because the board will change around a lot and i essentially want to create a timer here that will essentially check my board every 100 milliseconds as long as we have the browser up this will essentially run so let's go ahead and do that i'm going to use the javascript method of set interval and pass through a callback so just like so and then let's save an id for this so my id is going to be called timer so we can clear the id using this we can clear the interval using timer so there is my set interval and i want this to trigger every 100 milliseconds and i'm actually going to check the column for 3 in here so i'm going to check it every 100 milliseconds okay and each time this runs well i'm going to then restart this so i'm going to clear the interval using the timer so hopefully that makes sense there we go so essentially to recap this code schedules a new interval to run every 100 milliseconds inside of the use effect hook okay so this will schedule once the react component mounts for the first time and to properly clear the interval we return clear interval from the use effect hook passing in the essentially the cons timer okay so there we are we're checking for the column of three and if there is three we're going to change the current color arrangement to be a blank but then of course we need to reset this colored color arrangement okay so it sets the state with a new current color arrangement so i'm just going to get this and then pass through so once again i'm getting the array and i'm going to replace the current color arrangement like so so in case you haven't come across the three dots before this is the spread syntax it is a new addition to the set of operators in javascript es6 and essentially it takes an array and expands it into individual elements okay so that is what is happening here i am taking the array i am splitting it out and then putting it back into the array and now i'm also going to add this as a dependency to my use effect right here so there we go wonderful so now great so we if we have a look in here you will see that that is working if i refresh any column of three will now be replaced with an empty string so as you will see here here is an empty string here is an empty string and here is an empty string and that represents the places on our board thanks to this array okay so wonderful and this check will carry on happening every 100 milliseconds thanks to what we have written here in this use effect okay so this is looking good now let's use this to check for columns of four so it's going to be exactly the same so i'm just going to simply paste this check for column of four however i'm going to start this a bunch higher so we're going to start checking for columns of 4 at the number 39 just like so and this time we also need to define our column of 4 and all i'm going to do is use i plus width multiplied by 3 this time but we can keep the decided color as the first square and if column of 4 this time so let's get the column of four and if every square in it is the same as the decided color well then change that item to just an empty string like so wonderful and then once again let's grab this and i'm going to put this in my use effect so please check for that and i'm just going to put it as a dependency here and now i'm just going to move this check for column of four to be above the check for column of three because i want the checks for fours to happen before the columns of three okay because it clears the three that could have potentially been a four so let's go ahead and do that up here as well i'm just going to move that up here and then just for readability i'm going to move that around in the dependencies as well so now if we have a refresh you will see a column of 4 being eliminated ok so this is looking great now let's carry on so we've got our checks for the columns next let's check for some rows so let's start off with three again i'm just gonna copy this i'm gonna put it down here i'm gonna check for row of three this time i'm gonna define our row of three so this should be a bunch easier this is simply going to be i with i plus one and then i plus two so that is now my row of three we are going to check all 64 squares this time however i have done this because let's just comment this out because instead of stopping here and not checking these two well we actually don't want to check any of these either okay so there are a bunch of eyes that we want to miss and essentially it's all of these because we're starting here we're doing a check for row three we're starting here we're doing a check for row of three for yellows we're starting here we're doing a check for the row of three of whatever color that is and so on and so on so let's eliminate these from the check i'm going to show you how to do that so i'm going to just once again uncomment this out check for a row of three loop over or 64. the decided color is the first square that we come across and then we also have not valid so const not valid equals i'm going to open up my array and the not valids are index 6 seven but then also 14 15 22 23 30 31 38 39 46 47 54 55 63 and 64. okay so those are all the not valids and i'm going to use the not valids so if not valid includes i so the index we are looping over well then we just continue okay so if we're looping over and the index happens to be six well that's not valid so we just continue okay so we don't check that square however if it's fine and it's not in the not valid array well then we want to get our row of three and for each square in our row of three and if we put that square so if you put for example zero into the current color arrangement and that comes back with the same color that is the decided color well then we want to get our row of three and once again we just want to make them blank so there we go that's it for the check row of three so i'm going to copy that and once again put it in here i'm going to check the row of three down here and i'm going to put it as a dependency and finally check for row of four so once again i'm gonna put that up here check for row of four define our row of four so all we have to do is just add i plus three like so i will be reformatting this all a bit later so don't worry too much for now the decided color well we've already decided that and then replace these to check for every square in our row of four to check if it's the same as the decided color and however we need to increase our not valid array okay so if we look here not valid would be all of these all of these but now also all of these so let's go ahead and add those numbers two are not valid so i'm just gonna add a five now and then also a 13 and then also a 21 and then also a 29 a 37 a 45 and then 53 and 62. okay so that is now looking a lot better and once again let's just add this down here making sure it's above the checks for three just like so so now if we have a look here we are now clearing everything that is a column of three or a column of four or a row of three or a row of four wonderful so this is looking great let's carry on we have now completed doing checks for all the matches the next thing we're going to do is actually move down our squares into the square below if it is empty okay so this is the next step this is what we're going to tackle now let's do it so for this i'm actually going to write another function so right before the create board but after we do all the checks let's actually get to writing a function to move our squares down so i'm going to call this const move into square below just like so okay and once again let's write a for loop so four let i equals zero and as long as i is smaller than 64 minus the width i think this should be okay because we only want to check all these squares up here and we're going to check if the one below it is free to go in so we want to stop looping around about here and then let's go webstorm again so i'm going to uncover this out and then we want to increment i by one okay so if the current color arrangement and if i so whatever we are looping over plus the width so we're going to look for the square directly below it and if that equals nothing okay so maybe i'm just going to make this more readable if the square below the square we are looping equals nothing well then we want to get the color current arrangement i plus width and actually change it to the color current color arrangement item okay so if the one below the one that we're looping is blank we're essentially going to get the one we are looping and move it down so if it's blank and we are red then it's going to turn into red okay and that means that the one above us now so the one that we are is blank okay so there we go so that should move them all down however so let's have a look at this i'm just going to oops make sure that is not there it needs to look like this there we go once again put it into my use effect i'm just going to put it down here and call it like so and put it on here as a dependency you will see that any blank ones up here so maybe we should slow that down essentially everything that was blank below here is moving to the top okay so the top ones are blank everything is falling so i can sew this down for you to have a look if you wish let's change this to one second so one second there was a blank three space here and it's being replaced it's as if all of the others are falling down into its space let's have a look again one and then you will see slowly and slowly the colors replacing the blank ones and the blank ones moving up wonderful so now we're left with some blank ones up here so essentially what the problem is is that if we are in the first row we don't have anything to move down okay so we need to generate some new candies if the first row is empty so i'm going to show you how to do that now so let's go ahead and move here so let's define our first row again so const first row equals and then i'm going to define it as 0 1 2 3 four five six seven okay so that makes up our first row those are the indexes that make up our first row and then if we if first row includes i so whatever index we are looking over that means we are in the first row so i'm going to say this as const is first row okay and if we are in the first row so if is first row if this is true and the current color arrangement i equals an empty array so if we are in the first row and the number we are looping over is a blank well then we need to generate a random color so once again i'm going to get my candy colors length and i'm going to multiply this by math random and i'm also going to pass this through math floor to make sure that we have a full integer so just like we said before so great and i'm going to say this is let random color and i am just going to grab the color arrangement and whatever index we are in so we're looping over the array and then i'm going to replace whatever values in there at that index with the random color so this is actually a random number we should say so number and then let's get the candy colors and pass through the random number okay so there we go so now if we have a look here one so everything's moving up but new candies are generating so everything should be full when this stops running great wonderful so now let's actually put this back to the speed that it was going at so i'm going to put this to make it look more realistic in terms of candy crush okay so there we go the whole board is essentially replenishing itself great okay so now that we have that it's time to learn how to start dragging and dropping candies so we can move around our board in order to get matches so let's do that next so to do this i'm actually going to go back to my image right here and here i'm actually going to give each of these a data id so it's actually easier for us to work with it i'm actually going to show the data id of the square that we need okay so there we go i'm going to assign the data id as the index i'm also going to make each of the images draggable so just pass through true and on drag over i'm just going to use e e prevent default okay because we're not going to be using drag over but we still need it there so i'm going to copy that because i'm going to be reusing it and then we also have on drag enter and once again i'm just going to do the same and on drag leave okay so once again i'm doing this because we are not going to be doing this i want to prevent its default action and finally we do an on drop so we're going to have a function for this and then we also want on a drag end so on drag and we're also going to have a function for this and we also want on drag start which again will have a function for this so let's go ahead and write these now for this function well i'm going to call this function drag start let's call this drag drop and let's call this drag end okay great and let's start writing these functions above here so i'm going to do this right above where we create the board so const drag start for now i'm just going to write a console log to show you what is happening so this is drag start let's also have drag drop drag drop and drag end making sure it's felt exactly the same as we did it below so drag that so we have these three now this means that because we wrote these properties on the images themselves i can now drag them and if we look at the console log i'm actually going to stop these from printing so let's go ahead and remove the console log that does that there we go so now if we drag this we can see the drag has started and then if we drag drop it let's say on the red one you will see drag drop and drag and initialize the difference between drag drop and drag end is that when we drop it okay so when we literally let go that is drag drop and drag end is what happens after we let that go okay so there is a difference it's very small but it makes a huge difference in what we are about to do so let's get to it so once again let's go back to these and what i'm going to do is use a drag start to pick out the id of the square that we are dragging so i can do so easily i'm going to pass through e for event and if i console log e target so now if i pick one up you will see drag start and you'll also see all the information that comes with the square i am dragging this is because we added that data id so we now know that this has the index 31 we have draggable true and then we have the background color blue so this is essentially everything that we mapped onto here okay so that's essentially it i'm also going to do so for this one right here so e just so we can see everything as we drag and drop and drag so there we go this is looking good this is also a good time to check that we have the right ids for looping over so for example when we did the columns where we wanted to stop for the column of three we want to stop looping at this one which is id 47 but it's actually less than 47 so we can either do equals 37 maybe let's do that column of three so it's smaller than or equal to 47 and the column of four once again let's just check that one so this would be where we stopped looping and this is a 39 so once again let's make this smaller than or equal to 39 and for the rest of these this should be fine because with the checks for rows we are literally checking all of them okay great and then perhaps we also want to just be more precise with this number so move into square below well we would stop at we would have to stop so this is id 55 we'd stop at id 55 so let's go ahead and put in id 55 but it can also be 55 okay great so that is much more precise now once again when we drag a square so on drag start we get the data id we get all of this information i actually want to save this whole element to state okay i want to save all of this so i can do so using your state so let's go ahead and write it up here i'm going to say square being dragged and be very precise and i'm going to call this set square being dragged so we know which square is being dragged at all times i'm going to use state and this is going to be not to start with so now i'm going to use set square being drag to set my square being dragged so once again i'm going to go down here to set square being dragged and pass through the e target so the whole image element with all of its information so great so that is the square being dragged and then well we are dragging a square that is being set to the square being dragged and if i want to drop it here well i actually want to get that information on the green square because that is the square that's being replaced the green square is the one being replaced so i can do so as well so once again i'm actually just going to copy this square being dragged square being replaced replace square b place set swimming in place i'm going to use this to set that so once again down here and this time on drag drop i'm going to set in target okay so that is currently setting the square being dragged and setting the square being replaced on drop and on drag n is where i want all the logic to happen to see if this is a valid move or not so this is going to be a lot of code but just bear with me so i am going to i'm just going to get rid of these for now i'm just going to get rid of that one actually so in drag end well what do i want to happen well i want to get the id of the square being replaced so square being replaced and i want to get the attribute of data id okay and let's save this as const square being replaced by d so now we have the id of this we probably need to put this in past int to make sure this is a number and not a string because this will come back as a string we need to make sure that is a number so that we can save it as a number so we can do additions and math to it so we are saving the id of the square being replaced next i also need to get the id of the square being dragged so i'm just going to copy this maybe let's put it up here square being dragged id square being dragged okay so let's see if this works console log square being dragged id console log square being replaced id so i'm just going to drag this one and drop it there so indeed this is id 47 and that's when i'm dragging and the square being replaced is the one with id 55. if you don't believe me we can expect this 55 this should be 47 and it's 47. so that is working let's carry on so now i want to switch out the colors right so i can do this easily so i can get my current color arrangement and i'm going to pass through a number into it and that number is actually going to be the square being replaced id okay so whatever square is being replaced well i want to get it i want to find it in my current color arrangement and i want to change the color in that array to be the color that i'm dragging and i can do so by getting the square being dragged and not getting its id by this time getting the color so i can do so by getting background color style background color okay so that's how you would do it and i'm going to do the same for the other one so i'm going to get the square being dragged id and change it to the square being replaced so now if i do this the colors switch around okay how cool is that however we can switch them with any color on this board we don't want that we only want to switch it uh if there's a possibility of it being a row or a column match and only if it's moved by one so let's go ahead and do that next the next thing that i'm going to do is just make some valid moves so let's check if the valid move is either one up down left or right so here are my valid moves and i'm going to define my valid moves as the square being dragged id minus 1 square being dragged id minus width so the one above so this is why i wanted this to be a number we would not be able to do this if it was strings square being dragged plus one and square being dragged id plus width so checking the one below so those are my valid moves and let's check if it's a valid move so let's define what a valid move is and a valid move essentially is valid move so the array and if it includes square being replaced id okay so here's my array and this is essentially a bunch of numbers now okay this is a bunch of numbers and if that these numbers include the id of the square being replaced then it is a valid move okay so that's a good way of checking if we can go in this index so say we're yellow here say we're index 38 and this is index 30. so that is a valid move because 38 minus the width which is 8 is 30. so with the id of the square being dragged as 30 then that is included in a valid moves array and it's a valid move great so we've done that however we also need to check if the space we're going to is a row of 3 or as a row of 4 column 3 of column 4. so to do this what i'm actually going to do is go to the checks up here and if it is a column of 3 i'm also going to return the boolean of true so if i call this function all of this will happen but will also return a boolean of true i'm going to do this for all of them so i'm going to do it on this one here so if it's a match i'm going to return true and i'm also going to return true so there we go so now in here i can actually get all my functions so if i get the function check for column of 4 check for column of three check for row of four check for column of three and this if it's true will turn a boolean of true so i can save this as something so whatever the return is i'm going to save as is a row of three so of course if this is true this will be true and then do the same for all the others so const oops this should be column of four is a column of four const is a row of four cons is a column of 3 const is a column should be is a row of 3. check for row of three so that column of four row of four column three row of three okay and we're saving whatever the boolean returns as and now if the square being replaced id exists okay so we've already got the one being replaced so essentially we've moved into drop it and it's a valid move and is either a is a row of three or is a row of four or is a column of four or is a column of three okay so that's a long one right here perhaps let's just move this down so if all that is true well then great everything is fine we can drop it and let's set square being dragged to null so we can start again and set square being replaced to now so we can start again great otherwise so else well we essentially just want to move everything back so i'm going to go back into my color color arrangement and get the square being replaced id and change it back to the square being replaced style background color okay so i'm just changing it back the change happened i'm changing it back perhaps you could do this a different way but this is just the way that i decided to do it and then we also do the same for the other one so i'm just going to copy this square being dragged id square being dragged style color cool and then once that is done we also need to set the current color arrangement and once again just set it to this new current color arrangement great so that was long but that hopefully makes sense to you let's try it out so now let's go ahead and try and move it here i'm going to try to move this one it won't move because that is not a column of 3. it doesn't make a column of 3 or a column of 4. let's try another one if i move this that will make a column of three and wonderful great and it disappears and then the game carries on this is looking really good i'm really pleased with what we have made so far great i'm really happy with this so next thing this is looking good the game logic is working the next thing i'm going to do is show you how to replace this with little images instead of you know squares so let's go ahead and do that now so the first thing i'm going to do is actually import some images in here so i'm going to do this by going in here and on the same level as my app so still in my source directory i'm going to make a new directory and call this images and in here i'm just going to drag some images so i already have some i'm just going to drag them in like so and just add all of them okay so there we go those are my images and i'm going to import them so i can use them in this file so this might take a while i'm going to import blue candy i'm choosing to call it blue candy and i'm going to go into my images directory so i'm going in here and i'm getting the blue candy just like so so i'm importing that from our use i'm also going to do the same for all six of the candies so there we go and i'm also going to actually import a blank one so we don't have a blank one however i will make one now so blank so i'm going to call that file and then let's call this the green candy so this is going to be green this is going to be the orange candy so let's call this orange this is going to be the purple candy so i'm going to change this to purple as that is what it's called here and this is going to be the red candy so let's change this to red i'm going to rename this yellow candy so i'm just going to edit this just so it's in line with everything else and call this yellow candy so we can use this in our file okay so there we go and now i'm just going to replace these here so this one with so instead of having words i'm literally replacing these with the images that we just imported so again this should probably be small doesn't need to be capital much candy purple candy red candy yellow candy and black okay so once again orange candy purple candy red candy yellow candy i feel like we're missing one green candy great so now that we have that i'm just going to get the blank image as well and let's carry on so now i'm actually going to replace all the blank spaces so the empty strings with blank images so there's one there's another there's another there's another it's quite a few in here so i'm just going to make sure i get all of them okay that is looking good and we also need to start replacing this so i'm going to get rid of that and instead i'm going to just have the source of the image as the path to my image here so let's go ahead and put that just as candy color okay and what else do we talk about colors well here so it's going to be the source this time we're going to get rid of that and use get attribute and pass through the source this time so that is how we will get the source we don't have the background color anymore we are using images instead so let's have a look at that and wonderful and just check that everything is working and indeed it is great so this is looking good the next thing i want to do is just add a scoreboard so let's go ahead and do that next so to do this i'm actually going to create a new component so of course please feel free to refactor this i will be refactoring this probably before i put it online for you for now i'm just going to leave it as it is and create a new directory called components and in here i'm actually going to create a component called a score board okay so there we go i'm going to add that and let's define our scoreboard so const score board i'm just creating a component and don't forget if we want to use it in app js we need to export it so export default score board i am essentially really showing you this to show you how to work with components and if you want to refactor because if you want to add more styling which i definitely recommend you do this would be a good approach you could perhaps make the images as a component so the ones we loop over here you can also have the game board as a component it is completely up to you so our scoreboard is going to be super simple like i said this is not about styling i don't want this to be about styling i want it to be about learning react and practicing your javascript and react skills so i'm going to give this a class name of scoreboard that's like so thank you very much for that prompt so here's our scoreboard and in the scoreboard well i'm just going to return the score so of course we're going to have to pass through a score into here so we can i'm just going to destructure something that we put in here for now however we're not importing this so it won't matter and then let's also style it up later for now we do have a scoreboard but first let's go back in here and before using what we have made using the component we need to actually figure out the logic of how we're going to store our scores so of course we get the score when we make a row of three or four or a column or three or four so in here right before we return out of this well we're gonna have to set the score so once again up here i'm going to say const and then i'm going to say score let's call this score display just to be really clear about what this is because it's the final score that we're going to display in the score display i'm going to call this set score display and use state start off at 0. so here right after we get a match i am also going to set the score display but we can't just set another number we need to get whatever the score display is and add a score on top of it so we can do so with a callback function just like so so whatever the score is i'm going to get the score and add 4 to it because we are getting a column of 4. okay so that is good and then for now i'm actually just going to console log out this score so it will be whatever the score display is so console log score display like so i'm just going to get rid of any other console logs in here just so we can really see what is happening we don't need the e in here we don't need these anymore so we're console logging out the score display let's see what is happening now in our console log so okay that is printing out each time and we have just got a match of four so that is looking good if we get a match of three okay so it's adding so that's looking good and we've made two more matches along the way great so now if i want to display that score well i would simply just pass through the score display into our scoreboard so we've exported the scoreboard let's go ahead and import it here so i'm going to import it up here actually import scoreboard from and then we get the path of where we stored it well we stored it in components forward slash score board so that is looking good you can of course call this whatever we want as it is an export default meaning they'll export whatever this is no matter what it's called don't forget to put a dot and i'm going to get my scoreboard i'm going to put it down here outside of the game and then pass through the score as the score display so passing through score display as the score just like so and let's have a look here and great so now let's make another row of four or try to make another row of four remove that it should be row four you will see that our score does increase so we are adding the score here we are getting the score of four and then also we need to add four here we need to add three here and add another three here as well the other thing we need to do because this score is very high it seems we are counting that if there is a row of three blank that that is also adding to the score we don't want this a blank does not count so let's go back in here and let's define what a blank is each time we check for matches so once again up here in the check for column of four let's define is blank and is blank essentially means that the current color arrangement array and i so whatever item in the current color arrangement we are looking through if that equals blank well then we know that it's blank and we don't want this to be a match so if whatever square we have equals the decided color and is not so bang is not blank then we can add the score okay so just make sure to add this otherwise every time there's three blanks or four blanks it would be added to this score and we don't want that so there we go and it's not blank and it's not blank and also let's define what blank is in each one of these so that should be better making sure this is and and it's not blank and it's not blank great so this should be more realistic in terms of score and wonderful okay so this should just add three great and this should just add another three now some more matches happened let's try another one this should hopefully just add three great okay so that is it i mean please feel free to take this game like i said this definitely could do with some refactoring i'm just going to clean it up for you a bit while i'm here just going to use webstorm to format this for me so there we go that is much neater look at that and of course if you want to start adding more components at the moment we just have one scoreboard right here that is very simple it's a scoreboard component that will show our score please feel free so some suggestions please feel free to make an image component a game component and move some of these into the utils file if you wish but for now this is done i hope you've enjoyed it i hope you've learned a lot and if there's anything that you think i could improve on or if there's anything that you think you can add please do comment in the description below and as always please take this project please make your own style it up at the moment the signings is extremely basic we also don't have any win logic perhaps you want to have a high score that you want to reach perhaps you want to have different levels perhaps you want to have different shapes it is totally up to you that's half the fun okay so once again thank you so much for coding along with me and i'll see you in the next video

Channel: Code with Ania Kubów

Views: 152,763

Keywords: candy crush, react tutorial, react game, gamedev, software engineering, software development, learn to code, coding bootamp, 100daysOfcode, javascript tutorial for beginners, javascript tutorial, react for beginners, candy crush development

Id: PBrEq9Wd6_U

Length: 81min 1sec (4861 seconds)

Published: Wed Oct 20 2021