WEBVTT

00:00:06.720 --> 00:00:09.570
All right so far we have made some really good progress.

00:00:09.570 --> 00:00:12.060
We managed to show our roots.

00:00:12.120 --> 00:00:19.650
We gave it a random picture using the fruits pictures that we have downloaded and also we managed to

00:00:19.680 --> 00:00:25.040
give it a random position horizontally and we gave it a top position as well.

00:00:26.090 --> 00:00:28.720
OK.

00:00:31.770 --> 00:00:38.790
Now we are ready to start moving our troops down south to do that.

00:00:39.210 --> 00:00:42.910
We will need to define a random step.

00:00:42.960 --> 00:00:50.310
The reason why is moving the fruit down means that we're going to move the fruit down by one step every

00:00:50.790 --> 00:00:53.600
10 millisecond for example.

00:00:53.760 --> 00:01:00.510
And if we have a fixed set then all the fruits are going to move down the same speed.

00:01:00.510 --> 00:01:07.620
So if we go for a random step then all the roots are going to have different speeds.

00:01:07.800 --> 00:01:20.490
So the next step here is to generate a random set.

00:01:21.730 --> 00:01:24.540
So we're going to go for a step between

00:01:27.120 --> 00:01:31.780
one pixel and six pixels for example.

00:01:32.310 --> 00:01:40.710
So we're going to need to generate a random number using the math not a random method.

00:01:41.180 --> 00:01:42.110
OK.

00:01:42.440 --> 00:01:51.360
So we need to use a variable here step that we are going to define at the beginning of our code

00:01:51.360 --> 00:02:01.550
.

00:02:02.730 --> 00:02:06.290
So this is going to return a number between 0 and 1.

00:02:06.300 --> 00:02:18.440
If you multiply that by 5 then we get a number between 0 and 5 and to get a random to replace this.

00:02:18.780 --> 00:02:27.960
Inside the math around method and now we getting around the math but we don't want numbers between we

00:02:27.960 --> 00:02:30.240
don't want a number equal to zero.

00:02:30.390 --> 00:02:35.040
So we want at least 1 to 1 to the final results.

00:02:35.230 --> 00:02:40.780
And now we're getting a step between 1 and 6.

00:02:41.040 --> 00:02:45.060
This is going to be changing this step.

00:02:45.190 --> 00:02:46.600
All right.

00:02:46.980 --> 00:02:52.190
Now we want to move the crude down by one step every 10 millisecond for instance.

00:02:52.470 --> 00:02:55.130
So we're going to use the function set interval.

00:02:55.170 --> 00:02:59.700
So rather than moving it down every 30 seconds then we go for 10 minutes.

00:02:59.700 --> 00:03:03.770
I can you can change that if you want.

00:03:03.840 --> 00:03:16.020
So we're going to use a variable action for this and we're going to raise it to the outputs of the set

00:03:16.050 --> 00:03:17.720
interval function.

00:03:18.330 --> 00:03:22.100
So again the settings of all function is going to take a couple of parameters.

00:03:22.170 --> 00:03:26.570
The first parameter is the function to execute.

00:03:27.610 --> 00:03:32.140
And the second parameter is the duration in milliseconds.

00:03:32.250 --> 00:03:34.220
So we want to execute this every 10 milliseconds.

00:03:34.260 --> 00:03:41.250
So that's going to be 10 or it will need to define this variable action at the beginning of the code

00:03:41.250 --> 00:03:45.080
as well.

00:03:45.390 --> 00:03:52.660
It's used all these sets interval functions.

00:03:52.920 --> 00:03:56.450
Now we are going to move the fruits down by one step.

00:03:56.610 --> 00:04:01.190
So to do this we are going to access the top property of our roots.

00:04:01.230 --> 00:04:07.980
So first we get to access the fruits using its ID and then we get to use the CSL method

00:04:11.120 --> 00:04:12.610
which will take a couple of times.

00:04:12.630 --> 00:04:21.260
So the first one is going to be top and the second promiser is going to be the new value of our top

00:04:21.300 --> 00:04:22.450
property.

00:04:23.100 --> 00:04:28.470
So the new value is going to be the original value of the property and to access that we're going to

00:04:28.830 --> 00:04:33.480
access the elements using his ID.

00:04:35.010 --> 00:04:45.720
And then we're going to use a method position which will return an object and this object has got one

00:04:45.720 --> 00:04:49.270
of its properties is top.

00:04:49.680 --> 00:04:53.640
And this is returning in the original top position of our elements.

00:04:53.700 --> 00:05:03.370
So we want the top elements or the top property to be set to the original value plus step.

00:05:03.420 --> 00:05:11.980
So if we save this and start again then we can see our fruit's is going down.

00:05:12.000 --> 00:05:15.540
So it's goes down by one step every 10 milliseconds

00:05:18.020 --> 00:05:19.640
.

00:05:20.480 --> 00:05:26.540
Now let's go back to our code structure and see what comes next.

00:05:26.540 --> 00:05:33.280
So every time we move the food down we are going to check if the fruits is too low.

00:05:33.440 --> 00:05:44.960
So the fruits is too low if the top position of our fruits is greater than the height of our fruits

00:05:44.960 --> 00:05:47.050
contain.

00:05:47.090 --> 00:05:47.390
So

00:05:51.770 --> 00:05:54.170
now we are going to check if the fruits is too low

00:05:54.170 --> 00:06:05.330
.

00:06:06.120 --> 00:06:07.700
So to do that we're going to check if

00:06:10.640 --> 00:06:19.050
the top position or the top property of our fruits which is this.

00:06:19.560 --> 00:06:27.290
So we'll check if that's greater than the height of our container and access that we can access our

00:06:27.530 --> 00:06:29.320
through container using ID

00:06:40.160 --> 00:06:45.930
and we use the method Height's which returns the heights of the elements.

00:06:45.950 --> 00:06:51.230
Now we are going to check if we have any trials left before doing that legist go back to our code and

00:06:51.230 --> 00:06:53.480
make sure that everything is readable.

00:06:53.540 --> 00:06:59.740
So we start sending fruit's here using the SAS action function.

00:07:00.260 --> 00:07:01.030
Okay.

00:07:01.160 --> 00:07:10.760
So first of all we are generating a fruits which means that we are showing the fruits we are choosing

00:07:10.790 --> 00:07:12.370
a random picture.

00:07:12.890 --> 00:07:16.970
And also we are assessing the random position.

00:07:17.150 --> 00:07:24.530
And then we are generating a random step and we start moving the fruit down by once every 10 millisecond

00:07:24.550 --> 00:07:25.870
.

00:07:27.170 --> 00:07:28.490
So first

00:07:31.810 --> 00:07:36.120
we move the food down by one step.

00:07:36.220 --> 00:07:43.350
It's put the comma in there and then we check if the fruits is too low.

00:07:44.000 --> 00:07:44.720
OK.

00:07:44.720 --> 00:07:52.340
If the fruits is too low then we are going to check if we have any trials left.

00:07:52.790 --> 00:07:59.120
If it's not too low meaning the answer is No then we are repeating number 2.

00:07:59.930 --> 00:08:05.830
And that's going to happen automatically because we are inside the set interval function.

00:08:05.880 --> 00:08:11.190
So if this condition is not verified we are just going to go back to the beginning and move the fruits

00:08:11.180 --> 00:08:14.900
by one step again and we continue like this.

00:08:14.930 --> 00:08:19.970
So now we are going to check if we have any trials left

00:08:25.110 --> 00:08:35.880
if we have any trials left then we are going to repeat number one which means creating a random fruit's

00:08:36.440 --> 00:08:39.080
otherwise we're going to show a game or so

00:08:44.690 --> 00:08:50.230
we're going to check if we have any trials left.

00:08:53.420 --> 00:09:02.060
So if we go to the final game we'll see that once we miss a fruit's if we have trials left then regenerate

00:09:02.060 --> 00:09:04.700
and other fruits and reduce the trials by one.

00:09:04.910 --> 00:09:09.260
Otherwise if we have no trials left then it's game over.

00:09:09.290 --> 00:09:12.330
So if

00:09:17.150 --> 00:09:31.340
we have trials left which means that the trials left variable is greater than one that's because once

00:09:31.350 --> 00:09:34.600
we have only one trial left it includes the current one.

00:09:35.100 --> 00:09:37.660
And that's when we when we get game over.

00:09:37.670 --> 00:09:43.940
So if the trials lives are strictly greater than one which means that we've got two trials left including

00:09:43.940 --> 00:09:52.940
the current one all three trials left then we're going to generate a new fruit's which means we are

00:09:53.880 --> 00:10:02.150
getting a new picture and also generating a new position and getting used to it and it's going to be

00:10:02.450 --> 00:10:03.510
all this piece of code

00:10:17.640 --> 00:10:25.910
otherwise if we have no trials left that's going to be else and that's going to be game over

00:10:30.280 --> 00:10:33.050
because we have no trials left.

00:10:34.310 --> 00:10:40.390
OK so let's go back to when we still have trials left.

00:10:40.790 --> 00:10:43.700
So once we generate a new fruit's

00:10:47.120 --> 00:10:49.630
our trials go down by one.

00:10:50.390 --> 00:10:57.980
And also we remove one little heart from our trials box so to do that

00:11:02.600 --> 00:11:12.170
first of all we are going to reduce the number of trials by one which means that we're accessing the

00:11:12.920 --> 00:11:28.970
trials left variable and we're reducing that by one and then we are going to use the function

00:11:31.430 --> 00:11:39.740
hearts which will just populates our trials left box with the right number of hearts

00:11:45.950 --> 00:11:48.860
and that's going to be populates

00:11:52.190 --> 00:11:54.170
trials left books

00:11:58.370 --> 00:12:02.520
if we have a look at our hearts function.

00:12:03.200 --> 00:12:13.100
We'll see that the function is only appending images to the trials left box which means that if we have

00:12:13.430 --> 00:12:21.780
two trials left and we have three hearts there then we're going to be adding another two hearts and

00:12:21.790 --> 00:12:23.200
that's not exactly what we want.

00:12:23.390 --> 00:12:31.820
So every time we run this function we will need to empty our books first before adding these hearts

00:12:31.850 --> 00:12:32.080
.

00:12:32.300 --> 00:12:38.780
So to do that we're going to add another spaceman's just before going inside the for loop to empty our

00:12:38.930 --> 00:12:40.800
trials left box.

00:12:40.910 --> 00:12:52.540
So we're going to access the box using its ID and then we are going to use a method called empty.

00:12:52.580 --> 00:13:02.210
So this method will empty Any several elements if it's applied to it.

00:13:02.210 --> 00:13:07.100
Now let's move to the else statement which corresponds to game over.

00:13:07.610 --> 00:13:13.730
So inside arccos trucks How is saying here that if we have no trials left then we show the game over

00:13:13.940 --> 00:13:18.440
message and we change the button text to Stars game.

00:13:18.590 --> 00:13:20.700
So let's have a look at this.

00:13:20.720 --> 00:13:29.510
So when the game is over we can see that's the game of the message shows up the button changes to SA's

00:13:29.510 --> 00:13:36.180
game and also we are going to hide the trials left box.

00:13:36.200 --> 00:13:42.900
Additionally we are going to set our playing valuable to false as we are not playing anymore.

00:13:43.280 --> 00:13:48.840
So let's go inside the else statement and do all this.

00:13:49.730 --> 00:14:02.290
So first of all we are going to set the variable playing to false as we are not playing anymore.

00:14:06.460 --> 00:14:14.390
Also we are going to change the text of our stars reset button

00:14:19.790 --> 00:14:25.090
to start the game using the shemale method

00:14:25.110 --> 00:14:31.110
.

00:14:37.580 --> 00:14:37.980
OK.

00:14:38.030 --> 00:14:45.780
And also we are going to show the game over message.

00:14:45.950 --> 00:14:55.310
So to do that we are going to use the method show so we access the div using its ID which is game over

00:14:56.840 --> 00:15:01.520
and we'll use the method show.

00:15:03.140 --> 00:15:11.330
And also we are going to change the ASML of the game of div to these two paragraphs.

00:15:12.230 --> 00:15:21.530
So again we're going to access the div using its ID and this time will use the ASML method and we are

00:15:21.530 --> 00:15:24.900
going to place a couple of paragraphs there.

00:15:28.870 --> 00:15:35.020
Say the first one is going to be game over.

00:15:35.080 --> 00:15:44.950
So in the process file we are using the transform to uppercase for this so we don't worry about the

00:15:44.950 --> 00:15:48.820
uppercase OK because it's already styled in the SS file.

00:15:49.210 --> 00:16:00.110
So the second paragraph he's going to say your score is whatever it's called.

00:16:00.130 --> 00:16:05.590
So we got to cut the string here

00:16:11.140 --> 00:16:15.460
and we're going to use the variable SCORE there.

00:16:17.030 --> 00:16:30.040
And very important we will need to stop the set interval function so we can use the function clear interval

00:16:30.040 --> 00:16:30.190
.

00:16:30.280 --> 00:16:32.500
But we are going to apply to this variable action

00:16:36.820 --> 00:16:38.860
as we don't need to

00:16:43.090 --> 00:16:44.700
drop of roots anymore.

00:16:45.220 --> 00:16:53.300
So as we don't need to move down our roots anymore.

00:16:53.710 --> 00:16:58.720
So just to make our code readable we're going to use a function for this.

00:16:58.810 --> 00:17:03.030
So we're going to call it stop action.

00:17:04.450 --> 00:17:07.720
So let's define this function at the end

00:17:10.810 --> 00:17:14.560
using the function keyword.

00:17:16.660 --> 00:17:26.830
So we're going to use the function clear interval applied to the variable action and also we need to

00:17:26.830 --> 00:17:28.300
hide our fruits

00:17:31.090 --> 00:17:35.380
using the hide method.

00:17:36.910 --> 00:17:45.580
Let's add a comment before the function saying stop dropping.

00:17:45.670 --> 00:17:46.010
It's

00:17:48.910 --> 00:17:54.190
ok to save our code and start the game and make sure that our code is working.

00:17:54.850 --> 00:17:57.410
So that's the first fruits we miss.

00:17:57.530 --> 00:18:01.550
That's another miss and it's another miss and it's game over.

00:18:02.080 --> 00:18:08.410
Our score is kept at zero because we haven't sliced a Fruits and we haven't written code that needs

00:18:08.410 --> 00:18:10.940
to be executed when we slice a fruit.

00:18:11.350 --> 00:18:13.280
OK.

00:18:13.660 --> 00:18:14.730
One detail here.

00:18:14.920 --> 00:18:22.150
Once the game is over we want to hide these trials left the box.

00:18:22.330 --> 00:18:28.130
So we aren't an extra statesman's just before stopping the action.

00:18:28.300 --> 00:18:30.490
Going to access the box using its ID

00:18:35.500 --> 00:18:43.780
and really use the function hide to hide it.

00:18:43.930 --> 00:18:44.830
So let's try again

00:18:44.830 --> 00:18:51.430
.

00:18:51.430 --> 00:18:58.110
Right now our box is hidden.

00:18:59.200 --> 00:19:04.340
Now if we start the game again you will notice does the game ever box is still there.

00:19:04.600 --> 00:19:15.520
So to avoid this we're going to go back to the code as we've written for starting the game and we'll

00:19:15.730 --> 00:19:22.030
add one step there which is to hide the game over box

00:19:28.590 --> 00:19:37.120
and as it does we're going to access the data using its ID which is game over and we'll use the method

00:19:37.760 --> 00:19:39.140
.

00:19:39.580 --> 00:19:41.710
And so if we try

00:19:45.660 --> 00:19:48.610
that we lost the game again.

00:19:48.610 --> 00:19:49.920
Now the gave me a box.

00:19:49.960 --> 00:19:50.560
Ms Appius