How To Build A Simple Card Game With JavaScript

this project is perfect for challenging your planning and problem solving skills and best of all it can be expanded to any card game you can think of let's get started now [Music] if you're watching my channel then odds are you love learning which is perfect because today's video sponsor skillshare has one of the largest learning communities with thousands of online classes which are crafted with the single goal of helping you become the best version of yourself you can do this through a wide range of topics everything from web development to graphic design ui ux design and even things such as music and productivity i recently started taking the productivity master class by thomas frank and it is incredible the way he's able to sum up all of his points in such a short and concise manner means that i can immediately start taking away the points from his videos and making myself more productive the day that i watch the video instead of having to go through 10-20 hours of content best of all skillshare is completely free and coming out with classes all the time which means that you can stay focused on learning without being distracted by anything else and you can get it for less than ten dollars per month if you're on the annual plan if you're one of the first 1000 people to use my link in the description below you can get a free trial of skillshare premium which is the perfect way to start learning your next skill so i highly recommend you check out skillshare welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now on the right hand side of our screen we have the finished version of our product it's pretty rough looking but the purpose is to take a look at the javascript and not necessarily the css as you can see we have two decks of cards and i simulated the game war and in this game both players flip over a card whoever has the highest card in our case the computer does they're going to win and put all the cards into their pile then you flip over again again whoever has the highest card wins and takes all the cards and if you have a draw at some point where you have the same number then you just both keep your card and put it back on the bottom of your own deck and this goes around all the way until finally someone runs out of cards and they are the loser and the person with all the cards is the winner it's a very straightforward game but it brings about a lot of problem solving and planning skills around how you build out your deck and card classes and objects inside of javascript so to get started with this just like with pretty much any web development project we need an html page we're just going to create one called index.html an exclamation point and tab and that's going to bring all this boilerplate html for us if you're interested in learning how this works check out my full video on emmett i'll link in the cards and description that shows you exactly how to do that exclamation point trick as well as a bunch of other tricks we're going to call this card game here and then i also want to create another file called deck.js and this is where all of the code for our deck and cards is going to go but i want to have a different file which encapsulates the code for the actual script which runs the game war because we could build out this nice debt class and make it specific to the game war or we could build out a more general debt class that allows us to expand this to any card game we can think of by creating a specific deck.js file which contains all of our deck functionality we can make sure that we expand this to any game we want and not just this particular game so that means i want to create a separate scripted.js file which is what i'm going to import into my file here so script dot js make sure to defer that after my html loads and then this is going to contain the logic for war and then here we're just going to do an import statement that imports the code from this deck here so i want to make sure that i actually specify this for the type of module and the reason i can delete the defer keyword is because modules automatically defer on their own we just save this save this and inside a deck we want to create our deck class we'll just create a class called the deck and inside of here we'll have our constructor and of course our deck is going to contain some different variables really the only thing we care about is cards we'll say this.cards for now we'll set it to an empty array so this is what our cards are going to be and i actually want to pass these cards into the constructor because the cards could be anything it could be a full deck of 52 cards or in our case we have two different decks of 26 cards essentially one full deck split in half so this deck class i want to be flexible enough to both encapsulate a full deck of cards as well as for example someone's hand of cards or maybe a pile of cards a discard pile anything that deals with a pile of cards we encapsulate inside of this deck class then let's create a class for each one of our cards this is going to be fairly straightforward a card has a suit for example spade diamond heart and then it has a value for example 10 or 8. so this is going to have a constructor which takes in our suit and our value and it just sets suit equal to the suit and value is equal to the value so card very straightforward but deck is going to be a little bit more confusing so the very first thing that i want to do is just create a full deck of 52 cards so to do that we need to get all the different suits as well as all the different values for each one of our cards so we can create some variables we'll just create a constant variable we're going to call this suits and i'm putting it in all caps to represent this as a global constant variable it's essentially a static variable this is going to be an array we want to put all of our different suits inside of here so we can actually just copy the suit itself as a character that we can paste into our editor i'm just going to copy all of the suits over you can get these by just googling suits you know html or suits font or you could get them from the github linked in the description down below either way it doesn't matter but we just copy these in here like this then we're going to get our values which are going to again set to an array and in here we're going to have for example ace 2 3 4 5 six seven eight this is really fun to watch i'm sure and jack queen and king now we have all the different values we have all of our different suits and we can combine these together to create 52 unique cards let's just collapse this so it's not so big and all the way at the bottom here i'm just going to create a function called fresh deck and this is going to create us a brand new deck of cards with all 52 cards one for each suit and value combination so inside of this function what i want to do is i want to loop through all the suits loop through all the values and then combine them all together inside of one array and a really easy way to do that is by using the map function as well as the flat map function let me show you we're going to return suits dot flat map we're going to loop through each one of our suits and what flat map does is it works exactly the same as the map function inside of javascript but it takes all of your arrays so if we had for example values like this it has an array inside of arrays it just condenses all those arrays into one array so we'd be left with this instead so instead of having an array of arrays we just get one array with all the values flattened inside of it so then what we can do in here is loop through all of our values we can map them into an array so this is going to return an array of arrays this flat map but then it's going to condense it into one single array and this is going to be for each one of our values and all we do is create a new card with the suit and the value and to show you how this works i'm just going to set our cards by default equal to a fresh deck because if we don't pass in a set limit of cards for example 26 cards or whatever it'll create us a brand new deck of every single card now i want to export the deck class let's just make this the default export now what i can do inside of this script i can import deck from dot slash deck dot js let's just create a brand new deck we'll call it deck equals new deck we're not going to pass in any cards at all now what i can do is just open this up with live server and open up on the right-hand side of my screen and if i just inspect this and pull over here go to the console and we just type in for example console.log deck dot cards now you can see we have an array with 52 cards and each one has a suit and a value and it does all the suits and all the values as you can see we have one of each card if for example i didn't use this flat map here and instead i just used normal map you're going to see i now have four separate arrays of 13 each technically this is still 52 cards but they're not really formatted in a way we want that flat map takes this array these four different rays of 13 and turns them into one array of 52 so that is why we're using flat map here instead of a normal map and now we have that array of 52 individual cards but if you're playing a game you kind of want to make it so your cards are a little bit more random than you know having all of the values in order this is not a very fun game if you know exactly the order of every single card so we need to create a simple function that's going to allow us to shuffle our deck i actually just want to put this on our deck class we can just create a function called shuffle and inside of here all we want to do is take our cards and set it to a shuffled version of our cards so we just want to loop around and move all of our cards around and you may originally think that a good way to do this is using the sort function we could say for example this dot cards and what we want to do is sort them so we could say dot sort and we have here a and b and then we would just return math.random this is essentially going to sort our cards if we just subtract this by 0.5 because half the time this is going to give us a number less than zero half the time is going to give us a number greater than zero which means it'll randomly sort our cards for us the problem with this though is that the sort function is really meant to sort things in an actual order and not a random order so this is actually going to not give us a perfectly randomized order for our use case this is probably fine but in general this is going to mean that some cards in our deck would more frequently appear in the same slot so let's just imagine if we had a deck of four different cards and we have the ace of spades ace of hearts asap clubs and ace of diamonds well the ace of spades maybe has a 30 chance of appearing in the first slot instead of the 25 chance that it would if it's random that is the problem with this technique for sorting you just really can't use random inside of the sort function so instead we need to write our own sorting function to make this 100 accurate so in order to do that we just need to create a simple loop loop through our cards and then flip them with other cards inside of our array so we can do a for loop we start i equal to how many cards that we have and instead of doing something like this dot cards.length oops length minus one which would give us the final index of our card i want to instead encapsulate this.cars.length into its own getter because this is something we need to commonly access and having to write out this.cards.length every time is a little bit cumbersome so i want to create a getter for the number of cards and this is just going to return this dot cards dot length now what i can do here is just say this dot number of cards and this is going to give us the exact same value so now we're starting out at the last index so we're starting with our last card what i want to do is i want to check while i is greater than zero because we don't actually need to flip the final card if we flip all of the cards in the deck except for the last one eventually that one's going to get flipped around as well so we don't have to worry about flipping that and then we're going to do i minus minus essentially all we're doing is going from the back of our list of cards all the way to the front and we're just constantly taking whatever card we're currently on and flipping it with another card that comes earlier in the deck that we haven't gotten to yet so i can just say const new index equals and what i want to do is get the new index for where i'm going to put this card so i want to get a random index that is earlier in the deck of cards than where we currently are so what i can do is take a random number oops random what i want to do is multiply this by the i here which is our current index plus 1. so essentially this is going to give us a placement inside of our deck that is somewhere else so this math.random is between 0 and 1. so this is going to give us any number that is essentially an index that we haven't accessed yet inside this loop then to make sure this is an integer i'm just going to use math.4 here and now this new index is some index let's say i right now is 30 this is going to be between 0 and 30. essentially one of the cards we haven't accessed yet then what i want to do is i want to flip the values at the new index with the current index so to do that we need to get the old value essentially the value that is at our new index currently so we can just say that is equal to this dot cards of new index this is going to be the card that is at this new index and we want to now take the card that is at our i index and put it where our new index is so we can say this dot cards of new index is equal to this dot cards of i and then we can say this dot cards of i is equal to our old value all we've done here with this set of code is we got a random index that is before the current card we're on and then all we did is swap the card that we're currently on with this new card that we just got this old value is just an intermediary value because we overwrite new index here so we need to have access to it before we overwrite it all we're doing is looping through all of our cards and swapping them with another card and this right here is going to give us a perfectly random shuffle every single time so now what i can do is here i can just say deck.shuffle and now if i look at our console we should see that we still have an array of 52 different cards but they're completely shuffled as you can see the order of these is completely random and if we were just refresh our page you can see we get now a brand new ordering that's completely random again as you can see there's absolutely no patterns or any distinguishing features this is completely random which is exactly what we want from a shuffle function now there's a bunch of additional functionality we can add to our deck but before we start adding functionality that we maybe don't necessarily need i want to move on to adding in some of the html that we have over here so we can really start rendering out our different cards and our different decks we can start to see what functionality we need to add to our deck because there's no point in making this massive debt class that has all the functionality in the world if we're never going to use any of it so inside of this index.html i want to start creating the html for our different game and luckily this html is really straightforward we have a pile of cards here and down here we have the flipped card up here in the top right and in the bottom right then we have some text in the middle telling us whether or not we lost or won the flip of the card we really have five different elements i'm just going to put them directly inside of the body and we're going to use css grid to lay these different elements out so we can just put them all inside of here on the same level of nesting what i want to do is i want to do the computer deck which is going to be our very first thing so we're going to give it a class of computer deck and we're going to give it a class of deck just like this and by default since we're doing half a deck this is going to say 26 in it that's half of 52. i want to copy this for the player deck and then in between these we need to have our flipped up card for our computer we're going to have our computer card slot we're going to give that a class of card slot as well so we can share this class between our computer and player card and if we copy this down here we now have our player card slot that takes care of this top left and top right and bottom left and bottom right the only thing we have left is this middle section which is just our text we'll just give it the class of text for now so now if we save this open this up with live server you're going to see we just have 26 and 26 pretty straightforward and actually we didn't even need to open it it's already open right here so now what i want to do is actually start styling out our different cards in the deck and all of that different stuff so let's just look over here what our styles are going to look like and create a simple styles.css which we're going to link right here so we're going to like a style sheet called styles.css now inside of our styles.css one of the very first things i like to do whenever i'm styling with css is just take my box sizing right here box sizing and set it to border box and i like to do this for all the elements as well as all the suitor elements so for example after and before just like this this just makes it so much easier to work with styling different elements once we have that done the next thing i generally like to do is style our body and i like to just get rid of those pesky margins on all the sides so we can get rid of our margin here so then what i want to use is grid in order to get our five section layout here we have this three row layout and two column layout so we're going to essentially say our display is grid we're going to have grid template columns and these columns are essentially just going to be a repeat two times of four rem so now if we save this and come over here you can see that we have that two column layout already showing up which is great next thing i want to do is set up our rows so we're going to say grid template rows and here we have three different rows we have the card row the text row and the card row what i want to do is have 7 rem b for our card 2 rem b for our text and then 7 rem for our card again now if we save that go over here we now have those rows being shown as well it's a little hard to tell because there's no styles being applied to these different sections but you can see things are starting to get spaced out which means these different columns and rows are showing up next i want to add a little bit of a gap we'll say 0.5 rem that just spaces out all of our different elements between each other and finally this is going to be a little bit weird but i'm going to make a cursor pointer which means we have this pointer cursor anywhere on our screen and that's because no matter where i click on this screen it's going to advance the game forward so every time i click on the screen it flips a card or puts the cards at the bottom of the deck that's just the way i designed this game you can do whatever you want for your game so maybe you don't need this but for this game it works out perfectly now in order to center this on our screen i just want to justify our content in the center i'm just going to put a little bit of a padding on the top we're going to use one rem now if i save that you can see it centered on our screen and moved it down a little bit from the top of the screen just so it's easier to work with now the next thing i want to style is the individual decks themselves so we can just come down here and say deck and our decks i want to just set the height to be 100 percent and the width to be 100 just so they fill the entirety of these columns and rows that they're inside of and then in order to actually see what these decks look like let's just give them a border one pixel solid black now we can see we have that black border showing up and you may be wondering why this 26 looks so weird and that's because if we come over here to our index.html this is in column one row one column two row one and we have row two column one and then row two column two we want this text though to span the entirety of both column one and column two if i put some text in here you can see right now it's showing up next to our deck we want it to span both of the columns so to do that let's just select our text we're gonna select our grid column and we want to span two rows or two columns i'm sorry now as you can see it spans two different columns just like this also if we wanted to center our text inside of these columns and rows we could just change the display here the flex we change the justify content to center and align items to center and now our text is dead centered inside of its rows and its columns and now our two decks are showing up like we want them to the next thing i want to do is essentially the same thing i want to center the text on our deck so we're going to copy the exact same flex center center and that will center our text for us and now i'm just going to increase the font size to 3 rem so we have a much larger font and i want to round the corners a little bit so we're going to say border radius of 0.5 rem lastly let's change the color here to white and the reason for that is because we have a computer deck which we're going to set the background color to green and then we have a player deck we're going to set the background color blue now as you can see our two decks look just like the two decks that we have over here the one last thing i want to do is you can see i can actually highlight the text on our deck i actually don't want that so i'm going to change user select to none and that prevents me from highlighting the text on the deck because it's more of a part of a game and not really text you should highlight and copy and paste so i don't want the user to be able to select that text now the next step is going to be rendering out an individual card so what i want to do is just put a placeholder card in here for now we're going to hard code it and then we're going to dynamically render this card later but for now for styling purposes let's hard code this so we're just going to make a div we're going to give it a class of card and inside of here all i want to do is put the suit of the card so if we come over here you can see we have a nine of hearts i would want to put the heart symbol right here so if i just come into our deck we can copy the heart symbol paste that into our html so now if i come over here you can see we have the heart showing up so i want to be able to render our card and in this case a heart should be red so let's give it a class of red we're going to either use the class red or black to determine the color of the card but this one should be red because it is a heart as you can see here and those are red inside of a normal deck of cards also i want to have the value of my card show up in these corners and i could do that by creating you know a div and absolutely positioning it like this but i'm going to actually use before and after elements and you can use a data attribute for example we could say data value set that equal to 9 and i can actually access this data value inside of my css and if you want an entire blog article on exactly how to do this i'm going to link it down in the description below it'll go over exactly how you can use data attributes in css but i'm also going to show you in this video so next thing now that we have all this done i want to move into our styles just scroll down to the bottom here we can select our card and we're going to have a card that has a before element and a card after element and then i also want to combine those selectors so we're going to have a card before and a card after because really our before and after element are very similar you can see they both contain almost the exact same code inside of them and actually as you can see this is 9 and the heart symbol so our value here should be 9 with the heart symbol not just 9 on its own so now instead of our css for our card let's start here the first thing i want to do is i want to set the height oops height to 100 and i want to set the width to 100 percent let's get that border on here of one pixel solid black with that border radius order radius of 0.5 rem now if i come over here you can see we have our card showing up and i want to center that font so again we can just use flexbox for this just copy this over save that and change our font size to be 4 rem it's going to give us a nice big heart right in the middle just like we have over here this is essentially the main bulk of our center card setup the next thing is going to be our before and after element to position them inside of our card we're going to give our card a position of relative so when we absolutely position our before and after element we can do it based on where our card is positioned so now what i want to do inside of here is i want to come in and i want to put our content equal to attr this allows us to access any data attribute and the data attribute we want is data value immediately when i save this you're going to see the nine of hearts are showing up if i shrink down that font size back to a normal one rem you can see we have the nine of hearts and the nine of hearts showing up in both of these different sections before and after and if we just change the position here to be absolute now what we can do you can see it disappeared because it's right in the middle of our heart here so it's not showing up if i change the color to white you can see it showing up over top we need to do now is position these so we're going to put the before element in the top left so 0.5 rem away from the top and the left as you can see that's now in the top left and what we want to do for our after is we want to put this in the bottom and we want to put it in the right and what we want to do is make sure this flips upside down because in a normal deck of cards it's essentially reversed it's mirrored so what we want to do is just take our transform and we want to translate this 180 degrees essentially it's going to flip itself upside down and this should actually be rotate not translate i don't know what i was thinking but when i save that you can see that this 9 has now flipped upside down and this looks like a normal deck of cards the last thing i want to do is get our card dot red and change the color to red and i want to get our card dot black i want to change the color to black just like that so now we can have a black card or a red card so for each for example come in here change this to say black you can see the card shows up in black and is red it shows up in red the final thing i want to do here is just put a space between the nine and the heart i think that looks a little bit better it's a little cramped before so now if we just add that space it gives us a little bit of a better appearance in my opinion and if we copy this down to over here we can kind of see what this game looks like when we have two different cards being shown some text in the middle and the numbers for the different values for the number of cards in the deck so we really have all the html we need all the css we need the next step is going to be working on the actual javascript and the first thing i want to do is work on the javascript that's going to allow us to dynamically render out a card so i'm going to copy this html and we're going to move it into deck.js because i want our card to have a function called get html it is going to return to us in html element in this html element i want to look just like this let's just essentially create an html element that looks like this we want to get our element we're going to call it card div it's going to be document.createelement of a div then we want to take our card div i want to take our inner text and set it equal to this dot suit since we have that as our text inside of the card and it should be spelled correctly there we go then i want to take our card div i'm going to get our class list and i want to add a class here and this first class i want to add is going to be card and then i want to get the color for this card and i could do the calculations in this function for that but i just want to create a simple getter for color inside of here all i want to do is i want to check if this dot suit is equal to and i want to check to see if it's equal to either a club in our case or it is equal to a spade if i come in here then we return black otherwise we return red we have a simple ternary operator that is going to return in black if it's either of these two suits or it's going to return red if it's not one of those suits so then what we can do is just add the classes of our color which in our case is black or red and a card so now that takes care of this portion takes care of this portion so our classes are done our value in the middle is done the last thing is our data attribute we can say card div dot data oops data set dot what is it called value equals and what we want to do just do some string interpolation we want to get our this dot value and we want to get this dot suit this html right here is essentially the same as the html down here so if we return our card div we now have access to that html i just need to get rid of this keyword function here because it's inside of a class so it already knows it's a function remove this html and now we have the ability to get the html for any one of our cards and what i want to do inside of script.js is let's just get access to this computer card slot so i'm just going to copy this class here i just want to say const computer card slot equal to document.query selector or the class computer card slot and then i want to take the computer's card slot and i want to set an element inside of it so we're going to append a child which is dec dot cards we'll just get the very first one and we'll get the html from that card so now if i save you can see this doesn't quite look 100 correct so let's see exactly what the problem is we can just inspect this to see what's going on here and you can see we have two cards inside of this div so what i really need to do is in our html remove this initial card that shouldn't be there so now if i save you can see we're getting a random card the first card in our deck showing up right here every time when i refresh our page we're getting a brand new card and it's properly showing based on the color value and the suits exactly like we want now let's take this a step further let's actually start making this work like a game and not just a fancy visualization of some random classes we created inside of our script.js i just want to create a function this function is going to be called start game and what i want to do is just call this function right away so we're going to call start game immediately and in here i want to create a new deck i want to shuffle the deck so we have a random ordering of cards and then i want to split this into two equal piles of cards easiest way to do that is to get the midpoint so we'll say deck midpoint this is going to be equal to math.seal and all we want to do is take the number of cards in our deck and we want to divide by two and the reason we have math.seal here is if for some reason we had a deck of 51 cards we're going to essentially convert whatever we divide 51 by 2 which is 25 and a half that'll be converted to 26. so one deck is gonna have 26 cards and the other has 25 in our case 52 divides perfectly by two so we don't have to worry about that rounding error but just in case we have this put here next what i want to do is i want to get our player deck and our computer deck and i want to make these variables that are global so they're accessible everywhere we're going to say player deck and oops deck and computer deck so we just created some empty variables for our player and our computer then i want our player to get the first 26 cards in our deck so what we can do is we can take our deck whoops deck dot cards what i want to do is i want to slice off the cards from zero to the midpoint this is going to give us the first 26 cards and i want to create a new deck from these cards i want to do the exact same thing for a computer deck so i'm just going to copy this down but instead i want to start at the midpoint and i want to end at the last card so deck dot number of cards this is going to give us the last 26 cards in the deck then we can just log these out so we can say player deck and we're also going to log out our computer deck so let's just see what happens we inspect our page go to the console we can error uncaught reference deck is not defined that's just because right here we're not having a deck reference anymore so now what we can see is we have two different decks we have 26 cards in this one and 26 cards in this one so we essentially have two perfectly even decks of the original deck just split in half between our computer and our player so now what i want to do is essentially want to call a cleanup function this cleanup function is going to set up all the values for our information we're going to have that 26 show up our text is going to clear itself these different card slots are going to clear themselves essentially this is an intermediary step remember over here when we click and everything resets that's the step that i want to emulate when we start our game we want to be in this initial default state i'm just going to call this clean up or we'll say clean before round there we go we're going to create a function called clean before round you could do all this code inside of start game it's just easier if we separate this out and what we want to do in here is we want to select all these different elements so we want to come over to our index.html we want to get our computer deck we'll bring that over we'll say const computer deck equals document dot query selector of computer deck we're going to get the player deck as well we're going to get the player card slot just like this and we also need our text so we'll say text and this is going to say text and this should be player deck element and element because we already have a player deck and computer deck variable now instead of our clean up what we can do is we can take our text and we just want to set it to an empty string so we'll say inner text is blank we want to take our computer card slot and clear it out so we'll say computer card slot dot inner html equals blank i want to do the exact same thing for our player as well and then finally i want to update the count for our cards so we're just going to do that in a function we'll say update deck count function update deck count and this function is really straightforward we're going to take our computer deck element we're going to take the inner text and we're going to set it equal to our computer deck that number of cards and do the exact same thing with our player deck and here player deck number of cards and essentially now we have our cleanup before round completely done if i save this put our index.html and we're going to delete all these placeholder values you should see that when we run our page come over here it still populates this value of 26 and that's because each one of the decks currently contains 26 cards if instead we were to change this instead of our script and here instead of going to our midpoint we just went to three now you'll see that we only have three cards inside of this deck because it only goes from zero to three let's just save this again so now we have 26 in each one of these decks so now what i want to do we have our start game ready we have our cleanup between rounds what i want to do is start making it so we can click to flip between different rounds so let's just come all the way to the top here really doesn't matter where but we'll do it up here we'll say add event document.addeventlistener on click because remember when we click anywhere on the screen we want to run this function inside of this function essentially i want to be able to switch between clicking to flip a card and clicking to hide a card so i need a variable to do that we're just going to call this variable in round we're going to set it equal to false and end round means that the card is currently flipped right now because we're in the middle of a round so what i want to do in round set to false by default and when i start the game inside of here we're just going to say in round equals false because by default we start out in this state so really in round we could just put up here we don't even need to give it a default value because we're defaulting it whenever we start our game so if we are in a round then what we want to do is clean up that round so we're going to say clean before round then otherwise we need to flip our card so we're going to say flip cards which is a new function that we're going to create function flip parts now inside of here what we need to do is first set in round it's true because we're now in the middle of a round and here in our clean we need to set it around to false move that to the top because now we're no longer in a round so this allows us to flip between what our different click function does for us and now in high side of here what we need to do is get the top card from the deck well we're going to create a function to do that we're going to call it pop so we're going to say const player card equals player deck dot pop that's going to give us the first card do the same thing for our computer computer now we can do is render these cards so we can say player card slot dot end child and we're going to append the child of player card dot render i'm sorry get html and then we can do the same thing with our computer card and our computer card slot so now we just need to make this pop function work so when i save you'll notice nothing happens because we don't have a working pop function so inside of our deck we want to create a function called pop and we want this to return the top card from our deck so we can just say return whoops this dot cards dot shift and what shift does is it takes the top element essentially the first element in our array it takes it off and returns it to us up if we did this.cards.pop this actually returns to us the last element inside of the array in our case we want the top element so we're going to use shift while we're here i also want to add a function called push which adds a card to the bottom of our deck so we're going to say this.cards.push card and we're going to pass in the card to push here so push adds an element to the end of the array so it's perfect with our push method they both do the exact same thing but with pop we need to do shift because we want to take from the top of the deck and not very much the bottom because pop takes from the bottom so now save that and we can come over here and we can click and you can see it actually flips the top card for us so this is the top card and each one of the decks flipped over for us right now if we click again it will go back flip and that will flip the next one it'll get rid of it flip the next one next one next one next one but right now we're not checking any winners we're not adding the cards to the bottom of the deck so eventually they're all going to run out of cards which is not good the first thing that i want to do if we just refresh this and flip you'll notice this card count doesn't actually change i want to make sure that's updated so we're going to call update deck count now when i flip you'll see these decks both contain 25 cards because they started with 26 but one of them is over here now so that's perfect now once that's done i want to check to see who won the round so we can just create a function called is round winner which is going to take in card one and card two and determine which one is the larger of the two in our case six is greater than two so the person with card six would win it's pretty straightforward when we're using numbers to compare but what happens when we have a jack versus a two a j doesn't really have any meaning so we need to be able to convert from these numbers here for example jack or the string two or ace and figure out which one is the largest to do that i want to create a simple constant variable called the card value map and this is just going to be an object which maps between our values in our case for example 2 or we have jack i want to convert these to a number so two is going to convert to the number two just copy this down a bunch of times because we have three four five six seven eight nine ten and these just straight up convert over to their number version 4 5 6 7 8 9 and 10. and jack well this is going to be larger than a 10 so it's going to convert to 11. we're going to have queen that converts to a 12. king is next that converts to a 13 and finally we have our ace which is the largest number so we're going to convert that to 14. so now we can map from our value which is a string over to a number and compare them to see which one is largest so we can just come all the way down here we can say we just want to return our card value map or card one dot value to see if it is greater than the card value map from card to dot value essentially all we're doing is getting the value of card one getting its actual numeric value and seeing if it's larger than the value for card number two if so card number one is the winner we can say if is round winner of player card versus computer card this right here means that the player has one if the player wants i'm just going to take the text dot inner text and i'll set it to win so now we should see that if i click here and this is a lose so if i wait until i find a winning card as you can see 10 is greater than 6 so it says win and also on top of that i want to add these cards to the bottom of the player's deck so i can just say player deck dot push i want to push the player card and i want to push the computer card because when you win you take the other person's card now that we have this scenario complete what happens if the computer wins it's actually very similar we're going to add another else if statement in here checking if the computer card is the winner versus the player card if that's the case we put the text lose here what i want to do is i want to take the computer deck and i want to add the player card and the computer card to it then finally we're going to have an else statement where there's a draw just copy all this and we want our text to say draw we want the player card to go into their own deck and the computer card to go back in their deck so now i flip you can see this is a lose because the computer has more cards when i click again both the cards got added to their deck flip again we won so now both the cards add to our deck continue on like this and as you can see we have 28 cards and they have 24 cards now our game is essentially nearly finished but what happens when someone completely runs out of cards that means that they lose we need to check for that so we can say if is game over of the player deck so has the player lost let's create this is game over function is game over and it's going to take in a deck and all this does is return if the deck has no cards so deck.number of cards is equal to zero that means that you lose if that's the case our text should now just say you lose a couple exclamation points to really rub it in we're going to set a variable here called stop to true because we don't want the game to continue after someone won so up here let's create that stop variable and down here we're going to set stop default to false so now if stop is true wherever our click function is here we can say if stop is true then we just want to restart our game so we're going to say start game and then i just want to return that way we don't run any of this code so whenever we click if someone has already won then we're going to restart the game from the beginning to do another game now let's scroll back down here let's put in an else we want to do an else if to see if the winner here is instead the actual computer or the loser i'm sorry computer deck to see if they're the loser and if the computer loses well then you win and stop should still be true now if i save that it's going to be a little difficult to check this because we have to go through all these cards so instead what i'm going to do is just kind of make the computer really bad i'm just going to instead of giving them a whole deck of a bunch of cards i'm going to give them a deck with one single card in it so we're going to say new hard this new card is going to have a suit we're just going to give it a suit of s it really doesn't matter and it's going to have a value of 2. that's the important thing and then what we need to do is just make sure we import card up here and we need to make sure we export card from our deck this is just temporary just for the testing purposes now you can see they have one card and it's a two so it should automatically lose we click this it says you win we click again and it resets the game back with them having one card out of having 26 and again we won and we now we drew here because both of us have a two so it goes back and now we won so it resets the game for us we can make this a little bit more apparent by giving them two cards instead of just one so down here let's just copy this whoops giving them a new card i'm going to do s and a 2 again now you can see we won added the card to our deck one again and now we reset the game obviously though we don't want the computer to have two terrible cards so we're going to save this we're going to get rid of this card export and in our deck we don't need to export card so there we go and that's all it takes to create this card game and if you enjoyed this video then you're going to love my complete javascript course which covers everything you need to know about javascript i'm going to link that down in the description below so make sure you check that out thank you very much for watching this video and have a good day

Channel: Web Dev Simplified

Views: 68,761

Keywords: webdevsimplified, card game js, javascript card, javascript card game, js card, js card game, card game tutorial, card game war, javascript deck of cards, javascript playing cards, javascript card flip, javascript card tutorial, javascript card game tutorial, js card game tutorial, js card flip, js card flip animation, js game, javascript game, javascript game dev, js game dev, javascript game development, js game development, javascript game tutorial, js game tutorial, js

Id: NxRwIZWjLtE

Length: 43min 3sec (2583 seconds)

Published: Sat Nov 14 2020