WEBVTT

00:00:06.690 --> 00:00:15.490
Now we are going to drag the beachheads our images folder and change the name to hearts.

00:00:15.780 --> 00:00:21.960
So now we are appending an image instead of the letter.

00:00:22.020 --> 00:00:29.970
So I'm going to use the image tag and our source is going to be

00:00:33.720 --> 00:00:38.370
images and then Harte's those.

00:00:38.400 --> 00:00:47.170
So let's use single quotes outside so that can use the codes inside.

00:00:47.520 --> 00:00:56.550
So it's going to be images for slice hearts not DNG

00:01:00.180 --> 00:01:05.750
it's save this and try it's

00:01:09.790 --> 00:01:15.830
save it click on the start button and I can see three hearts but they are too big.

00:01:15.960 --> 00:01:23.150
So we're going to do we going to style this picture so that we can change the size.

00:01:23.430 --> 00:01:33.970
So let's go back to our senses file before going that is give our picture a class.

00:01:35.940 --> 00:01:37.590
So we're going to give it a class

00:01:41.340 --> 00:01:43.560
like for example.

00:01:43.800 --> 00:01:45.210
Now let's tile this class

00:01:53.340 --> 00:02:04.290
so let's give it away with all 16 pixels and also a height of 16 pixels which is equal to the font size

00:02:04.290 --> 00:02:13.950
of the text inside the school box so that they have both the same height and also they add some margin

00:02:15.770 --> 00:02:16.310
so

00:02:19.580 --> 00:02:22.100
top and bottom are going to go for zero.

00:02:22.600 --> 00:02:30.650
So already have some padding there for the books and for the left and right.

00:02:31.320 --> 00:02:38.820
We're going to go for five pixels so it's save and try this

00:02:42.050 --> 00:02:42.990
and it's here again

00:02:43.030 --> 00:02:49.180
.

00:02:53.040 --> 00:02:59.800
And then we can see our three little hearts there and the size looks fine.

00:03:01.020 --> 00:03:01.310
All right.

00:03:01.320 --> 00:03:08.000
Now the next step is to change the button text to resets game.

00:03:09.090 --> 00:03:15.990
So to do this we are going to access the button using its ID

00:03:22.320 --> 00:03:24.590
to reset the game.

00:03:25.080 --> 00:03:30.000
So the ID of the button is Starrs resets

00:03:33.030 --> 00:03:34.710
the number sign there.

00:03:35.490 --> 00:03:44.560
And we are changing the text to the game to do that going to use the c.m. method which will change the

00:03:44.740 --> 00:03:51.330
shemale inside the elements and we're going to say that to reset again.

00:03:52.140 --> 00:03:59.840
So if we save and try this now we can see that our button text change to reset game.

00:03:59.920 --> 00:04:02.410
All right.

00:04:02.850 --> 00:04:10.560
Now the next step is to start sending fruit's so going to create a random fruits and start moving it

00:04:10.560 --> 00:04:11.250
down.

00:04:11.430 --> 00:04:17.180
Doing all those checks and going through all this list of options.

00:04:17.400 --> 00:04:24.540
So it would be a good idea to place all these inside a function that we're going to call a start action

00:04:24.540 --> 00:04:34.590
.

00:04:34.590 --> 00:04:39.030
So let's define our function then the code here with other functions

00:04:50.880 --> 00:04:58.600
all right now we're going to need a few pictures for our fruits so to do this we are going to use a

00:04:58.660 --> 00:05:08.020
nice web site called Open clipart and you can use pictures from there for a limited commercial use.

00:05:08.020 --> 00:05:10.680
So you can use them freely as you want.

00:05:11.110 --> 00:05:16.360
So if you were to look for a seasoned picture I just type the name of the fruit you want and you can

00:05:16.360 --> 00:05:20.080
pick up any picture you want.

00:05:20.080 --> 00:05:20.380
All right.

00:05:20.410 --> 00:05:23.420
Then you can download it on your computer.

00:05:23.470 --> 00:05:26.220
Otherwise we can you can just use the same pictures.

00:05:26.230 --> 00:05:29.940
I'm going to upload with the source code.

00:05:30.130 --> 00:05:36.620
So once you've done that then you're going to get all these pictures OK.

00:05:36.740 --> 00:05:42.460
And very important these pictures or Usually they're going to be a bit big so they will take too much

00:05:42.460 --> 00:05:45.710
memory for use them so all we can do.

00:05:45.910 --> 00:05:50.300
We can open all of them using Bane's and resize them.

00:05:50.920 --> 00:05:59.920
So we are going to resize them all by giving them a horizontal value of how pixels are going explain

00:06:00.010 --> 00:06:05.750
later why we want the horizontal values to be the same for all fruits.

00:06:06.060 --> 00:06:11.160
Click on OK and then control as to save and close.

00:06:11.380 --> 00:06:14.760
So we're going to post the video now and do the same thing for all the other pictures.

00:06:14.770 --> 00:06:20.040
All right now we've got all our pictures resized and ready to be used.

00:06:20.040 --> 00:06:26.170
So going to place them main site our images folder.

00:06:28.900 --> 00:06:34.280
And now we are ready to use them from within our code right now.

00:06:34.300 --> 00:06:39.360
We'll need to generate a random fruit so to do that.

00:06:39.550 --> 00:06:47.200
We're going to eat out a picture our containing div with a random source which is going to take one

00:06:47.200 --> 00:06:50.500
of these pictures but to start easy.

00:06:50.560 --> 00:06:52.700
Let's go for an apple.

00:06:52.930 --> 00:06:57.360
So we are going to append an image to this containing div.

00:06:57.610 --> 00:07:04.210
So if you look at this date in the index of HMO file it's goes an ID question from the previous projects

00:07:04.660 --> 00:07:07.580
they just change that to fruit's container.

00:07:08.020 --> 00:07:09.050
That's better.

00:07:09.550 --> 00:07:13.940
And let's add an apple to this fruit container.

00:07:14.260 --> 00:07:19.490
So to do that we are going to access the first container using ID.

00:07:21.580 --> 00:07:24.090
And we're going to use the append method

00:07:27.130 --> 00:07:31.230
and we're going to use the same syntax we use there.

00:07:32.730 --> 00:07:39.340
So we depending on image of source images and we go in for an apple.

00:07:39.340 --> 00:07:48.910
So it's going it's going to be apple those B.A. and is given a class fruits that we can use later to

00:07:49.720 --> 00:07:52.210
style these fruits.

00:07:52.210 --> 00:07:56.140
So now if we save this and

00:07:59.590 --> 00:08:04.780
refresh the page we can see the containing div and the reason why is because in the C S S file it's

00:08:04.780 --> 00:08:09.080
still called question.

00:08:09.100 --> 00:08:12.910
So let's change that to fruits contain That's better.

00:08:13.510 --> 00:08:13.770
OK.

00:08:13.890 --> 00:08:16.510
So let's save that and refresh the page.

00:08:16.840 --> 00:08:21.220
Now if we start the game we can see an apple there.

00:08:21.280 --> 00:08:26.600
So what we have done here we have added a new element of fruits container.

00:08:26.800 --> 00:08:28.150
So it is one way of doing.

00:08:28.330 --> 00:08:30.230
But it's not the best way.

00:08:30.370 --> 00:08:36.700
And the reason why is because every time the new element to our page we're going to be requiring more

00:08:36.760 --> 00:08:45.250
memory and are the only day in our game we're going to need to add fruits all the time.

00:08:45.280 --> 00:08:50.290
This means that we might have memory issues especially that we're going to be using some timing events

00:08:50.350 --> 00:08:51.550
later on.

00:08:52.300 --> 00:08:54.920
So there is another way of doing.

00:08:55.330 --> 00:09:01.900
I'm going to create an elements inside our Index was a shim file.

00:09:01.900 --> 00:09:08.850
I'm going to hide it and every time we need to show a Fruits we can to use those elements.

00:09:09.410 --> 00:09:16.450
That's going to appear and then we can pick up one of these images and put it in the source of that

00:09:16.630 --> 00:09:17.670
picture.

00:09:18.400 --> 00:09:20.180
So let's go ahead and do this.

00:09:20.350 --> 00:09:27.570
So we're going to go to the index that's actually a file go inside our food container creates an image

00:09:31.600 --> 00:09:34.940
earn give it's an I.D..

00:09:35.760 --> 00:09:40.270
And it's also give it a class.

00:09:41.290 --> 00:09:48.050
Well let's give him a class fruits and Id fruits one are going to use the class later on for recreation

00:09:48.050 --> 00:09:50.340
purposes.

00:09:50.450 --> 00:09:56.040
So if you go back to our Jay query or javascript's file.

00:09:56.840 --> 00:10:07.460
So rather than appending a new image to our fruit container we're going to do we're going to make the

00:10:07.460 --> 00:10:12.170
elements or the new elements that we have created going to make it show up.

00:10:12.230 --> 00:10:17.840
So originally it's going to have a display property none

00:10:21.240 --> 00:10:24.020
so resigning he had the fruits close.

00:10:24.230 --> 00:10:29.380
So the display is going to be set to none.

00:10:31.160 --> 00:10:39.980
And once we initiate the game it's going to show up and to us we are going to accessing access it's

00:10:39.980 --> 00:10:48.590
using its ID which is Route 1 and we'll use the method show.

00:10:48.590 --> 00:10:52.700
So if we save and some the game

00:10:56.000 --> 00:10:59.090
at the moment we can see the fruit.

00:10:59.360 --> 00:11:05.430
And the reason why is because our image doesn't have a source attributes.

00:11:06.080 --> 00:11:12.560
And since we don't have a defined source attributes as we going for a random fruit's we're going to

00:11:12.560 --> 00:11:17.250
use equerry to give our image a source attributes.

00:11:17.510 --> 00:11:20.270
So we are going to go for a function.

00:11:20.450 --> 00:11:23.980
We're going to call choose fruits.

00:11:24.830 --> 00:11:26.120
So we're going to call the function here

00:11:33.440 --> 00:11:38.240
and let's define the function

00:11:42.740 --> 00:11:47.780
which will generates a run of routes.

00:11:49.760 --> 00:11:56.440
So we're going to use the function keyword followed by the name of the function.

00:11:56.870 --> 00:11:59.470
Inside the brackets will place our code.

00:11:59.600 --> 00:12:09.020
So we would need to access the elements using ID which is fruit's one and then we're going to use the

00:12:09.050 --> 00:12:13.300
attributes method which will take a couple of parameters.

00:12:13.370 --> 00:12:22.690
The first one is source and the second one is going to be the source as abuse of our image.

00:12:22.910 --> 00:12:32.150
So to start this go for a specific image of an apple for example.

00:12:32.240 --> 00:12:38.100
So that's going to be images for Apple dot PFG.

00:12:38.210 --> 00:12:47.750
So if we save this and start a game then we can see an apple there but we would like to go for a random

00:12:48.410 --> 00:12:49.510
image.

00:12:49.910 --> 00:12:57.680
So to do this we are going to create an array at the beginning of our code

00:13:01.550 --> 00:13:03.920
and quality fruits.

00:13:05.000 --> 00:13:12.240
So inside this array we are going to place all the names of our fruits without the PMG

00:13:13.310 --> 00:13:22.040
.

00:13:22.260 --> 00:13:28.940
Now if we go back to our function rather than going for Apple we are going to cut our string here

00:13:35.330 --> 00:13:43.340
and we are going to access one of the fruits using the fruits right.

00:13:43.580 --> 00:13:56.780
So if we go for the elements of index 2 for example save and we can see cherries to go for elements

00:13:56.780 --> 00:14:04.390
of index 0 then there's going to be an Apple element of index 5

00:14:07.100 --> 00:14:11.720
and you can see that in orange OK.

00:14:12.110 --> 00:14:25.600
So we want this number to be randomly chosen between 0 and 8.

00:14:26.860 --> 00:14:32.310
Yes between 0 and 8 because we've got mine elements there.

00:14:32.680 --> 00:14:37.040
So the final elements go to an index of 8.

00:14:37.310 --> 00:14:43.150
So to do this we're going to use the method around them of math.

00:14:45.250 --> 00:14:58.140
Which will give us a number between 0 and 1 strictly less than 1 earned will multiply by 8 and we will

00:14:58.590 --> 00:15:05.460
place the whole thing inside another method of math which is round.

00:15:05.950 --> 00:15:12.080
And now we're going to get a whole number between 0 and 8.

00:15:12.090 --> 00:15:14.800
So now if we save and try again

00:15:19.150 --> 00:15:21.750
now we can see random fruits

00:15:26.790 --> 00:15:30.210
right now when we show our new fruits