WEBVTT
0
00:00.420 --> 00:02.580
Guys, we've already come really, really far.
1
00:03.090 --> 00:08.090
We've done all of this and now we're on this stage, creating a scoreboard.
2
00:08.760 --> 00:13.760
So what we want is to be able to write some text in our program that keeps track
3
00:13.950 --> 00:18.390
of the score, of how many pieces of food we've actually managed to eat. Now,
4
00:18.390 --> 00:22.620
the score should update every single time we hit a new piece of food and it's
5
00:22.620 --> 00:25.560
going to stay there and keep updating itself
6
00:25.620 --> 00:27.480
every time we hit a new piece of food.
7
00:28.710 --> 00:32.730
Now this scoreboard is also going to be a turtle.
8
00:33.330 --> 00:38.160
So one of the things that you can do with your turtle is you can get it to write
9
00:38.250 --> 00:39.330
a piece of text.
10
00:40.140 --> 00:43.620
And this is what the method looks like in the documentation.
11
00:44.040 --> 00:48.570
You can tell it what it should write, what kind of alignment you want,
12
00:48.570 --> 00:50.250
do you want it to be in the center of the screen,
13
00:50.250 --> 00:54.570
on the left or right side of the screen? And then what kind of font you want?
14
00:55.110 --> 00:58.860
So the font name, font size and font type,
15
00:58.870 --> 01:02.820
so normal or heavy or bold or underlined,
16
01:03.510 --> 01:05.940
and we would call it more or less like this.
17
01:06.900 --> 01:08.520
So here's a challenge for you.
18
01:08.820 --> 01:13.820
I want you to go ahead and create a new file called a scoreboard.py.
19
01:15.420 --> 01:20.370
And inside this file, I want you to create a new scoreboard class.
20
01:20.850 --> 01:21.060
Now,
21
01:21.060 --> 01:26.060
this scoreboard class is going to inherit from the turtle class,
22
01:26.430 --> 01:28.560
just as we did with the food class.
23
01:29.190 --> 01:31.950
And then the scoreboard is going to be a turtle
24
01:32.130 --> 01:37.130
which knows how to keep track of the score and how to display it in our program.
25
01:38.670 --> 01:42.090
Feel free to choose whatever font you want, whatever size you want,
26
01:42.360 --> 01:46.740
but the end outcome we're looking for is something that looks a bit like this
27
01:47.160 --> 01:51.210
and the score is going to need to be tracked inside that scoreboard class.
28
01:51.540 --> 01:55.530
And it needs to be increased by one every single time the snake eats a piece of
29
01:55.530 --> 01:59.550
food. You're going to need the help of the documentation,
30
01:59.550 --> 02:04.470
you're going to need to read up on how this turtle.write method works,
31
02:04.860 --> 02:09.510
and you're also probably going to need this turtle.clear so that you clear
32
02:09.510 --> 02:11.910
the writing every time you update the score.
33
02:12.510 --> 02:16.110
Have a think about how you would solve this and then go ahead,
34
02:16.170 --> 02:17.820
pause the video and give it a go.
35
02:18.740 --> 02:22.070
[inaudible]
36
02:22.760 --> 02:23.090
All right.
37
02:23.090 --> 02:27.230
So the first thing I'm going to do is I'm going to create my scoreboard class.
38
02:27.860 --> 02:29.030
And as I mentioned,
39
02:29.030 --> 02:32.990
this class needs to inherit from the turtle class.
40
02:33.230 --> 02:34.760
So from the turtle module,
41
02:34.790 --> 02:39.790
let's get hold of the actual turtle class so we can use it inside this file.
42
02:40.640 --> 02:45.440
And then I'm going to add it to my scoreboard as the superclass.
43
02:46.040 --> 02:48.140
Now, if I create my inits,
44
02:48.230 --> 02:53.230
I can go ahead and use this light bulb to insert the superclass call.
45
02:54.290 --> 02:59.290
So now my scoreboard is a class that can do everything a turtle class do.
46
03:00.460 --> 03:05.460
And one of the things I want it to do is I want it to keep track of the score.
47
03:06.760 --> 03:08.830
So let's say it starts out at zero,
48
03:09.130 --> 03:14.080
and we want to be able to write this onto the screen. So we can say self.
49
03:14.080 --> 03:18.310
write, and let's use an f-string to say score,
50
03:18.790 --> 03:23.290
and then we can insert the self.score value in here.
51
03:24.010 --> 03:29.010
And then we can add whether if we want it to be aligned to the center,
52
03:29.410 --> 03:34.210
for example, and then we can also add a font if we need to.
53
03:34.600 --> 03:37.330
Let's use the same font as here, Arial,
54
03:37.660 --> 03:39.760
and then we're going to make the font size a bit bigger,
55
03:39.790 --> 03:41.350
and then we're going to keep it as normal.
56
03:42.100 --> 03:46.240
So I'm going to choose an Arial font, size 24,
57
03:46.540 --> 03:48.700
and then the style is going to be normal.
58
03:50.500 --> 03:51.820
And as you can see here,
59
03:51.820 --> 03:56.380
I'm getting a warning here and it's telling me that it expected a tuple,
60
03:56.590 --> 03:58.840
but instead it just got a single string.
61
03:59.110 --> 04:02.920
So let's just compare this against the documentation code
62
04:03.310 --> 04:07.690
and you can see that this is meant to be a tuple instead of just a single piece
63
04:07.690 --> 04:10.120
of string. So let me go ahead and fix that.
64
04:10.600 --> 04:13.300
Let's add some parentheses around this,
65
04:13.840 --> 04:16.840
and then this Arial is going to be a string,
66
04:17.140 --> 04:21.100
this 24 is going to be a number and the normal is going to be a string.
67
04:21.340 --> 04:23.170
And now our errors have gone away.
68
04:23.890 --> 04:26.770
So now going back to our main.py
69
04:27.130 --> 04:29.500
let's go ahead and create our scoreboard
70
04:31.330 --> 04:34.630
as an object from the scoreboard class,
71
04:34.900 --> 04:38.290
which of course means that we need to import it into this file.
72
04:38.530 --> 04:43.530
So from the scoreboard file import the Scoreboard class.
73
04:45.220 --> 04:48.760
And now if I run this code, somewhere in the middle
74
04:48.760 --> 04:50.560
there I've got a scoreboard,
75
04:51.130 --> 04:55.540
but because it's actually black, you can't really see it.
76
04:56.200 --> 05:01.200
It's really important that we change the color of the scoreboard turtle before
77
05:02.770 --> 05:04.270
we write the text,
78
05:04.510 --> 05:08.590
because if it was written as black and then we change it to white,
79
05:08.620 --> 05:10.330
you still won't notice a difference.
80
05:10.780 --> 05:15.780
So if I change the self.color right here to white and I hit run,
81
05:16.690 --> 05:19.000
then you can see that scoreboard showing up.
82
05:19.270 --> 05:23.530
But if I move this line of code to after we've written it,
83
05:23.830 --> 05:26.590
then it won't actually make a difference. It's still written in black
84
05:26.590 --> 05:29.770
somewhere on there. Now, in addition,
85
05:29.800 --> 05:34.800
we want to get rid of the turtle that shows up when we create our scoreboard
86
05:35.290 --> 05:37.990
because all we want it to do is we want it to write,
87
05:38.050 --> 05:42.850
we don't want it to actually show up a turtle. Self.hideturtle, and
88
05:43.210 --> 05:45.280
now that little arrow disappears.
89
05:45.790 --> 05:49.450
And we probably don't want this scoreboard to be bang in the middle.
90
05:49.540 --> 05:51.010
So let's move it.
91
05:51.340 --> 05:55.510
Let's tell it to go to a particular X and Y position.
92
05:56.560 --> 06:00.290
Now, in example, here, I've got it in the center, right at the top.
93
06:01.130 --> 06:05.960
So we can keep the X as zero, but let's move the Y further up to the top.
94
06:05.960 --> 06:10.700
So let's say something around 270. And now if we test it again,
95
06:10.970 --> 06:14.540
you can see that the turtle went to the top,
96
06:14.840 --> 06:19.490
but this happened after this line was already written. So again,
97
06:19.520 --> 06:22.520
this needs to happen before we write.
98
06:23.270 --> 06:26.390
And now if we refresh, you can see it's moved to the top,
99
06:26.840 --> 06:30.470
but it's also drawn on a path to do that. So instead of doing that,
100
06:30.500 --> 06:35.500
we can tell it to self.penup before it moves to this location.
101
06:38.480 --> 06:43.250
There we have it. We've got our score showing up at the top. Now,
102
06:43.250 --> 06:48.250
all that's left to do is to keep track of the score and to increase it whenever
103
06:48.620 --> 06:50.390
the snake hits a new piece of food.
104
06:51.020 --> 06:54.500
So we know that that happens inside this if statement,
105
06:54.860 --> 06:59.000
when the snake head collides with the food, then we refresh the food,
106
06:59.240 --> 07:01.730
but we also want to increase the score.
107
07:02.330 --> 07:07.250
So let's go ahead and create a function inside our scoreboard class called
108
07:07.280 --> 07:08.990
increase_score.
109
07:09.830 --> 07:14.830
And this function is going to take the self.score and add one to it.
110
07:17.360 --> 07:20.750
And then it's going to call self.write.
111
07:22.220 --> 07:24.590
So now back inside our main.py,
112
07:24.920 --> 07:29.920
we can get whole of our scoreboard object and tell it to increase score
113
07:30.860 --> 07:35.000
whenever the snake collides with the food. So let's test this again.
114
07:35.660 --> 07:39.110
And if I manage to hit the food,
115
07:42.730 --> 07:46.090
then you can see that the score is being updated,
116
07:46.330 --> 07:51.330
but what's happening is that the score is being written on top of the previous
117
07:52.210 --> 07:55.600
scores. So it's just all overlapping with each other.
118
07:56.980 --> 07:57.940
So instead,
119
07:57.970 --> 08:02.290
what we need to do is between each time we update the scoreboard,
120
08:02.620 --> 08:05.860
we actually have to delete what was previously on there.
121
08:06.910 --> 08:09.940
And because we've now got these two lines
122
08:09.970 --> 08:12.730
which are pretty much identical in two places,
123
08:13.240 --> 08:17.860
let's go ahead and create a function instead. We'll call update_scoreboard,
124
08:19.450 --> 08:23.560
and inside this function, we'll have our self.write.
125
08:28.720 --> 08:33.720
And we can call self.update_scoreboard here and also here.
126
08:39.880 --> 08:44.110
So now before we increase the score and call update scoreboard,
127
08:44.440 --> 08:49.440
we can call self.clear to clear the previous text that was written by this
128
08:50.620 --> 08:55.090
turtle, which is the scoreboard. Now, if we run this again
129
08:55.860 --> 08:57.840
you can see that when I do score,
130
08:58.140 --> 09:03.000
my scoreboard is wiped and then the new text code is written.
131
09:04.380 --> 09:07.560
So it doesn't overlap with the previous scoreboard.
132
09:08.730 --> 09:13.730
The final thing I want to do just as a finishing touch is I don't like having
133
09:13.830 --> 09:18.420
these hard-coded pieces of text inside the body of my programs.
134
09:18.810 --> 09:23.810
So instead it would be much better if we could take these pieces of texts out
135
09:24.240 --> 09:25.890
and create constants with them.
136
09:25.920 --> 09:30.920
So we could have one that's called ALIGNMENT set to center,
137
09:31.230 --> 09:33.120
and then another one called a FONT,
138
09:33.480 --> 09:36.240
which is going to be set to this tuple.
139
09:37.170 --> 09:40.350
And then I can use these constants down here,
140
09:40.350 --> 09:45.210
so align = ALIGNMENT, font = FONT. That way,
141
09:45.210 --> 09:49.380
when I decide that I want to change something about the alignment or the font,
142
09:49.620 --> 09:51.750
so for example instead of Arial,
143
09:51.780 --> 09:55.350
I might go for something that is a little bit more video-gamey
144
09:55.530 --> 09:57.420
sort of font like courier,
145
09:57.840 --> 10:01.560
then I don't have to dig through the body of my program to find out where it was
146
10:01.560 --> 10:04.170
defined. I can just look at the top
147
10:04.350 --> 10:09.350
which contains all the constants and then fix it right here. That shouldn't have
148
10:09.570 --> 10:14.570
changed any of the functionality. It's just made our scoreboard look a bit more
149
10:14.880 --> 10:18.480
video-gamey, and you can see how it works perfectly.