1 00:00:00,240 --> 00:00:05,910 This lesson, we're going to be setting up our game play variables, we're going to need one variable 2 00:00:05,910 --> 00:00:08,580 that's going to hold our current card value. 3 00:00:08,730 --> 00:00:11,670 This is going to be a global variable and it's going to be changing. 4 00:00:11,670 --> 00:00:16,200 So we're going to make it a lot and also give it a name, current card value. 5 00:00:16,410 --> 00:00:21,300 And currently we'll just set that at zero and we're going to use that throughout the script in order 6 00:00:21,300 --> 00:00:25,630 to track what the current card is and what the current card value is. 7 00:00:25,950 --> 00:00:32,820 We also need to track our score, set this up as score value because I already used the variable score. 8 00:00:32,850 --> 00:00:34,140 So I need another variable. 9 00:00:34,320 --> 00:00:36,950 So I'm setting this one up as score zero. 10 00:00:37,440 --> 00:00:44,970 We also need to have some variables that are going to be holding the deck and this is going to be an 11 00:00:44,970 --> 00:00:45,330 array. 12 00:00:45,540 --> 00:00:50,280 We're going to build this out using JavaScript, also some default card settings. 13 00:00:50,280 --> 00:00:55,350 So these actually can be const because they're not changing and we can call this the ranks. 14 00:00:55,620 --> 00:00:59,940 So these are all of the card ranks that we potentially will have. 15 00:01:00,130 --> 00:01:01,580 So we'll have some cards. 16 00:01:01,800 --> 00:01:06,900 So starting at two, working all the way up to our jox. 17 00:01:06,910 --> 00:01:12,540 So it's going to be a string value and this is how we're going to know what to output for the user. 18 00:01:13,110 --> 00:01:18,180 So essentially, we're going to be using this for visual representation of the cards. 19 00:01:18,810 --> 00:01:23,700 In addition to that, we know that our cards are going to have different suits. 20 00:01:24,190 --> 00:01:27,110 Let's set up an array for the suits as well. 21 00:01:27,570 --> 00:01:34,920 The suits that are going to be using are going to be also useful when we're using the AFSC characters. 22 00:01:35,220 --> 00:01:38,370 So set one up as hearts diamonds. 23 00:01:38,370 --> 00:01:40,200 So we're going to use a short format for that. 24 00:01:40,860 --> 00:01:45,270 And I'll show you why later on in the upcoming lessons, why we're using that shorter format. 25 00:01:45,510 --> 00:01:48,000 So clubs and lastly, spades. 26 00:01:48,840 --> 00:01:52,280 And this is going to also help with the output of those values. 27 00:01:52,740 --> 00:01:59,100 So now that we've set up basically our default variables, we're ready to build out our deck of cards 28 00:01:59,280 --> 00:02:05,220 using these values and then also to keep track of what's happening during the gameplay with these to 29 00:02:05,550 --> 00:02:09,450 we also need to make sure that the buttons are doing something. 30 00:02:09,870 --> 00:02:15,510 So let's set that up where we're going to loop through all of the variable available buttons. 31 00:02:15,870 --> 00:02:17,280 So set up a variable. 32 00:02:18,580 --> 00:02:23,920 And you can do different loops for this, so we're just going to do a basic for loop and we're looping 33 00:02:23,920 --> 00:02:31,030 through all of the button object and it's got a length because it's a node list and then increment I 34 00:02:31,060 --> 00:02:34,570 so we can break out of our loop and then selecting a button. 35 00:02:34,990 --> 00:02:40,780 And as we loop through first, I'll show you what we're going to be outputting as we're looping through 36 00:02:41,170 --> 00:02:45,100 and as we loop through and we output these objects individually. 37 00:02:45,250 --> 00:02:47,200 That means that we can work with those as well. 38 00:02:47,380 --> 00:02:50,470 So you can see that we've got the start button that represented there. 39 00:02:50,620 --> 00:02:53,970 We've got the first higher button and then the second button. 40 00:02:53,980 --> 00:02:55,720 So it's all being represented there. 41 00:02:56,020 --> 00:02:58,980 And we want to add event listeners to those buttons. 42 00:02:59,290 --> 00:03:05,800 So as we iterate through them within the loop, this is where we can add an event listener adding an 43 00:03:05,800 --> 00:03:12,340 event listener and the event listener that we want to add in is a click and we'll link it to a variable 44 00:03:12,460 --> 00:03:15,210 called that or a function called that play game. 45 00:03:15,730 --> 00:03:18,580 And then just below, let's set up our function. 46 00:03:18,620 --> 00:03:22,570 So this is a default one that's just going to hold that console log. 47 00:03:23,110 --> 00:03:25,950 And for now, we're just going to type clicked there. 48 00:03:26,410 --> 00:03:33,400 So now that every time we click one of our buttons, we should see clicked showing up within the console. 49 00:03:33,400 --> 00:03:34,000 And that we do. 50 00:03:34,360 --> 00:03:40,480 And we can also get rid of this to avoid some of that confusing content that's being shown here within 51 00:03:40,480 --> 00:03:41,040 the console. 52 00:03:41,470 --> 00:03:42,730 So you see, we've got clicked. 53 00:03:42,850 --> 00:03:44,830 So all of our buttons are now functional. 54 00:03:45,010 --> 00:03:46,640 So we're ready to move on to the next step. 55 00:03:46,990 --> 00:03:49,360 So go ahead and set up the variables. 56 00:03:49,660 --> 00:03:54,640 Also set up the content for the card deck so that we can build out the deck in the next lesson. 57 00:03:54,850 --> 00:04:02,650 And in the event listener for the buttons going through, looping through that node list and then set 58 00:04:02,650 --> 00:04:08,530 up a default function that can house any of the clicks that can respond to any of the clicks. 59 00:04:08,690 --> 00:04:11,800 And for now, we're going to keep console log clicked in there. 60 00:04:12,370 --> 00:04:14,230 Go ahead and set that up in your own project.