WEBVTT

00:00:06.970 --> 00:00:13.090
Well right now we've got our game logic completed and we are ready to translate it into javascript's

00:00:13.160 --> 00:00:15.760
all day Querrey code.

00:00:15.780 --> 00:00:22.110
So if you go to our index those H.M.S. file at the end of the body elements we'll need to write our

00:00:22.110 --> 00:00:22.880
script.

00:00:22.900 --> 00:00:30.020
So already the script tags there and they are linking our index does SML file to an external file.

00:00:30.020 --> 00:00:36.270
This is from the previous month's projects so we going to change the name of this to equerry those days

00:00:37.530 --> 00:00:42.420
and we will create a new file called querido days

00:00:44.090 --> 00:00:47.190
.

00:00:47.420 --> 00:00:47.860
All right.

00:00:47.870 --> 00:00:51.350
So our code is going to go in there.

00:00:51.930 --> 00:00:58.770
So again we don't need the script tags we can write our code straight away.

00:00:58.770 --> 00:01:06.100
But first we are just going to write comments to understand the structure of our code.

00:01:06.120 --> 00:01:09.930
So first of all once we click on the reset button

00:01:18.720 --> 00:01:21.500
we are going to check if we uplink

00:01:24.730 --> 00:01:30.030
that if we are playing then we will reload the page

00:01:33.690 --> 00:01:38.730
if we are not playing then we are going to do a few things.

00:01:38.730 --> 00:01:43.200
So first of all we are going to show the trials left books

00:01:50.520 --> 00:01:56.610
and also we are going to change the button to all the button text

00:02:01.110 --> 00:02:02.020
to reset.

00:02:02.040 --> 00:02:02.340
Game

00:02:03.110 --> 00:02:07.490
.

00:02:08.300 --> 00:02:16.450
And also we are going to create a random fruits

00:02:20.970 --> 00:02:26.970
and then we are going to move the fruits down by one step

00:02:33.000 --> 00:02:38.090
and we're going to do that in loops every 30 seconds.

00:02:39.990 --> 00:02:45.030
So we will need to define this step and we get to do that later on in the code

00:02:48.090 --> 00:02:56.820
so we can either go for a fixed step and in that case the speed of our fruits is going to be the same

00:02:56.820 --> 00:02:58.080
all the time.

00:02:58.080 --> 00:03:06.180
Otherwise just before this action we can define a random step that we're going to use for the next fruit's

00:03:08.790 --> 00:03:14.160
which means that every new fruit's we send down is going to have a different speed.

00:03:14.190 --> 00:03:22.380
So before we continue this just name this step number one and this one.

00:03:22.380 --> 00:03:28.660
Number two I'm going to need this later to make our structure easier to read.

00:03:29.010 --> 00:03:36.300
So once we send all we moved our food down by one set we are going to check if the fruit is too low

00:03:36.320 --> 00:03:39.410
.

00:03:42.660 --> 00:03:46.170
So if the fruit is not too low

00:03:49.200 --> 00:03:57.570
then we are going to move it down by another step which means that we're going to repeat number two

00:03:57.580 --> 00:03:59.930
.

00:04:02.220 --> 00:04:12.570
Otherwise if the fruits is too low then we are going to ask the question Do we have any trials left

00:04:12.580 --> 00:04:15.060
.

00:04:17.640 --> 00:04:18.000
So

00:04:25.830 --> 00:04:39.570
if we do have trials left which means the answer is yes we are going to create a new random fruits remove

00:04:39.570 --> 00:04:40.350
one heart

00:04:42.900 --> 00:04:48.480
and repeat this which means that we're going to be going back to number one

00:04:51.670 --> 00:04:53.070
all repeat number one

00:04:59.280 --> 00:05:11.910
otherwise if we have no trials left then we are going to show game over and our bus and text is going

00:05:11.910 --> 00:05:13.040
to change to.

00:05:13.190 --> 00:05:15.450
Game.

00:05:15.750 --> 00:05:16.590
All right.

00:05:16.590 --> 00:05:20.260
Now let's move to the other sequence where we slice a fruits.

00:05:20.640 --> 00:05:28.530
So if we slice it fruit we do a couple of things.

00:05:28.770 --> 00:05:32.710
First we are going to play sound in the background.

00:05:33.420 --> 00:05:38.070
And also we are going to explode.

00:05:41.290 --> 00:05:48.180
All right now our J.A.G. code structure is completed and we are ready to start writing some J.A.G. code

00:05:48.190 --> 00:05:48.500
.

00:05:48.900 --> 00:05:56.730
But before doing that we need to go back to our index does ASML file and embed equerry just before our

00:05:56.730 --> 00:06:01.410
scripts so that we can use the equerry functions inside our scripts.

00:06:01.410 --> 00:06:09.150
So to do that I'm going to use the Google Ceridian for this so we can just go to Google and type equerry

00:06:09.360 --> 00:06:12.390
Google API or Sirian.

00:06:13.890 --> 00:06:30.710
And if you go to the first link then query and you can copy this line.

00:06:30.740 --> 00:06:39.330
Now of course equerry embedded into our e-mail file and we can start writing the query inside our javascript

00:06:39.330 --> 00:06:40.910
file.

00:06:40.920 --> 00:06:41.700
So first of all

00:06:44.670 --> 00:06:50.550
we need to wrap all our code inside the document ready function.

00:06:50.610 --> 00:06:54.030
If you remember the syntax was selects

00:06:59.520 --> 00:06:59.900
function

00:07:03.190 --> 00:07:09.140
and then penances could be brackets.

00:07:10.650 --> 00:07:14.810
So all Arjay Querrey code is going to go inside these curly brackets.

00:07:14.940 --> 00:07:20.760
So first once we click on the start reset button we are going to check if we are playing or not.

00:07:20.760 --> 00:07:24.840
So to do this we're going to need to access the button using ID.

00:07:25.710 --> 00:07:27.930
So you need to use d.j queries in Excel.

00:07:29.070 --> 00:07:37.720
And the syntax to access the button using ID is using number sign followed by the ID.

00:07:37.950 --> 00:07:43.020
And if you remember the ID of the button was start resets.

00:07:43.200 --> 00:07:53.640
So then we are going to use the click method as the action is clicking and this method is going to take

00:07:53.670 --> 00:08:02.950
as a barometer a function which we will execute once we click on the size we said.

00:08:04.110 --> 00:08:07.750
So inside the coded brackets of our function we are going to write our code.

00:08:07.760 --> 00:08:11.630
So first of all we are going to check if we are playing or not.

00:08:11.650 --> 00:08:17.770
So legist are these comments.

00:08:17.790 --> 00:08:23.680
Our code is now.

00:08:24.630 --> 00:08:34.970
So if we are already playing which means the answer is yes.

00:08:35.530 --> 00:08:39.950
So we're going to use as an IF statements for this.

00:08:39.960 --> 00:08:45.450
So to check if we are playing or not we don't need a variable like we did in the maths game.

00:08:45.690 --> 00:08:53.430
This variable we're going to call it's playing is going to be a boolean.

00:08:54.220 --> 00:08:55.060
All right.

00:08:55.200 --> 00:08:58.230
So when we load the page we are almost playing.

00:08:58.230 --> 00:09:02.730
So initially our variable is going to be false.

00:09:03.540 --> 00:09:13.230
So if we are playing means if playing equals we need two equals minus

00:09:17.040 --> 00:09:17.990
two.

00:09:18.560 --> 00:09:23.760
So if we are playing We're going to do we're going to reload the page.

00:09:23.760 --> 00:09:24.060
So

00:09:28.260 --> 00:09:34.750
to reload the page the syntax is location dot reload.

00:09:35.640 --> 00:09:39.290
This piece of code is going to reload our page.

00:09:39.330 --> 00:09:39.640
All right.

00:09:39.660 --> 00:09:45.320
Now if we are not playing then we are going to execute this list of actions.

00:09:45.990 --> 00:09:48.810
So we're going to use an else statements for not playing

00:09:57.320 --> 00:10:08.510
and before going through these actions we'll just change our playing mode to true as we are now playing

00:10:08.520 --> 00:10:10.120
.

00:10:11.450 --> 00:10:16.000
Because once we start the game we change from the non-playing mode to playing mode.

00:10:16.040 --> 00:10:22.920
Now our game is initiated next before showing the tiles left box.

00:10:23.210 --> 00:10:31.610
We are going to show or sets our score to zero so we can see zero there.

00:10:31.670 --> 00:10:33.130
But it's by default 0.

00:10:33.140 --> 00:10:35.580
Now he says he's using Jay Querrey.

00:10:35.660 --> 00:10:44.210
So first we're going to need a variable that we're going to call school.

00:10:47.360 --> 00:10:53.520
So we're going to say that to zero.

00:10:57.050 --> 00:11:04.460
And also we are going to change these elements to zero using equerry because if you remember the index

00:11:04.460 --> 00:11:12.500
was ACM and file we have written zero inside the span but as by default when we load the page we see

00:11:12.520 --> 00:11:18.840
zero but once we starts the game we want to set this to zero using j Querrey.

00:11:19.820 --> 00:11:25.580
So to do that we're going to access these elements using its ID

00:11:29.480 --> 00:11:36.290
which is score value.

00:11:37.220 --> 00:11:48.050
The idea of our elements and we are going to set the ASML of these elements using the same method to

00:11:48.260 --> 00:11:54.720
the value of the variable SCORE.

00:11:59.200 --> 00:11:59.510
All right.

00:11:59.510 --> 00:12:08.410
Now let's just add some space to our code to make it more readable.

00:12:13.080 --> 00:12:14.800
OK.

00:12:15.560 --> 00:12:21.890
Moving on we are going now to show the trials left box.

00:12:22.310 --> 00:12:29.740
Once we start the game we can see the number of hearts showing how many trials we've got left.

00:12:30.260 --> 00:12:35.740
So first we're going to make this box appear and then we're going to fill it with hearts.

00:12:35.900 --> 00:12:36.170
So

00:12:39.260 --> 00:12:40.820
to make the box appear

00:12:45.950 --> 00:12:47.900
we are going to access is using its ID

00:12:51.900 --> 00:12:56.360
and the idea of this box was trials left

00:12:59.840 --> 00:13:06.950
and then we're going to use a query function it's called show.

00:13:07.820 --> 00:13:10.920
So this function is going to show the box.

00:13:10.940 --> 00:13:13.010
So let's try this.

00:13:13.010 --> 00:13:19.480
If we save the code and click on the game button then we can see the box there

00:13:19.490 --> 00:13:26.250
.

00:13:26.720 --> 00:13:33.200
So we want to show 3 hearts at the beginning when we just saw the game and this means that you called

00:13:33.290 --> 00:13:34.700
three trials.

00:13:34.940 --> 00:13:42.740
When we initiate the game so to do this we're gonna need a variable that we're going to call trials

00:13:42.830 --> 00:13:47.210
lefts which will tell us how many trials we've got left.

00:13:47.840 --> 00:13:51.930
So initially we're going to set this variable to three.

00:13:52.170 --> 00:14:01.040
I was going to have three trials left and then we are going to append a number of hearts equal to the

00:14:01.070 --> 00:14:03.880
number of trials left to our box.

00:14:04.220 --> 00:14:10.150
So to do that we are going to use a for loop.

00:14:10.550 --> 00:14:18.370
So every time we go inside the loop we are going to add a little hearts to our trials left box to do

00:14:18.360 --> 00:14:25.590
it as we are going to use the method append to append an image to our box.

00:14:25.610 --> 00:14:35.300
So first we are going to access the box using its ID which is trials left and then we are going to use

00:14:35.300 --> 00:14:41.240
this method append to append the image.

00:14:41.240 --> 00:14:49.670
So at the beginning just to make things easy we are going to append a letter X with some space and then

00:14:49.670 --> 00:14:58.840
we'll change that later to an image so we can assess our barometer but we're going to go to zero initially

00:14:58.850 --> 00:14:59.280
.

00:14:59.930 --> 00:15:06.560
And the condition is going to be less than the number of trials left.

00:15:06.890 --> 00:15:11.720
And every time I go is up by 1.

00:15:11.810 --> 00:15:15.130
So let's try this save and make sure it's working.

00:15:15.490 --> 00:15:22.370
So if you click on the game you can see three x's that points

00:15:25.070 --> 00:15:37.310
later on we're going to use the same code two sets the number of hearts inside the trial box to two

00:15:37.310 --> 00:15:39.590
hearts or one hearts.

00:15:39.680 --> 00:15:44.180
So it would be easier to place this inside a function

00:15:46.480 --> 00:15:51.410
that we're going to call hearts.

00:15:51.960 --> 00:15:55.970
So we calling the function here and we are going to define the function at the end

00:15:55.970 --> 00:16:03.600
.

00:16:07.020 --> 00:16:10.610
And now we are just going to base our code that

00:16:18.400 --> 00:16:18.940
right.

00:16:19.130 --> 00:16:25.510
So rather than appending the letter X we would need to append a little hearts just like this.

00:16:25.520 --> 00:16:27.610
So you don't need a picture.

00:16:27.680 --> 00:16:35.260
So what we're going to do to create a new folder inside our product for the Nicola's images

00:16:38.380 --> 00:16:42.900
and we're going to add a picture in that.

00:16:43.340 --> 00:16:57.740
So we're going to go to our logo maker Web sites and look for a Hearts picture.

00:17:00.450 --> 00:17:03.510
Let's go for this one.

00:17:03.830 --> 00:17:05.660
We're going to change the color

00:17:10.150 --> 00:17:13.660
to a red color.

00:17:13.790 --> 00:17:17.680
Explain how you're going to save our picture.

00:17:18.380 --> 00:17:24.610
And just remember to copy the credits and place them somewhere on your Web site is really imposes