1 00:00:01,020 --> 00:00:07,200 This lesson we're going to be adding in the score functionality into our game now, we could go into 2 00:00:07,200 --> 00:00:13,560 our TEMEL and add the score in here, but we're going to make this a little bit more interesting where 3 00:00:13,560 --> 00:00:16,020 we're going to add it in using JavaScript. 4 00:00:16,030 --> 00:00:22,440 So we're going to be building out our score area and we can do that where we build the board. 5 00:00:23,160 --> 00:00:30,480 So taking our play area object and we're going to set our score and this is where we're going to be 6 00:00:30,480 --> 00:00:33,780 doing document create element. 7 00:00:34,180 --> 00:00:38,850 So we haven't done this yet where we're going to create an element and then we're going to use it later 8 00:00:38,850 --> 00:00:44,860 on within our JavaScript succeeding span and play area score. 9 00:00:44,910 --> 00:00:50,250 So this is the one that we've just created we haven't placed yet within our HTML yet. 10 00:00:51,060 --> 00:00:53,750 Update the inner HTML of that element. 11 00:00:54,480 --> 00:00:58,500 So let's say press button to start. 12 00:01:00,280 --> 00:01:05,170 So just have some plain text there and play area stats. 13 00:01:06,040 --> 00:01:08,940 So this is the one that we created earlier. 14 00:01:08,950 --> 00:01:16,750 So let's play area status stats and what we did before where we use Append Child and JavaScript to add 15 00:01:16,750 --> 00:01:19,420 in our freshly created element. 16 00:01:19,720 --> 00:01:22,090 And that was the play area score. 17 00:01:23,260 --> 00:01:25,420 So we're adding it into our board. 18 00:01:26,430 --> 00:01:31,290 And now we're going to create another function that's going to update the score, so whenever we click 19 00:01:31,290 --> 00:01:35,490 it and we get a hit that we want to update our score. 20 00:01:36,450 --> 00:01:42,740 So creating an element update score and we can use play area score. 21 00:01:42,900 --> 00:01:51,780 So the one that we just created and take that in our HTML and setting our score to be equal to. 22 00:01:52,080 --> 00:01:55,440 And then we've got our score that we're holding within player score. 23 00:01:55,980 --> 00:02:02,300 And then we also have the lives or the number of misses that just call it lives. 24 00:02:02,310 --> 00:02:04,590 No player and that's items. 25 00:02:06,060 --> 00:02:12,810 So now whenever there's any time within the gameplay that we update the score, such as over here where 26 00:02:12,810 --> 00:02:20,450 we did a hit and we updated our score, we should follow that with the function to update the score. 27 00:02:20,910 --> 00:02:27,840 And also when we build out our board, we should update the score as well, is actually going to sit 28 00:02:27,840 --> 00:02:29,870 and start, which is a better place for it. 29 00:02:30,690 --> 00:02:31,950 So we start game. 30 00:02:32,130 --> 00:02:33,850 We're going to update the score as well. 31 00:02:33,870 --> 00:02:40,670 So we see our score is updating as we click the elements and we achieve scores within the game. 32 00:02:41,920 --> 00:02:48,760 Next, we need to take care of the missus or the lives so that there is a cost to missing it and we 33 00:02:48,760 --> 00:02:50,160 actually have an end to the scheme. 34 00:02:50,500 --> 00:02:55,450 So the objective is that if you miss three of the lives, then the game is over. 35 00:02:55,570 --> 00:02:56,680 So let's set that up. 36 00:02:56,680 --> 00:02:58,140 And that's coming up in the next lesson. 37 00:02:58,420 --> 00:03:00,310 So go ahead and add the score. 38 00:03:01,270 --> 00:03:06,640 And of course, you can go into your HTML and create it and link to it within the JavaScript, as we 39 00:03:06,640 --> 00:03:07,270 did before. 40 00:03:07,640 --> 00:03:13,240 And also it's always a good exercise, practice, exercise to build it out and then make use of it within 41 00:03:13,240 --> 00:03:13,640 your code. 42 00:03:13,660 --> 00:03:15,050 So go ahead and try that out as well.