WEBVTT

00:00:07.050 --> 00:00:13.710
Now starts we are going to create a project folder for our fruits game inside the Web site's product

00:00:13.710 --> 00:00:15.260
for that.

00:00:15.660 --> 00:00:23.870
So we are going to create a folder here and call it's fruitcake.

00:00:24.870 --> 00:00:32.990
Then Jay Querrey since we are going to be processing mainly daycare in these products.

00:00:33.080 --> 00:00:38.120
Then inside this folder we are going to have all our work files.

00:00:38.460 --> 00:00:46.360
So to save time we are going to get some inspiration from the maths game websites.

00:00:46.860 --> 00:00:56.090
So rather than starting our fruit's game from scratch we can get the index those ASML file the siestas

00:00:56.100 --> 00:01:03.650
files from the maths game and then treat them slightly so that we can get to the decoration of the fruit

00:01:03.670 --> 00:01:04.960
scale.

00:01:05.840 --> 00:01:06.590
All right.

00:01:06.870 --> 00:01:13.650
So let's go ahead and that's we're going to copy both the index was a shemale and the styling file from

00:01:13.650 --> 00:01:20.380
the mouse game and placed them in the game perfectly.

00:01:20.430 --> 00:01:24.120
Now let's open this folder using rockets

00:01:33.260 --> 00:01:39.180
and then if you go for the live preview

00:01:43.890 --> 00:01:52.620
then we get the maths game page skeleton and decoration and we'll need to change the index of HMO file

00:01:52.650 --> 00:02:01.860
and the siestas file so that we get to the skeleton and the creation of the fruit skein.

00:02:03.300 --> 00:02:09.450
So let's compare the two web sites and understand quickly what changes we need to go through to get

00:02:09.480 --> 00:02:11.860
from there to that.

00:02:12.360 --> 00:02:18.530
So first of all we can see as both pages they have the same background styling.

00:02:19.260 --> 00:02:25.570
And then there is a container wrapping all the elements of the game.

00:02:26.040 --> 00:02:33.300
So we are going to change this container slightly to make it bigger like that.

00:02:33.690 --> 00:02:39.660
Then we have the same school box so we're going to keep that one and make sure that he's well positioned

00:02:39.690 --> 00:02:41.800
inside the container.

00:02:42.660 --> 00:02:52.260
And then we are going to keep the same start button will keep the instruction box but we'll get rid

00:02:52.260 --> 00:02:56.510
of the four boxes because we don't need them anymore.

00:02:56.870 --> 00:03:03.570
And we will use the old question box to create this white box.

00:03:04.080 --> 00:03:07.860
The game over Dave is already here is just hidden.

00:03:07.860 --> 00:03:14.970
We are just going to make it bigger and change the properties so that is a sensitise and is called the

00:03:14.970 --> 00:03:17.040
right images.

00:03:17.310 --> 00:03:25.200
Also if you look at the first game there is a new div there for the trials left.

00:03:25.200 --> 00:03:31.680
So we're going to need to create does Dave and we can use the time remaining Dave to create that.

00:03:31.710 --> 00:03:35.090
Dave it is there at the moment is just here.

00:03:35.790 --> 00:03:42.990
So let's go ahead and start making these changes first we are going to change the properties of the

00:03:42.990 --> 00:03:48.470
container so that we can get the right dimensions quite big.

00:03:49.080 --> 00:03:53.400
So we will need to change the width and the height as well.

00:03:53.550 --> 00:04:00.910
And also the margin this time is going to be a lot smaller.

00:04:00.930 --> 00:04:01.580
All right.

00:04:01.650 --> 00:04:05.480
So let's go ahead and make these changes.

00:04:05.700 --> 00:04:18.590
So for the heights we're going to go for 500 or 600.

00:04:20.040 --> 00:04:22.610
Let's change the margins so that we can see everything.

00:04:22.860 --> 00:04:25.140
So the money is going to be really really small.

00:04:25.200 --> 00:04:28.320
We're going to go probably for 20

00:04:31.380 --> 00:04:33.330
pixels for the top and bottom

00:04:36.360 --> 00:04:40.010
or even less and that's only 10 pixels.

00:04:41.280 --> 00:04:50.970
And for the width you make it slightly bigger and destroy 700

00:04:58.530 --> 00:05:01.750
or even slightly bigger than that 750

00:05:06.630 --> 00:05:08.190
that looks fine now.

00:05:09.010 --> 00:05:14.060
So we're OK with the container div now.

00:05:14.200 --> 00:05:16.230
Now let's move to the school.

00:05:16.270 --> 00:05:19.430
Dave so we can see this at the moment.

00:05:19.450 --> 00:05:21.590
It's not well positioned.

00:05:21.790 --> 00:05:24.640
So we need to push it to the right.

00:05:25.240 --> 00:05:36.940
So we're going to go to the left property of our elements and change that to 600 for instance even more

00:05:37.970 --> 00:05:41.990
700.

00:05:42.820 --> 00:05:45.340
And that looks fine now.

00:05:45.340 --> 00:05:50.530
OK.

00:05:50.770 --> 00:05:57.340
Now let's move to the why Steve so we say that we're going to be using the old question Dave to create

00:05:57.400 --> 00:05:57.810
this.

00:05:57.820 --> 00:05:58.770
Why Steve.

00:05:59.170 --> 00:06:03.340
So we're going to need to change the background of the question Dave.

00:06:03.940 --> 00:06:07.820
So it's going to be white.

00:06:08.500 --> 00:06:13.210
And also we're going to need to change the width and height.

00:06:13.360 --> 00:06:21.610
So for the width let's make it bigger and go for 600 and for the height.

00:06:22.060 --> 00:06:26.220
Let's go for 300.

00:06:27.340 --> 00:06:31.610
This chick does is make it slightly bigger.

00:06:31.740 --> 00:06:38.950
So for the width we're going to go for 650 high it's 400

00:06:41.330 --> 00:06:46.000
and then it looks fine.

00:06:47.560 --> 00:06:51.530
We say we don't need these four boxes anymore.

00:06:52.040 --> 00:06:57.920
Just take them out of the index those ACBL file here they'll

00:07:02.000 --> 00:07:02.840
pay

00:07:09.390 --> 00:07:17.730
and let's change the text inside the instruction box and also change the title to it's game.

00:07:17.780 --> 00:07:21.570
It starts with a title.

00:07:23.260 --> 00:07:29.440
It's going to be it's game and the text inside that box is going to be

00:07:33.190 --> 00:07:34.170
cut through it's

00:07:36.550 --> 00:07:41.070
.

00:07:41.880 --> 00:07:43.500
And we're almost there

00:07:48.750 --> 00:07:51.700
now we need to look at our game over box.

00:07:52.030 --> 00:07:54.610
So let's make it visible

00:07:58.860 --> 00:07:59.500
first

00:07:59.630 --> 00:08:06.990
.

00:08:09.290 --> 00:08:17.920
So it will need to sense rates and change the dimensions as well.

00:08:17.920 --> 00:08:21.080
So let's change the top and left properties.

00:08:21.130 --> 00:08:24.790
So if we go for 150

00:08:27.260 --> 00:08:27.580
most likely

00:08:30.310 --> 00:08:38.020
160 170 that looks fine.

00:08:38.230 --> 00:08:40.950
The left's position.

00:08:41.350 --> 00:08:42.400
It's called

00:08:45.970 --> 00:08:47.610
more hundred

00:08:50.380 --> 00:08:52.840
four hundred thirty

00:08:56.650 --> 00:09:03.200
four hundred forty.

00:09:03.640 --> 00:09:11.410
Most likely more are going to go four hundred forty five for the top position

00:09:11.410 --> 00:09:17.650
.

00:09:17.650 --> 00:09:18.130
Let's go.

00:09:18.130 --> 00:09:20.380
Four hundred eighty

00:09:24.100 --> 00:09:26.950
.

00:09:27.060 --> 00:09:31.880
Was one hundred seventy six percent.

00:09:33.520 --> 00:09:34.130
OK that's fine.

00:09:34.130 --> 00:09:38.140
And for the dimensions we can leave the machines as they are.

00:09:38.140 --> 00:09:41.230
So we're OK with the game over the box.

00:09:41.260 --> 00:09:46.570
Now the only thing left is the trials left box.

00:09:46.630 --> 00:09:52.690
So if you remember we had a time remaining box there so we can use those books to create our new trials

00:09:52.720 --> 00:09:55.130
left box.

00:09:55.180 --> 00:09:59.240
So if you go to our indexes table file on time we read the books.

00:09:59.260 --> 00:10:01.610
Is there other movements.

00:10:01.660 --> 00:10:12.970
It's hidden because it's God's display set to none.

00:10:13.180 --> 00:10:15.360
I can this come.

00:10:15.410 --> 00:10:17.800
Well no no we can see it.

00:10:18.010 --> 00:10:23.880
So I will just change the properties so that it's there this time and also change the background color

00:10:23.880 --> 00:10:24.150
.

00:10:24.350 --> 00:10:35.550
And so first let's change the idea of this element to trials left rather than remaining in the simplified

00:10:35.650 --> 00:10:37.650
as well.

00:10:38.980 --> 00:10:41.680
And this echoes all the text inside

00:10:44.570 --> 00:10:46.870
.

00:10:46.960 --> 00:10:49.830
Let's change the width.

00:10:50.080 --> 00:10:58.180
We need a smaller with let's go for 80 pixels.

00:11:00.900 --> 00:11:05.260
It looks fine to place our element right there.

00:11:05.260 --> 00:11:09.310
We're going to do we're just going to make sure that the div

00:11:12.230 --> 00:11:16.380
is at the beginning of our consigner or if we want.

00:11:16.460 --> 00:11:25.130
Right after this call and we can get rid of the top and left properties

00:11:33.160 --> 00:11:35.030
and then we can see right there.

00:11:35.510 --> 00:11:42.270
And finally we need to change the background color and have the same background color as the squeezebox

00:11:42.790 --> 00:11:49.050
it is copied from the score div and that's the one

00:11:55.440 --> 00:12:00.600
and then copy that.

00:12:02.000 --> 00:12:05.060
So it will keep the putting in pixels.

00:12:05.270 --> 00:12:14.930
But once we are the pictures these little hearts then the height is going to be the right height.

00:12:14.980 --> 00:12:20.430
So for now we're going to set the display to none.

00:12:20.740 --> 00:12:26.120
And when we do the same thing for the game of it.

00:12:28.330 --> 00:12:38.860
And now our page structure and decoration is done and we are ready to go through the logic of our game

00:12:38.880 --> 00:12:44.350
.