WEBVTT

0
00:00.270 --> 00:04.830
So now that we've created the screen we're ready to go ahead and create and move a

1
00:04.830 --> 00:06.180
puddle. So 

2
00:06.180 --> 00:09.180
the paddle that we're going to create is going to be on the right side.

3
00:09.480 --> 00:11.250
It's going to have a width of 20,

4
00:11.310 --> 00:16.310
a height of 100 and be positioned at 350 pixels on the X-axis and then 0 on

5
00:19.380 --> 00:23.280
the Y-axis. So this is the sort of positioning we're looking for.

6
00:24.000 --> 00:25.080
And additionally,

7
00:25.110 --> 00:29.520
we should be able to hit the up and down keys on a keyboard to move the paddle.

8
00:30.030 --> 00:34.080
Each key press should move the paddle up or down by 20 pixels.

9
00:34.740 --> 00:38.850
Have a think about how you might create the code for this and pause the video

10
00:38.940 --> 00:40.290
and complete the challenge.

11
00:44.190 --> 00:48.540
All right. So to create this paddle, it's going to be created as a turtle.

12
00:48.780 --> 00:53.780
So let's go ahead and create our paddle from the turtle class and I'm going to

13
00:54.600 --> 00:57.690
set the paddles shape to a square.

14
00:59.580 --> 01:04.530
In order to stretch it so that it's 20 by 100 pixels,

15
01:04.920 --> 01:09.920
remember that all turtles start off as 20 by 20

16
01:10.320 --> 01:12.540
so that means in the width

17
01:12.570 --> 01:17.570
we have to stretch it by five, and in the length, we leave it as it is in order to

18
01:18.450 --> 01:21.120
make it 100 by 20.

19
01:21.870 --> 01:24.840
So let's go ahead and hid up paddle.shapesize

20
01:25.290 --> 01:30.030
which is what we've been using so far. And then in terms of the stretch width,

21
01:30.090 --> 01:35.040
we're going to make that five. And then the stretch length is going to be one.

22
01:35.730 --> 01:40.320
Now we have to make sure that our paddle has a color of white

23
01:40.380 --> 01:45.380
so that it's actually visible when we run our code. And you can see there it is,

24
01:46.950 --> 01:49.650
there's our paddle. And as always,

25
01:49.740 --> 01:53.370
it gets initialized in the center at the coordinate (0, 0).

26
01:53.910 --> 01:57.030
So in order to move it to the position we want to,

27
01:57.300 --> 02:00.330
we have to get it to go ahead and pen up,

28
02:00.750 --> 02:05.750
and then we can tell it to go to the position that is 350 by 0,

29
02:07.530 --> 02:12.450
so 350 on the X-axis and 0 on the Y-axis, like that.

30
02:13.350 --> 02:16.320
Now, the next thing we need to do is figure out how to get it

31
02:16.320 --> 02:17.640
to move up and down.

32
02:18.150 --> 02:23.150
So, of course, we need some sort of way of getting our screen to listen for

33
02:23.970 --> 02:27.150
keystrokes. We're gonna call screen.listen

34
02:27.270 --> 02:31.290
and then we're going to call onkey in order to listen for the "Up" key.

35
02:31.830 --> 02:36.480
And then when that happens, we're going to get the paddle to go up. Now,

36
02:36.510 --> 02:40.770
remember as always, when you were using a function as a parameter,

37
02:41.100 --> 02:45.960
you don't want to add the parentheses. If you do, it won't work.

38
02:46.500 --> 02:49.380
Now let's create our go_up function.

39
02:50.010 --> 02:55.010
And this function is going to take our paddle and move it so that it goes to a

40
02:59.470 --> 03:04.150
new position. The new exposition is X not going to change.

41
03:04.210 --> 03:07.120
The only one that's going to change is the Y position.

42
03:07.750 --> 03:11.710
So the Y position is going to be the paddles current ycor,

43
03:12.280 --> 03:15.250
but it's going to go up, so it's going to need to

44
03:15.280 --> 03:18.190
plus let's say by 20.

45
03:18.940 --> 03:23.940
Now we can tell the paddle to go to its current paddle.xcor.

46
03:24.970 --> 03:29.290
So we're not changing that. And then to go to the new Y position.

47
03:29.980 --> 03:34.980
Now, this go_up function is going to be called whenever the Up key is detected.

48
03:35.740 --> 03:40.450
And if we copy this and we make a similar version of this function,

49
03:40.660 --> 03:45.550
which is called go_down and we can subtract 20 instead.

50
03:46.120 --> 03:50.320
So now we can copy this line and make it call

51
03:50.350 --> 03:54.160
go_down when the down arrow key is detected.

52
03:54.820 --> 03:59.020
So now we've created our paddle and when I hit up, it goes up, when I hit down

53
03:59.050 --> 04:03.070
it goes down. And this completes the first part of the challenge.

54
04:03.430 --> 04:06.430
But here's a question. When I hit run,

55
04:06.520 --> 04:09.850
you can see that the paddle first gets created in the center,

56
04:10.240 --> 04:13.720
and then it moves to the location where it needs to go to,

57
04:14.200 --> 04:18.400
which is 350 on the X-axis, 0 on the Y-axis.

58
04:18.940 --> 04:22.330
How can we get rid of this animation so that we don't have to look at the

59
04:22.330 --> 04:24.430
paddle move to the position?

60
04:24.850 --> 04:28.510
Have a think about what you've learned in previous lessons and see if you can

61
04:28.510 --> 04:32.950
solve this problem. All right.

62
04:32.980 --> 04:37.980
So you might remember from previous lessons that there is a tracer method on the

63
04:38.560 --> 04:41.380
screen which controls the animation.

64
04:41.920 --> 04:46.540
And in order to turn off the animation, we can put a zero in that method.

65
04:47.080 --> 04:49.450
But when we run our code, as it is right now,

66
04:49.480 --> 04:52.060
you'll see that there's no animation.

67
04:52.090 --> 04:54.880
There's not even a paddle of showing up anymore.

68
04:55.630 --> 04:58.180
Remember that when you turn off the animation,

69
04:58.390 --> 05:03.390
you have to manually update the screen and refresh it every single time. To do

70
05:04.120 --> 05:06.490
that, we'll need some sort of a while loop.

71
05:07.000 --> 05:10.750
And the while loop is going to check for some sort of variable.

72
05:11.140 --> 05:15.250
So let's create a variable called game_is_on and set it to true

73
05:15.820 --> 05:17.890
and while the game is on,

74
05:18.160 --> 05:22.660
then we're going to call screen.update. Now,

75
05:22.690 --> 05:25.690
if I run the code again, you'll see that my paddle

76
05:25.720 --> 05:30.700
now goes directly from the center to the position because the first thing

77
05:30.700 --> 05:33.100
that happens is the animation gets turned off,

78
05:33.460 --> 05:36.130
the paddle then gets created in the background

79
05:36.400 --> 05:41.080
and then finally it gets to this point where we actually update the screen and

80
05:41.080 --> 05:44.200
show everything that's happened in the background so far.

81
05:44.890 --> 05:49.120
Did you manage to complete this challenge and create the paddle and get it to

82
05:49.120 --> 05:51.760
move up and down using the keystrokes?

83
05:52.270 --> 05:57.070
If not be sure to review some of these methods in the turtle documentation and

84
05:57.080 --> 06:01.160
have a play around with the code until you're fully happy with what's going on

85
06:01.160 --> 06:03.130
so far. Now,

86
06:03.160 --> 06:07.840
if you had created the paddle in a separate file as a separate class,

87
06:08.170 --> 06:10.210
don't worry. We're going to do that next.

88
06:10.390 --> 06:14.590
We're going to refactor this code so that it's fully compliant with Object

89
06:14.590 --> 06:16.990
Oriented Programming. But if you've already done it,

90
06:16.990 --> 06:18.340
then you're just one step ahead.

91
06:18.700 --> 06:20.980
And that is where we're heading to in the next lesson.