1 00:00:00,120 --> 00:00:05,310 In this lesson, we're going to be introducing scoring, so let's set up a variable, a global variable 2 00:00:05,310 --> 00:00:06,690 to hold our score. 3 00:00:06,840 --> 00:00:10,140 We're going to have our score at zero by default. 4 00:00:10,230 --> 00:00:15,340 And when we start the game, we want to make sure that we are resetting that score back to zero. 5 00:00:15,690 --> 00:00:17,280 So set it back to zero. 6 00:00:17,490 --> 00:00:23,830 And now that we've got our match, we want to make sure that every time that they're doing a guess. 7 00:00:23,850 --> 00:00:30,300 So every time that they press this checker button the button to check the combination, our score is 8 00:00:30,300 --> 00:00:30,940 increasing. 9 00:00:31,470 --> 00:00:37,110 So that means that the amount of Treis that they're taking in order to render out this content also 10 00:00:37,110 --> 00:00:41,430 just above, I'm going to create a brand new div, give it a class of message. 11 00:00:41,580 --> 00:00:45,260 And this is where we can provide information to the player. 12 00:00:46,320 --> 00:00:51,980 And for now, we'll type in guess combo in there and we can update this message. 13 00:00:52,320 --> 00:01:01,410 So selecting it into a JavaScript object, using our document and query selector, selecting the element 14 00:01:01,410 --> 00:01:02,300 via the class. 15 00:01:02,340 --> 00:01:08,370 So make sure that we put the dot there the in order to indicate that it is a class that we're accessing. 16 00:01:09,420 --> 00:01:17,550 So now we've got our ability to send information back to the player, so as we loop through, I'm going 17 00:01:17,550 --> 00:01:20,730 to get rid of some of these console messages because we don't need them anymore. 18 00:01:21,300 --> 00:01:25,680 As we loop through all of the different combinations, we check to see if there's a match. 19 00:01:25,950 --> 00:01:27,840 We want to output some value. 20 00:01:28,050 --> 00:01:32,910 And if there is a match, then we're going to take that value of whatever numbers. 21 00:01:33,120 --> 00:01:38,820 So selecting that object, we're going to apply a style and we can do background color. 22 00:01:39,180 --> 00:01:45,360 And if it is correct, how about we set the background color to green, go out and try that out, press 23 00:01:45,360 --> 00:01:46,850 start check combo. 24 00:01:46,890 --> 00:01:51,320 They all go green because of course, we know that we are guessing properly. 25 00:01:51,630 --> 00:01:57,170 We can also update the value of the color as well. 26 00:01:57,750 --> 00:02:00,640 So doing color and we can turn this to white. 27 00:02:00,660 --> 00:02:02,660 So it looks a little bit better and it stands out. 28 00:02:02,940 --> 00:02:04,280 So try that one more time. 29 00:02:04,510 --> 00:02:07,510 Guess the combination and we got those right again. 30 00:02:07,510 --> 00:02:08,610 Guess the combination. 31 00:02:08,610 --> 00:02:09,990 And we're not doing anything different. 32 00:02:10,020 --> 00:02:11,610 We're not setting out any different color. 33 00:02:11,880 --> 00:02:18,750 So let's go down here where we've got no match and we're going to check to see if it's larger or smaller. 34 00:02:18,900 --> 00:02:23,790 And then depending on what the condition is, if it's larger or smaller, we're going to update the 35 00:02:23,790 --> 00:02:24,750 background color. 36 00:02:26,090 --> 00:02:28,160 So let's set a value of color. 37 00:02:30,800 --> 00:02:33,140 And we're going to take the. 38 00:02:34,410 --> 00:02:39,810 We're going to use a territory operator in this case, so we're going to check to see if this value 39 00:02:39,810 --> 00:02:43,650 is less than whatever the value of correct is. 40 00:02:44,160 --> 00:02:46,710 And if it is, then we're going to return back. 41 00:02:48,760 --> 00:02:55,010 A value of blue, otherwise we're going to return back a value of red. 42 00:02:55,120 --> 00:02:56,020 So try that out. 43 00:02:56,800 --> 00:03:03,250 And instead of doing the color green, let's add one more line here and make this bigger, because, 44 00:03:03,250 --> 00:03:05,350 of course, we are running out of space here. 45 00:03:06,300 --> 00:03:12,660 So now all we have to do is update the value of color here and by default, I'm always going to set 46 00:03:12,660 --> 00:03:13,710 it to be black. 47 00:03:15,370 --> 00:03:19,440 So instead of white, it will be black, so whenever it's wrong, it will be black. 48 00:03:20,140 --> 00:03:22,210 So try that out and refresh. 49 00:03:23,290 --> 00:03:29,470 And check the so goes green, check the combo so it goes blue, so that means that the number is larger. 50 00:03:32,030 --> 00:03:35,510 Read that we've gone to high and the number is too high. 51 00:03:37,250 --> 00:03:43,000 So as we generate and we make the checks until we get a green, then we know that everything is correct. 52 00:03:43,400 --> 00:03:47,510 So one more thing that we should do, and this is going to be our win. 53 00:03:48,770 --> 00:03:51,650 And right now, our win condition will be zero. 54 00:03:52,730 --> 00:03:59,690 And as we loop through, we want to make sure that if the wind condition is going to increase every 55 00:03:59,690 --> 00:04:05,900 time we get one correct, so wind condition is going to increment by one every time it's correct. 56 00:04:06,500 --> 00:04:11,990 And then after we've finished doing the loops, this is the way that we're going to tell if the player 57 00:04:11,990 --> 00:04:13,640 made the gas correctly. 58 00:04:13,790 --> 00:04:15,640 And then this is where we restart the game. 59 00:04:15,860 --> 00:04:24,380 So we're going to do a quick check to see if wind condition is equal to whatever the value of numbers 60 00:04:25,220 --> 00:04:29,620 and always think that we may need to make it dynamic as possible. 61 00:04:29,960 --> 00:04:35,740 So if these are equal, then that means that the game is one retry that one more time. 62 00:04:36,560 --> 00:04:39,080 So we get that and we see that game is over. 63 00:04:39,090 --> 00:04:44,660 If I update that, then no longer we're seeing the game over so we can see that it's doing the checker. 64 00:04:44,660 --> 00:04:45,680 No match, no match. 65 00:04:45,860 --> 00:04:51,420 When we go to two or a one and back to a zero, we see that game over. 66 00:04:51,440 --> 00:04:52,940 So that is functioning properly. 67 00:04:53,240 --> 00:04:59,120 And that's the next thing that we need to do is initiate that game over function as well as we can update 68 00:04:59,120 --> 00:05:06,230 the guests combo and number of guesses as well, because we are incrementing the number of guesses within 69 00:05:06,230 --> 00:05:09,740 this within the score so we can update that. 70 00:05:10,130 --> 00:05:16,790 So updating the value of message, selecting the inner HTML guesses, and this is going to be equal 71 00:05:16,790 --> 00:05:18,560 to whatever the value of score is. 72 00:05:18,710 --> 00:05:21,620 So start and we have guesses. 73 00:05:21,620 --> 00:05:24,440 One guesses, two guesses, three guesses. 74 00:05:24,440 --> 00:05:24,800 Four. 75 00:05:24,980 --> 00:05:29,510 And the objective is to guess it in as little guesses as possible. 76 00:05:29,510 --> 00:05:33,140 And so red is too high and blue is too low. 77 00:05:33,440 --> 00:05:38,060 And that's up to the player to determine if they've guessed it properly. 78 00:05:38,150 --> 00:05:43,520 So coming up next, we're going to have to set some wind conditions and have the ability to reset and 79 00:05:43,520 --> 00:05:44,950 start the game once more. 80 00:05:44,960 --> 00:05:49,010 So go ahead and add in the wind conditions, update the background colors. 81 00:05:49,010 --> 00:05:52,220 You might want to select different colors other than ones that I have. 82 00:05:52,370 --> 00:05:57,200 And this can all go into instructions for the player, how to play the game as they're guessing the 83 00:05:57,200 --> 00:05:57,800 combinations. 84 00:05:57,800 --> 00:06:03,650 So coming up next, we'll do a quick overview and an end of the game and then also a review of the source 85 00:06:03,650 --> 00:06:03,950 code. 86 00:06:03,950 --> 00:06:04,730 So that's still to come.