1 00:00:00,240 --> 00:00:06,660 On making it through to the end and successfully making it through on this journey of creating this 2 00:00:06,660 --> 00:00:14,100 blackjack game from scratch or using JavaScript in this lesson, we're going to just do a final code 3 00:00:14,100 --> 00:00:21,750 review of what we've presented in the earlier lessons as a quick overview of what we're doing and why 4 00:00:21,750 --> 00:00:22,380 we're doing it. 5 00:00:22,710 --> 00:00:28,230 So first, we started out by setting up the H.T. Amelle and we kept the each TIMAL code to the minimal 6 00:00:28,500 --> 00:00:29,300 as, of course, right. 7 00:00:29,340 --> 00:00:32,910 To focus on JavaScript because this is a JavaScript course. 8 00:00:33,200 --> 00:00:35,160 So we linked out to a script file. 9 00:00:35,490 --> 00:00:39,160 So script G.S. and this is where all of our JavaScript was going. 10 00:00:39,540 --> 00:00:46,860 And we also on page, we created a script tag and we set that at an event listener that was listening 11 00:00:46,860 --> 00:00:48,510 for the DOM content to load. 12 00:00:48,780 --> 00:00:52,780 And once the DOM content loads, then we initiated that app. 13 00:00:52,860 --> 00:00:56,580 I an I.T. function which is contained within app. 14 00:00:56,880 --> 00:01:03,210 And the reason that we separated it out as a separate app object is that this separates out the code 15 00:01:03,480 --> 00:01:09,990 and avoids any overlap of any of the functions and names that we might be using within the code and 16 00:01:09,990 --> 00:01:12,540 allows us to have a self-contained application. 17 00:01:12,780 --> 00:01:17,100 That's really easy to bring in to other Web pages as needed. 18 00:01:17,340 --> 00:01:21,180 So the core of the functionality was all contained within app. 19 00:01:21,510 --> 00:01:24,450 And we started out by running the iron I.T.. 20 00:01:24,750 --> 00:01:31,080 And this was invoked every time app was invoked, were returning iron I.T. within the Iron I.T. and 21 00:01:31,080 --> 00:01:33,270 we were having a self invoking function. 22 00:01:33,510 --> 00:01:37,500 So going back up to the top, we set some default variables. 23 00:01:37,800 --> 00:01:43,860 So these were used throughout the gameplay and to store values and main object was game. 24 00:01:43,980 --> 00:01:49,350 This is where we held all of the information that was contained within the game that was updating. 25 00:01:49,380 --> 00:01:52,170 And as well as the elements within the page. 26 00:01:52,470 --> 00:01:58,230 So we could easily access them as a global object and update them, manipulate them as needed. 27 00:01:58,530 --> 00:02:00,240 So we had access to everything. 28 00:02:00,480 --> 00:02:03,450 We setup the suits, the ranks and the suit. 29 00:02:03,450 --> 00:02:09,750 Names were corresponding with the each here Mel code for the various suits. 30 00:02:09,990 --> 00:02:15,110 So we could display spades, hearts, clubs, diamonds as each Timal caught. 31 00:02:15,720 --> 00:02:18,750 And then within the ranks, all of the different card ranks. 32 00:02:19,020 --> 00:02:23,160 And as we saw, when we're doing testing, we can set whatever ranks we want. 33 00:02:23,400 --> 00:02:26,580 We can even set whatever suits we want, because all of this is dynamic. 34 00:02:26,910 --> 00:02:27,810 We have a score. 35 00:02:28,110 --> 00:02:31,080 So we have two different players who have the dealer and the player. 36 00:02:31,410 --> 00:02:33,420 And we're keeping score for each one of them. 37 00:02:33,780 --> 00:02:37,500 And we also added in the ability to have cash and betting. 38 00:02:37,680 --> 00:02:40,830 So the starting cash value, the starting bet value. 39 00:02:41,160 --> 00:02:42,430 We built the game board. 40 00:02:42,630 --> 00:02:44,520 So this was all done dynamically. 41 00:02:44,850 --> 00:02:51,720 And I know this was quite a bit of building with JavaScript, but it's important to understand that 42 00:02:52,350 --> 00:02:58,950 practicing building elements with JavaScript is a crucial part to interacting with the DOM and understanding 43 00:02:58,950 --> 00:03:00,780 how that all the DOM objects work. 44 00:03:01,140 --> 00:03:07,530 So working with each team l might have been easier, but JavaScript, home construction or JavaScript 45 00:03:07,740 --> 00:03:11,100 was far more valuable in understanding how JavaScript works. 46 00:03:11,430 --> 00:03:13,920 So constructing the whole gameboard with JavaScript. 47 00:03:14,280 --> 00:03:20,550 We had a couple functions here that turn different buttons on and off so that enable and disable the 48 00:03:20,550 --> 00:03:21,030 buttons. 49 00:03:21,450 --> 00:03:27,960 Then we built the card deck and the card deck was kind of the core of what we were doing, where we 50 00:03:27,960 --> 00:03:34,320 needed a deck of cards that we could deal out and we'd take the top card off the deck and the building 51 00:03:34,320 --> 00:03:34,800 of the deck. 52 00:03:34,830 --> 00:03:36,980 So we set a default deck, a race. 53 00:03:36,990 --> 00:03:42,450 We cleared out any existing cards that might exist already in the game deck array. 54 00:03:42,780 --> 00:03:46,440 And then we loop through the suits and within the suits loop. 55 00:03:46,710 --> 00:03:50,340 We looked through the ranks and that's how we built out the cards. 56 00:03:50,790 --> 00:03:56,460 And then ultimately we shuffled the cards so that we'd have randomized order of the cards in the deck. 57 00:03:56,730 --> 00:04:02,910 We chose to use the array Sorte method in order to randomize the contents of their array. 58 00:04:03,300 --> 00:04:08,460 And that's where we've got this shuffle function that can be used elsewhere as well. 59 00:04:08,640 --> 00:04:11,100 It's a great way to shuffle the card content. 60 00:04:11,550 --> 00:04:17,550 So now we've got a deck, it's shuffled and we can deal it out to the player. 61 00:04:17,820 --> 00:04:21,450 So we need to setup the ability for the player to interact with the content. 62 00:04:21,770 --> 00:04:28,290 As for the add clicker came in this enabled event, listeners added to the buttons and then the player 63 00:04:28,290 --> 00:04:28,830 comes in. 64 00:04:28,850 --> 00:04:32,160 They see a bunch of buttons and they know what they can interact with. 65 00:04:32,460 --> 00:04:34,080 And this creates the game flow. 66 00:04:34,380 --> 00:04:40,560 So there's always a next domino to fall or next step that the player can take within the game process. 67 00:04:40,800 --> 00:04:42,390 And this is really important. 68 00:04:42,720 --> 00:04:44,550 Doesn't matter what type of game you're building. 69 00:04:44,820 --> 00:04:49,620 You always need to have the players ability to move through the game effectively. 70 00:04:49,860 --> 00:04:54,810 And that's where we've got the different event listeners turning them on and off and enabling the player 71 00:04:54,810 --> 00:04:57,870 to make the selections as they play through the game. 72 00:04:58,200 --> 00:04:59,850 Also updating the scoreboard. 73 00:05:00,140 --> 00:05:06,260 And then lastly, updating the cash, and this allowed us to introduce cash and betting. 74 00:05:06,500 --> 00:05:09,440 So all of these functions were focused on the betting. 75 00:05:09,680 --> 00:05:16,400 So we're updating the cash value taking from the input value and setting up the bet. 76 00:05:16,700 --> 00:05:22,700 And then we had a running in the background, a game cash value that contained the value of the cash. 77 00:05:22,970 --> 00:05:25,520 We also have the option to lock the wager. 78 00:05:25,820 --> 00:05:32,330 So once the wager was placed or once the game was in play, we don't want the ability to update any 79 00:05:32,330 --> 00:05:32,960 of the bets. 80 00:05:33,170 --> 00:05:36,800 So once you make your bet and you launch the game, then that's it. 81 00:05:36,980 --> 00:05:40,700 You're stuck with whatever bet you've made updating of the scoreboard. 82 00:05:40,760 --> 00:05:44,270 So all of this stuff as much as possible within functions. 83 00:05:44,540 --> 00:05:46,370 So for reusability. 84 00:05:46,580 --> 00:05:51,590 So at any point, if we want to call it any of these functions and run the code within them, we can 85 00:05:51,590 --> 00:05:52,010 do that. 86 00:05:52,400 --> 00:05:54,710 So one of the main functions was dealing. 87 00:05:54,980 --> 00:05:59,660 So this was the first function that the dealer is presented with so they can deal. 88 00:05:59,690 --> 00:06:01,670 So clears out the dealer's hand. 89 00:06:01,760 --> 00:06:02,630 The players hand. 90 00:06:02,900 --> 00:06:07,610 And these are just arrays that we're using to store the contents that are contained within the hand, 91 00:06:07,910 --> 00:06:10,280 updating what's visual for the player. 92 00:06:10,550 --> 00:06:11,440 We've got game start. 93 00:06:11,450 --> 00:06:16,910 We didn't really make use of this, but it's always good to have the ability to turn games on and off. 94 00:06:17,180 --> 00:06:20,290 So I've included it, but we weren't really making use of it. 95 00:06:20,600 --> 00:06:23,810 Updating the H.T. Amelle and then dealing out the cards. 96 00:06:24,080 --> 00:06:26,960 So taking card off the top of the deck. 97 00:06:27,260 --> 00:06:28,850 So you've got a function that handles that. 98 00:06:29,120 --> 00:06:29,990 So take card. 99 00:06:30,290 --> 00:06:34,070 And this is where the game dealer hand. 100 00:06:34,100 --> 00:06:35,690 So this is where it's going to end up. 101 00:06:36,020 --> 00:06:38,730 And also where that each Timal element. 102 00:06:39,050 --> 00:06:41,690 And then we've got the boolean values of true and false. 103 00:06:41,960 --> 00:06:43,820 If we want to show or hide the card. 104 00:06:44,090 --> 00:06:48,050 So as typically with blackjack, we want to hide the first card from the dealer. 105 00:06:48,320 --> 00:06:55,010 And then there was also the update count, which was updating and making some calculations in the background, 106 00:06:55,250 --> 00:07:02,150 making sure that we've got the right game flow so that the player can either hit or stand depending 107 00:07:02,150 --> 00:07:03,890 on what the value of their cards are. 108 00:07:04,220 --> 00:07:07,520 And then if they've gone overboard, then we find the winner. 109 00:07:07,790 --> 00:07:10,160 And there's also the dealer. 110 00:07:10,280 --> 00:07:12,160 So the dealer, what they're playing to. 111 00:07:12,500 --> 00:07:16,760 And also checking to see if the dealer has a blackjack right off the bat. 112 00:07:17,180 --> 00:07:20,330 We also have a function here to do some calculations. 113 00:07:20,660 --> 00:07:27,020 So the score ace was specifically to handle the ace values that can be either one or 11. 114 00:07:27,320 --> 00:07:31,160 So looping through and counting how many aces we have subtracting those. 115 00:07:31,400 --> 00:07:34,400 And if it's over 21, that we continue the loop. 116 00:07:34,460 --> 00:07:36,580 And we continue to stopped, subtract 10. 117 00:07:36,950 --> 00:07:42,250 And if we can't do that anymore and if we've got too many aces and we're still over, then this is going 118 00:07:42,250 --> 00:07:45,050 to be a failure and we're just simply return back the value. 119 00:07:45,290 --> 00:07:52,270 But if we can subtract the tens off of the aces, then we're going to do that until we're under 21. 120 00:07:52,730 --> 00:08:00,380 The score was where we're a crucial part to making calculations of the values for each player's hand. 121 00:08:00,650 --> 00:08:05,350 So the dealer's hand, the player's hand and checking to see if they're over 21. 122 00:08:05,690 --> 00:08:11,090 And if they are, then we're ending the game, counting the aces, counting the totals, and then simply 123 00:08:11,090 --> 00:08:13,880 returning the both the total within a numeric format. 124 00:08:14,210 --> 00:08:16,670 We also added in an end game function. 125 00:08:16,880 --> 00:08:23,510 So this would turn off the ability to hit and stand and we just enabled disable those buttons. 126 00:08:23,870 --> 00:08:28,430 The take card, this is the one where we're taking the card off the top of the deck. 127 00:08:28,790 --> 00:08:35,750 So we're checking to see if the deck length is equal to zero and if it is that we run build deck again. 128 00:08:35,780 --> 00:08:41,660 And what that does is that rebuilds a brand new deck so that we can continue to keep playing the game. 129 00:08:41,930 --> 00:08:47,150 And we're never going to run out of cards and we're going to recycle and rebuild new decks as needed. 130 00:08:47,570 --> 00:08:54,140 We're taking the game cards, using the array shift method, and that's placing it within temp. 131 00:08:54,500 --> 00:08:56,270 And then we're adding it into the hand. 132 00:08:56,570 --> 00:09:05,020 The hand is whatever hand was sent in, whatever object was holding the cards so we could have it either 133 00:09:05,020 --> 00:09:06,200 to the dealer or the player. 134 00:09:06,470 --> 00:09:08,960 And this is the element that it's putting the card on. 135 00:09:09,260 --> 00:09:14,150 And we're passing that into show card, which takes the card value. 136 00:09:14,600 --> 00:09:22,010 And then as well as the element that it needs to add to add updates and creates the content that's being 137 00:09:22,010 --> 00:09:23,330 displayed within the element. 138 00:09:23,570 --> 00:09:25,220 So that's where we get those nice visuals. 139 00:09:25,550 --> 00:09:29,480 We're also checking to see if H is true or false. 140 00:09:29,780 --> 00:09:32,030 And if it's true, then we're going to hide. 141 00:09:32,120 --> 00:09:40,910 We're gonna overlap the card with Card B, which is just a blue background representing the background 142 00:09:41,510 --> 00:09:46,280 of the card so that we have the option to hide cards if needed. 143 00:09:46,370 --> 00:09:52,250 And then these were just useful functions where we could turn on and off different buttons so we could 144 00:09:52,250 --> 00:09:54,530 disable and enable as needed. 145 00:09:54,830 --> 00:09:59,360 And then these functions here represented the ability for the player to either. 146 00:09:59,550 --> 00:10:01,710 To stand or to take a next card. 147 00:10:01,830 --> 00:10:03,600 Running the appropriate functions. 148 00:10:03,900 --> 00:10:09,390 We also have the ability to add the all the listeners within the add clicker function, updating the 149 00:10:09,390 --> 00:10:12,480 scoreboard and then going back into the wagering. 150 00:10:12,660 --> 00:10:15,810 So putting it all together, we have a fully functional game. 151 00:10:16,020 --> 00:10:21,090 And I do encourage you to try this game out for yourself and make any adjustments that you feel are 152 00:10:21,090 --> 00:10:25,860 necessary improvements as well as share within the Q&A section. 153 00:10:26,100 --> 00:10:27,750 If you only questions or comments. 154 00:10:28,050 --> 00:10:29,130 I'm always happy to help. 155 00:10:29,310 --> 00:10:30,540 I'm always happy to hear from you. 156 00:10:30,750 --> 00:10:32,100 Thanks again for taking the course.