WEBVTT 00:00:06.820 --> 00:00:12.750 Now if we look at our code structure we will see that we have finished all these bits which corresponds 00:00:12.750 --> 00:00:21.180 to clicking on the stars reset button initiating the game sending fruit down taking care of the number 00:00:21.210 --> 00:00:29.730 of trials left feeling the trials left box and also showing the game over box at the end of the game 00:00:29.730 --> 00:00:30.660 . 00:00:30.750 --> 00:00:39.690 So the only thing left is the code corresponding to slicing a fruit now before going there I just mentioned 00:00:39.720 --> 00:00:42.720 that's from these points here. 00:00:42.750 --> 00:00:50.880 Our code is not inside the documents ready function so it's better that we place everything inside this 00:00:50.940 --> 00:00:58.950 function to make sure that we only run the query code once our page is ready which means that everything 00:00:58.950 --> 00:01:00.540 in the page is loaded. 00:01:00.960 --> 00:01:08.660 So Jake where we can detect this state of readiness for us because this function taking care of that 00:01:08.670 --> 00:01:08.910 . 00:01:09.120 --> 00:01:11.670 So we're going to do what it's going to cost this line 00:01:14.730 --> 00:01:17.960 and Blasius of the end of the document 00:01:21.090 --> 00:01:35.410 and I'm going to push all this code to the left using Schefter so that it's easy to read. 00:01:36.180 --> 00:01:38.390 So now we can delete all this. 00:01:38.700 --> 00:01:43.200 All these comments. 00:01:43.470 --> 00:01:53.160 So now we are going to write code for slicing a fruit so slice of fruits we will need to hover on the 00:01:53.190 --> 00:01:54.690 fruits. 00:01:54.890 --> 00:01:55.480 OK. 00:01:55.530 --> 00:01:59.100 And for this we're going to use the method mouse over. 00:01:59.100 --> 00:02:02.730 So first of all we're going to access the fruits using ID 00:02:05.740 --> 00:02:10.870 and then we'll use the method mouse over. 00:02:11.100 --> 00:02:18.480 So this method is going to take as a barometer the function to execute once we hover on the elements 00:02:18.490 --> 00:02:20.230 . 00:02:22.020 --> 00:02:30.720 So first once we hover the fruits we are going to increase the score by 1 which means that we're going 00:02:30.720 --> 00:02:36.490 to increase the variable SCORE by one and then we'll update the ASML elements. 00:02:36.660 --> 00:02:48.690 So first we'll increase the variable value by 1 and then we can access the elements of ID score value 00:02:53.370 --> 00:03:03.480 which is this span and we'll change the email using the HMO method and change that to the updated value 00:03:03.480 --> 00:03:06.130 of the variable SCORE. 00:03:06.570 --> 00:03:11.160 So we are basing this call here. 00:03:11.890 --> 00:03:24.500 All right so if we saved this and right now we can see that our core goes up by 1. 00:03:24.810 --> 00:03:29.510 Once we over on the fritz. 00:03:29.760 --> 00:03:31.640 All right. 00:03:31.650 --> 00:03:37.400 Next we will need to play audio. 00:03:37.560 --> 00:03:46.840 Once we slice it fruits so to do this we are going to need some audio files. 00:03:46.890 --> 00:03:57.010 So first this creates a folder inside our product folder and call it audio. 00:03:58.530 --> 00:04:03.970 So inside this folder we're going to place some audio files. 00:04:04.470 --> 00:04:09.270 There is a good Web site we can use to download sound effects for free. 00:04:09.270 --> 00:04:11.920 It's called free download log. 00:04:12.540 --> 00:04:22.770 So if you go there and look for can view knife sword and then click on Creative Commons zero for licenses 00:04:22.780 --> 00:04:23.110 . 00:04:23.520 --> 00:04:28.470 So this will show up only the files we can download for free without having to give in our submission 00:04:28.470 --> 00:04:29.020 . 00:04:29.040 --> 00:04:32.780 So are we going to go for the first file. 00:04:32.880 --> 00:04:34.980 So if you can just download that on your computer. 00:04:35.370 --> 00:04:36.240 OK. 00:04:36.630 --> 00:04:48.550 So once you've done that then you will get a w a v file but this is not the best to use because most 00:04:49.060 --> 00:04:53.750 browsers they are compatible with B-3 and OJT. 00:04:53.770 --> 00:05:01.960 So what are going to do we are going to convert this file to two files one a P3 file and one G.G. file 00:05:01.960 --> 00:05:03.220 . 00:05:03.340 --> 00:05:11.020 So to do that we're going to use another Web site it's called Audio Odo's online mine site converts 00:05:11.040 --> 00:05:12.490 dot com. 00:05:12.970 --> 00:05:15.580 So you'll see a couple of links there. 00:05:15.610 --> 00:05:21.520 One link to convert to be three and one click to convert to OJD. 00:05:22.300 --> 00:05:27.110 So you can just go to these links and follow the SEPs is pretty easy and straightforward. 00:05:28.270 --> 00:05:33.250 And once you converted the file to two files 00:05:36.250 --> 00:05:41.790 you can place them on your desktop and change their names to slice fruits. 00:05:41.800 --> 00:05:44.720 So the first one is going to be an IP to refile. 00:05:44.790 --> 00:05:54.940 And the second one is going to be OJD file and then you can instruct them into your audio folder. 00:05:55.240 --> 00:06:00.920 And now we are ready to use these files. 00:06:01.210 --> 00:06:08.380 Next we're going to go to our indexed those HMO file and creates a new element at the end of the body 00:06:08.390 --> 00:06:08.900 . 00:06:09.400 --> 00:06:12.720 So this is going to be an overdue elements. 00:06:13.030 --> 00:06:16.570 They're going to use the audio tags. 00:06:16.590 --> 00:06:17.190 All right. 00:06:17.380 --> 00:06:21.050 And then inside these elements we're going to have a couple of elements. 00:06:21.370 --> 00:06:24.460 So each one of them is a source elements 00:06:30.280 --> 00:06:39.390 where we are going to place the source attributes. 00:06:39.870 --> 00:06:46.380 So for the first one we're going to go to audio and then slice through those and be three. 00:06:47.100 --> 00:06:56.170 And for the second one we're going to go to audio slice fruits those OJD. 00:06:57.110 --> 00:07:01.270 So most browsers they will work with either MP 3 0 0 Jiji. 00:07:01.390 --> 00:07:07.570 So first we will try and B-3 if it doesn't work our fallback back is going to be the OED file. 00:07:07.650 --> 00:07:08.350 OK. 00:07:08.920 --> 00:07:17.020 Now let's go back to our Jay Querrey file or before doing that is give an ID to our audio elements so 00:07:17.020 --> 00:07:23.350 that we can reverse the rates in the query code and I'm going to call it slice sound. 00:07:24.540 --> 00:07:29.950 So let's save control as and let's go to the query file now. 00:07:30.640 --> 00:07:40.580 All right so to play the audio we will need to access the audio elements using its ID. 00:07:41.020 --> 00:07:42.410 So there are two ways of doing this. 00:07:42.430 --> 00:07:52.960 We can either use the documents get element's my ID then we use the ID slice sound and then the method 00:07:52.960 --> 00:08:01.870 to use here is blate So this will play the audio for us if we want to use the J-curve selector 00:08:05.800 --> 00:08:09.660 like this. 00:08:09.910 --> 00:08:18.750 This is going to return an array and not really the ASML elements not the audio elements. 00:08:19.420 --> 00:08:23.150 So the first element of the array is going to be the audio Edmond's. 00:08:23.200 --> 00:08:31.330 So if you use the decrease Alexa you would need to use the index 0 as you're accessing the first elements 00:08:31.330 --> 00:08:32.700 of the array. 00:08:33.460 --> 00:08:35.370 OK so it comments one of these. 00:08:35.380 --> 00:08:40.190 Keep on your one that say. 00:08:41.020 --> 00:08:52.630 So now if we saw the game you can see that we can hear sound and it's cough also goes up by one. 00:08:52.930 --> 00:08:59.510 Every time we slice the foods we still don't see the animation of slicing the fruits. 00:08:59.540 --> 00:09:03.360 We haven't done that yet but the sound is working. 00:09:03.390 --> 00:09:07.550 The school is working. 00:09:08.030 --> 00:09:12.700 Out a little common they're saying play sound. 00:09:13.120 --> 00:09:14.050 OK. 00:09:14.170 --> 00:09:18.970 Now the only thing left is to explode the foods. 00:09:18.970 --> 00:09:27.080 So if you go to our final game once we slice of fruits there are few things happening. 00:09:27.220 --> 00:09:29.200 The fruits will stop going down. 00:09:29.360 --> 00:09:31.180 For us the big one. 00:09:31.750 --> 00:09:33.760 And then it's going to explode. 00:09:33.850 --> 00:09:40.070 Which means that we hide it through animation and then we send a new fruit. 00:09:40.630 --> 00:09:41.600 OK. 00:09:41.890 --> 00:09:46.300 So let's do this the easy way first. 00:09:46.360 --> 00:09:49.300 Without any animation. 00:09:49.300 --> 00:09:54.990 So we're going to make the fruit stop going down 00:10:01.480 --> 00:10:05.320 stop it. 00:10:06.190 --> 00:10:06.890 OK. 00:10:06.910 --> 00:10:12.520 So to do this we are going to use the function stop action 00:10:15.850 --> 00:10:20.210 if we go to this function. 00:10:20.690 --> 00:10:22.590 We'll see what we doing two things. 00:10:22.720 --> 00:10:27.010 We are stopping the fruits from going down. 00:10:27.010 --> 00:10:29.320 And also we are hiding the fruits. 00:10:29.940 --> 00:10:32.780 OK so he's doing two things for us. 00:10:33.890 --> 00:10:35.630 OK. 00:10:37.280 --> 00:10:44.380 So stopping the fruits and hidings and then we're going to send a new fruits 00:10:48.280 --> 00:10:49.170 to do that. 00:10:49.210 --> 00:10:50.320 We're going to use the function 00:10:53.960 --> 00:10:56.940 satisfaction. 00:10:58.630 --> 00:11:00.220 So let's save and try this 00:11:07.670 --> 00:11:14.760 case we can see that once we slice a fruit it appears and we sell a new fruit. 00:11:14.790 --> 00:11:17.020 And our school goes up by 1. 00:11:17.410 --> 00:11:19.770 But this is not exactly what we want. 00:11:19.930 --> 00:11:21.650 We want to play animation. 00:11:22.120 --> 00:11:23.360 OK. 00:11:24.100 --> 00:11:26.020 And then send in your efforts. 00:11:26.680 --> 00:11:27.520 So to do this 00:11:30.310 --> 00:11:40.480 we are going to stop the fruit using the first bit of our stop action function which is to stop the 00:11:40.780 --> 00:11:43.060 sets interval action 00:11:52.270 --> 00:11:54.290 that's going to stop the fruits. 00:11:55.200 --> 00:11:55.930 OK. 00:11:56.410 --> 00:12:03.760 And then we are going to hide the fruits through animation. 00:12:04.600 --> 00:12:09.740 To do that we're going to access the fruits using his ID 00:12:14.670 --> 00:12:20.260 and then we're going to use the method height by this time our method is going to take a couple of promises 00:12:20.280 --> 00:12:20.790 . 00:12:21.280 --> 00:12:25.140 So the first Promissary response to the animation so we're exploring the fruits. 00:12:25.150 --> 00:12:27.910 So it's going to be explode. 00:12:28.530 --> 00:12:33.740 The second barometer is going to be the duration of our animation and we're going to go for 500 milliseconds 00:12:33.750 --> 00:12:35.450 . 00:12:35.750 --> 00:12:36.640 OK so this is 00:12:39.370 --> 00:12:41.730 slicing the for. 00:12:43.440 --> 00:12:45.070 OK. 00:12:45.190 --> 00:12:48.250 And then we're going to send you fruits. 00:12:48.400 --> 00:12:59.800 So if we do this straight away it's going to be executed at the same time that we start the animation 00:12:59.850 --> 00:13:01.410 . 00:13:01.400 --> 00:13:02.630 OK. 00:13:03.040 --> 00:13:04.120 We don't want that. 00:13:04.480 --> 00:13:07.980 You want to wait until the animation is finished. 00:13:07.990 --> 00:13:13.080 So after 500 milliseconds and then we can send you foods. 00:13:13.120 --> 00:13:23.220 So if you remember we are going to use a function said time out which will take a couple of times. 00:13:23.290 --> 00:13:27.640 So the first part I would say is going to be the function to execute in our case we want to execute 00:13:27.690 --> 00:13:30.010 the function Starns action. 00:13:30.630 --> 00:13:38.780 And the second problem is is the amount of time we're going to wait before executing this function. 00:13:38.920 --> 00:13:40.160 So it going to happen here. 00:13:40.450 --> 00:13:50.070 We will play animation which will take 500 milliseconds and we will wait during those five hanami seconds 00:13:52.150 --> 00:14:02.200 and then once the animation is done after 500 then we can play or execute this function. 00:14:02.590 --> 00:14:08.440 So just before we continue you would have noticed that this is the first time we use the function hide 00:14:08.770 --> 00:14:12.490 using two promises like this. 00:14:12.550 --> 00:14:19.120 So if we use equerry only it's not going to work. 00:14:19.120 --> 00:14:26.030 And the reason why is because this way of using the function hide comes with the package of the Jake 00:14:26.040 --> 00:14:32.770 where you right which we haven't embedded in our code at the moment so if you use the function like 00:14:32.770 --> 00:14:34.590 this without embedding Jake where are you. 00:14:34.840 --> 00:14:37.510 It's not going to work and we get an error. 00:14:37.510 --> 00:14:42.540 So we will need to embed Jake where you are. 00:14:43.360 --> 00:14:45.550 So let's go to the Google sidin 00:14:49.780 --> 00:14:53.960 and get the links from there. 00:14:53.980 --> 00:14:59.290 So if you click on the where you are you'll see a couple of links the one for this Yesus and one for 00:14:59.290 --> 00:15:00.350 the javascript's. 00:15:00.760 --> 00:15:07.690 We only need the javascript components if you want to use the C Ss components you can displace it in 00:15:07.690 --> 00:15:09.670 the head elements. 00:15:09.880 --> 00:15:20.590 OK so I'm going to copy that right after the query components because the square is using functions 00:15:20.860 --> 00:15:25.650 from the equerry. 00:15:29.320 --> 00:15:30.180 OK. 00:15:30.490 --> 00:15:39.210 And if you don't you can also copy the C Ss components in the head elements although we don't need that 00:15:39.220 --> 00:15:42.780 really. 00:15:46.030 --> 00:15:53.380 OK so you would need that if you want to use any other functionalities in the SS components. 00:15:53.380 --> 00:15:55.600 OK now let's save this. 00:15:56.550 --> 00:16:00.820 Let's go back to Jay Querrey file savings as well. 00:16:00.820 --> 00:16:03.340 Now let's try our game. 00:16:04.420 --> 00:16:06.560 So everything now is supposed to work. 00:16:06.910 --> 00:16:08.850 So Funimation is working. 00:16:09.340 --> 00:16:09.900 OK. 00:16:09.920 --> 00:16:13.260 See that's our school is working as well. 00:16:13.300 --> 00:16:17.320 The tiles left are supposed to work. 00:16:17.350 --> 00:16:18.360 They see. 00:16:18.660 --> 00:16:19.710 Yes. 00:16:20.110 --> 00:16:22.500 So we are getting fruits and different speeds 00:16:25.540 --> 00:16:32.130 and also our game over is supposed to work. 00:16:32.410 --> 00:16:38.750 So he's working the resets game is working as well and our game is now complete. 00:16:39.370 --> 00:16:40.770 So what we can do now. 00:16:41.230 --> 00:16:50.050 You can upload all the files to your server and share the game with your friends family and the whole 00:16:50.050 --> 00:16:51.370 world. 00:16:52.240 --> 00:16:59.420 Congratulations you have just created a nice web site using a Chevelle CSSA de Querrey and Jake where 00:16:59.430 --> 00:17:05.910 are you why you built a web site with nice decoration using a shemale and see SS. 00:17:05.930 --> 00:17:11.360 Also you managed to play sound using a shemale and Jay Querrey. 00:17:11.950 --> 00:17:16.070 You managed to show and hide elements with timing events. 00:17:16.180 --> 00:17:22.100 Also you played nice animations using equerry and Jake where you are. 00:17:22.780 --> 00:17:28.540 So if you change the design or the logic of the game or if you build something completely different 00:17:28.990 --> 00:17:31.530 then please share with me and other students. 00:17:31.570 --> 00:17:36.820 I look forward to seeing you finishing other projects and becoming a highly skilled and professional 00:17:36.880 --> 00:17:42.160 web developer.