1 00:00:00,630 --> 00:00:07,080 Welcome back in in this lesson, we're going to be doing a final overview of the game and separating 2 00:00:07,080 --> 00:00:09,130 it out, cleaning it up and so on. 3 00:00:09,420 --> 00:00:15,180 So one of the things that I did notice is that we do have a problem here where we're covering up the 4 00:00:15,180 --> 00:00:18,060 score and that's contained within the stats class. 5 00:00:18,420 --> 00:00:23,580 So let's make a quick adjustment within the stats class, adding in some success. 6 00:00:23,910 --> 00:00:26,040 And this is usually what I do at the end. 7 00:00:26,040 --> 00:00:29,400 I like to just kind of fine tune the look and feel of it. 8 00:00:29,580 --> 00:00:33,720 And of course, in this, I'm just I don't want to focus too much on the success. 9 00:00:33,990 --> 00:00:37,710 So I'm just doing a quick adjustment to some of the success. 10 00:00:38,370 --> 00:00:40,460 Also, it can do a font size as well. 11 00:00:43,000 --> 00:00:49,000 So it's a little bigger and wall text allowing it to center to see what that looks like. 12 00:00:49,240 --> 00:00:50,110 So refresh. 13 00:00:51,130 --> 00:00:52,330 Press button to start. 14 00:00:52,730 --> 00:00:55,290 We should also move the button down as well. 15 00:00:56,980 --> 00:00:58,720 So we've got our page. 16 00:01:01,280 --> 00:01:03,800 Margin and will set the margin to auto. 17 00:01:05,620 --> 00:01:07,750 And text Aline. 18 00:01:09,680 --> 00:01:11,840 Or we're going to set margin top. 19 00:01:13,520 --> 00:01:20,220 Margin top analysts do 40 picks, so that will move it down. 20 00:01:21,370 --> 00:01:26,090 So it's going to put our button down so that way it's not going to interfere with our game and we've 21 00:01:26,090 --> 00:01:27,770 got our game separated out. 22 00:01:28,580 --> 00:01:32,150 So next, let's just do a quick clean up of the source code. 23 00:01:32,570 --> 00:01:37,360 We're going to take this style out, will make a new separate style page for that. 24 00:01:37,640 --> 00:01:44,930 So a new file, we can call it style dot scissors, and we're just going to link to it within our code 25 00:01:45,380 --> 00:01:47,310 and I'll clean this one up as well. 26 00:01:48,110 --> 00:01:49,550 So go back to index. 27 00:01:52,170 --> 00:01:53,640 So using link. 28 00:01:55,310 --> 00:02:05,290 Arial type Texas and using ATRA style, see us go and refresh, so that's working. 29 00:02:05,720 --> 00:02:11,330 And now next, let's take the JavaScript out and then we'll do a quick overview of all the functions 30 00:02:11,330 --> 00:02:12,260 within the code here. 31 00:02:13,100 --> 00:02:17,670 And we're going to link out to a source and it's still got to create it. 32 00:02:17,690 --> 00:02:25,940 So let's dump that in here and we'll save this as script dot James. 33 00:02:28,500 --> 00:02:35,820 And I'll clean that up and then we'll do a quick overview of the code, so we're linking out to script 34 00:02:35,820 --> 00:02:36,750 dot J.S.. 35 00:02:39,500 --> 00:02:44,960 And that should clean that up, so just make sure everything is still working and functioning properly 36 00:02:45,860 --> 00:02:51,320 so there's not a whole lot here within the TEMEL, we tried to keep it as a minimum, so we created 37 00:02:51,320 --> 00:02:54,950 our basic classes and our basic game area container. 38 00:02:55,190 --> 00:03:00,290 We also made a fairly dynamic within the JavaScript so that we can add more buttons, we can add more 39 00:03:00,290 --> 00:03:05,390 pages and we can extend our game to have a lot more functionality if we wanted to. 40 00:03:06,170 --> 00:03:08,810 The styling was as simple and straightforward. 41 00:03:08,960 --> 00:03:13,460 We applied a little bit of styling, minimal styling in order to make the game look a little bit more 42 00:03:13,460 --> 00:03:16,250 attractive within the script. 43 00:03:16,870 --> 00:03:18,290 We're going to do a quick run-Through. 44 00:03:18,440 --> 00:03:23,110 So first of all, we set up a couple objects that we're going to make use of throughout the game. 45 00:03:23,330 --> 00:03:28,340 So these are objects we've got play area and player, our main core objects. 46 00:03:28,550 --> 00:03:33,560 The player is the one that's actually going to be changing when we start the game changes, the play 47 00:03:33,560 --> 00:03:35,240 area should stay the same. 48 00:03:35,240 --> 00:03:40,160 And that's where we're using all of our main document objects that we're placing in there. 49 00:03:40,670 --> 00:03:45,320 We also got the game object, so that's where we can hold our data. 50 00:03:45,500 --> 00:03:50,120 And of course, we could have also loaded that within a plate area object as well. 51 00:03:50,240 --> 00:03:52,760 So we could have done that to kind of clean things up. 52 00:03:52,910 --> 00:03:56,360 But for now, we're going to leave it because we did want to keep it separate because there was a few 53 00:03:56,360 --> 00:04:02,330 different ways that we're bringing that data in and you can use the fetch or you can just simply use 54 00:04:02,330 --> 00:04:03,530 a JavaScript object. 55 00:04:03,530 --> 00:04:07,130 And that gives you the ability to adjust some of these values. 56 00:04:07,340 --> 00:04:10,040 Or you could use the default values that have in the JSON file. 57 00:04:10,790 --> 00:04:14,390 So next we select that the elements that we're going to be using. 58 00:04:14,750 --> 00:04:19,480 We also selected all of the elements, the buttons and the pages. 59 00:04:19,670 --> 00:04:21,710 So as we said, we did want to make it dynamic. 60 00:04:21,710 --> 00:04:24,200 So if we added more buttons, we can make use of it. 61 00:04:24,440 --> 00:04:27,590 We turn these into actual arrays from the node lists. 62 00:04:27,770 --> 00:04:29,450 Now, you don't have to do this. 63 00:04:29,690 --> 00:04:32,060 I was just demonstrating that this is an option. 64 00:04:32,060 --> 00:04:38,180 And we showed you later on how we can just use query selector all and grab all of the ones that the 65 00:04:38,180 --> 00:04:39,680 class and use the node list. 66 00:04:39,830 --> 00:04:41,630 We can get a length from there as well. 67 00:04:42,140 --> 00:04:47,710 But this is in case you ever want to output that or move it, use it within a more of an array format. 68 00:04:47,840 --> 00:04:49,670 You can do it within this way as well. 69 00:04:50,270 --> 00:04:53,590 This gave us actual arrays that we could make use of. 70 00:04:53,600 --> 00:04:55,340 So the button was an actual array. 71 00:04:55,550 --> 00:04:59,900 So we loop through it and we added the event listeners onto that arrays. 72 00:05:00,200 --> 00:05:04,820 So whenever any one of the buttons gets clicked, we've got a function called handle button. 73 00:05:05,240 --> 00:05:11,330 So that handle button, what that does is that checks to see what class is contained in there. 74 00:05:11,510 --> 00:05:16,940 So if you added new buttons, you can have new game one, new game two and so on and so on, just giving 75 00:05:16,940 --> 00:05:18,110 them the classes. 76 00:05:18,110 --> 00:05:21,410 And that's going to give you the ability to select those different buttons. 77 00:05:21,620 --> 00:05:24,820 But we only have one button so far within this game. 78 00:05:25,100 --> 00:05:27,020 So we've also got start game. 79 00:05:27,020 --> 00:05:30,140 We can get rid of the console messages because they're not needed anymore. 80 00:05:30,740 --> 00:05:35,870 So we launched the function start game whenever the new game button is clicked. 81 00:05:35,870 --> 00:05:38,090 And this time now it says try again. 82 00:05:38,180 --> 00:05:42,490 So whenever a new game is clicked, that's going to basically start the game. 83 00:05:42,830 --> 00:05:47,600 So what's going to happen is that we're resetting those player object values. 84 00:05:47,600 --> 00:05:50,300 So score to zero items to zero. 85 00:05:50,480 --> 00:05:57,350 So the items is the number of lives essentially that you have where updating adding a class of visible 86 00:05:57,590 --> 00:06:02,740 to removing the class visible from the main page and adding it to the game page. 87 00:06:02,750 --> 00:06:04,910 So essentially of two different pages in this game. 88 00:06:05,510 --> 00:06:06,980 So we're toggling between the two. 89 00:06:07,370 --> 00:06:10,070 We're setting player game over to false. 90 00:06:10,310 --> 00:06:12,950 So it's going to allow the game to play and function. 91 00:06:13,160 --> 00:06:15,980 If this goes to true, that that means our game stops. 92 00:06:15,980 --> 00:06:16,430 Stops. 93 00:06:16,760 --> 00:06:20,120 We had to start pop and we have an update score. 94 00:06:20,120 --> 00:06:22,220 So the update score was fairly straightforward. 95 00:06:22,370 --> 00:06:25,250 It simply updates the score of the page. 96 00:06:25,610 --> 00:06:30,080 So that was just up here at the top here where we were updating that play area. 97 00:06:30,200 --> 00:06:32,240 And we need to call to this several times. 98 00:06:32,240 --> 00:06:33,710 That's why I threw it into a function. 99 00:06:34,800 --> 00:06:40,890 And then going down here where we've got the start pop, so this actually starts the game going and 100 00:06:40,890 --> 00:06:45,510 we get a random element from the ones that were created. 101 00:06:45,750 --> 00:06:50,850 So the game board gets created when the page loads and we're selecting a random one. 102 00:06:50,850 --> 00:06:53,390 They all have a class of pop in them. 103 00:06:53,670 --> 00:06:57,180 So that makes them really easy to go and select. 104 00:06:57,210 --> 00:07:02,820 So if we go over to here, we can see that this was all generated with JavaScript and we've got all 105 00:07:02,820 --> 00:07:06,430 of these divs that were created and they all have a class of pop. 106 00:07:06,660 --> 00:07:12,930 So what's happening here when we click random up function is where grabbing going into the document 107 00:07:12,930 --> 00:07:18,990 object using query selector, all selecting all the elements with a class of pop, putting them into 108 00:07:18,990 --> 00:07:19,950 our node list. 109 00:07:19,980 --> 00:07:26,280 With the node list we have a length, so we're selecting one at random, using the math random and javascript. 110 00:07:26,700 --> 00:07:32,700 And what we're doing over here is we're checking to see if it's the same as the last one. 111 00:07:32,880 --> 00:07:39,420 And if it is, then we're running that function again and hopefully we continue to run it through and 112 00:07:39,420 --> 00:07:44,290 then eventually we're going to get something that's different from the last one over here. 113 00:07:44,310 --> 00:07:50,660 So once we pass this part, if it's different one, then we're setting it as the new lost value. 114 00:07:50,670 --> 00:07:57,420 So whatever the value of the county is, and then we're returning back that element that we've selected 115 00:07:57,720 --> 00:08:06,330 and that's putting it into our variable new pops or our new object, I can get rid of this console message 116 00:08:06,360 --> 00:08:06,890 as well. 117 00:08:07,740 --> 00:08:10,060 We're adding a class of active to it. 118 00:08:10,440 --> 00:08:13,410 So what that's doing is that's activating. 119 00:08:13,410 --> 00:08:19,590 And the active class has that blue background, light blue background, and it's doing the border shadow 120 00:08:19,590 --> 00:08:20,190 and so on. 121 00:08:20,190 --> 00:08:25,770 So it's got a few other more visual cues to it where adding an event listener to them. 122 00:08:26,370 --> 00:08:28,380 So that gives that makes them clickable. 123 00:08:28,560 --> 00:08:31,460 If they get clicked, it goes to a function called hip hop. 124 00:08:32,040 --> 00:08:36,930 We're getting a random time so we can also do floor or ceiling. 125 00:08:36,930 --> 00:08:38,040 It doesn't actually matter. 126 00:08:38,460 --> 00:08:40,350 This is just a random number. 127 00:08:40,350 --> 00:08:45,060 You can adjust this and make the game a little bit harder or easier depending on how challenging you 128 00:08:45,060 --> 00:08:45,680 want to make it. 129 00:08:46,200 --> 00:08:53,280 We're setting our random we're selecting a random object that we've got from the list of all the objects 130 00:08:53,280 --> 00:08:53,510 here. 131 00:08:53,730 --> 00:08:56,930 And so this is again, this is very dynamic. 132 00:08:56,940 --> 00:09:02,850 So if we get more items within that object list, they're just going to easily flow into the gameplay 133 00:09:03,300 --> 00:09:04,560 because we're using length. 134 00:09:04,710 --> 00:09:06,420 So we're not setting a default one. 135 00:09:06,600 --> 00:09:10,830 We're making it as dynamic as possible and as robust as possible. 136 00:09:11,370 --> 00:09:18,660 We're storing we're creating a new value in new pop object of old and we're storing that inner text. 137 00:09:18,900 --> 00:09:22,170 So that gives us the ability to remember whatever that value was. 138 00:09:22,500 --> 00:09:28,800 So when we don't have to show that icon anymore, then we can always go back to the original value that 139 00:09:28,800 --> 00:09:29,550 was sitting in there. 140 00:09:30,300 --> 00:09:32,730 And over here we're setting a value. 141 00:09:32,940 --> 00:09:35,030 So we're getting this from that object value. 142 00:09:35,130 --> 00:09:39,180 So each one of these items within that object have an icon. 143 00:09:39,190 --> 00:09:41,700 So that's the icon that's shown. 144 00:09:41,700 --> 00:09:43,940 And then this is the value that's associated with it. 145 00:09:44,400 --> 00:09:48,630 We've got our inner HTML where we're outputting the icon and the value. 146 00:09:48,630 --> 00:09:53,490 So that's visible to the player so the player knows what they can click and what they can't click. 147 00:09:54,090 --> 00:09:56,700 We're setting within the play area. 148 00:09:56,970 --> 00:10:01,260 We're setting a new value called inplay, and this is our time out function. 149 00:10:01,620 --> 00:10:07,260 And at times on whatever that random time that was created, we're removing. 150 00:10:07,590 --> 00:10:10,770 So once the timeout is done, it's going to run the code that's in here. 151 00:10:11,010 --> 00:10:12,780 So it runs all of this code, whatever. 152 00:10:12,780 --> 00:10:14,340 That time out is ready. 153 00:10:14,760 --> 00:10:16,800 We're removing the class of octave. 154 00:10:16,800 --> 00:10:19,940 So the same one that we added in, we're just removing it out. 155 00:10:20,130 --> 00:10:22,320 So it's not going to be popped up anymore. 156 00:10:22,680 --> 00:10:25,050 We're removing the ability to click on it. 157 00:10:25,650 --> 00:10:28,890 So we don't want people clicking on it afterwards, of course. 158 00:10:29,160 --> 00:10:33,180 And we're updating the inner text with that old value that we've got here. 159 00:10:33,180 --> 00:10:38,280 So basically resetting it back to how it was that we've got a few checks that we're doing here. 160 00:10:38,550 --> 00:10:42,300 So we're checking to see if the value is greater than zero. 161 00:10:42,510 --> 00:10:47,040 And if it is, that means that the player should have clicked it and because they didn't click that 162 00:10:47,040 --> 00:10:48,060 they lose a life. 163 00:10:48,210 --> 00:10:51,990 We update the score every time we make an adjustment to the score. 164 00:10:52,290 --> 00:10:59,370 And also, if the player has less than or equal to zero, then that means that's game over and we end 165 00:10:59,370 --> 00:10:59,790 the game. 166 00:11:00,150 --> 00:11:07,110 And if it's not game over, if the player is still not in GAMEOVER mode, then we start the pop once 167 00:11:07,110 --> 00:11:07,350 again. 168 00:11:07,350 --> 00:11:10,620 So we start the same function once again, game over. 169 00:11:10,920 --> 00:11:18,360 It sets that player game over to true and it toggles our review of our pages. 170 00:11:18,720 --> 00:11:24,450 So setting the main page to visible, so showing us our try again button hiding that game board. 171 00:11:24,960 --> 00:11:31,650 So we're removing the classic visible and then we're updating the value with the new game element with 172 00:11:31,650 --> 00:11:32,520 try again. 173 00:11:33,210 --> 00:11:34,260 So that's essentially it. 174 00:11:34,400 --> 00:11:40,730 And of course, you can adjust the values and variables that we set up within the game we saw earlier 175 00:11:40,730 --> 00:11:45,770 how we can update the rows and columns and that will update how many rows and columns we have in our 176 00:11:45,770 --> 00:11:46,190 board. 177 00:11:46,310 --> 00:11:49,010 So you can make it a little bit more challenging if you want. 178 00:11:49,280 --> 00:11:56,060 We're dynamically adjusting the width of the gameplay area and we're also centering it, so centering 179 00:11:56,060 --> 00:11:56,980 it within the elements. 180 00:11:57,200 --> 00:12:02,510 So even if you make the page really big, you see that it's always centered nice and neatly. 181 00:12:03,950 --> 00:12:11,600 We're also setting and creating these elements on the fly, so whenever we're resetting the gameboard, 182 00:12:11,810 --> 00:12:14,630 we clear it all out and we start again. 183 00:12:14,640 --> 00:12:21,230 So whenever we're doing start, we're simply building it out and then we're spending it to the main 184 00:12:21,230 --> 00:12:22,090 play area. 185 00:12:22,520 --> 00:12:28,090 So that's going to give us a brand new board each time freshly created using JavaScript. 186 00:12:28,550 --> 00:12:30,770 And this is done through the board builder. 187 00:12:30,920 --> 00:12:33,050 So we don't have to do this more than once. 188 00:12:33,050 --> 00:12:37,250 Once we start the game, the board is built and it's fully functional. 189 00:12:37,580 --> 00:12:42,200 But in case you do need to build the board again, you've got that within a function where you could 190 00:12:42,200 --> 00:12:44,480 rebuild it really easily if you want to do that. 191 00:12:45,870 --> 00:12:51,480 So hope you enjoyed this course and do try it out for yourself, I've included all of the source code. 192 00:12:51,630 --> 00:12:56,210 If you have any questions, please feel free to ask within the Q&A section. 193 00:12:56,220 --> 00:13:03,900 I'm always happy to answer any questions, clarify any content that is has been presented within the 194 00:13:03,900 --> 00:13:04,260 course. 195 00:13:04,950 --> 00:13:06,510 Thanks again for taking the course. 196 00:13:06,570 --> 00:13:07,410 See you next time.