WEBVTT 0 00:00.610 --> 00:01.790 Welcome back! 1 00:01.810 --> 00:03.520 I hope you solved the challenge. 2 00:03.790 --> 00:04.540 If we you didn't, 3 00:04.540 --> 00:05.480 don't worry. 4 00:05.540 --> 00:06.880 You can try it next time again. 5 00:07.370 --> 00:07.840 Okay. 6 00:07.930 --> 00:14.990 Let's check out my solution now. As I said I use a two dimensional bool slice to keep track of 7 00:14.990 --> 00:15.550 the ball, 8 00:15.590 --> 00:22.090 like so. This slice is going to store the rows and each row will be an inner slice. 9 00:22.160 --> 00:28.430 Remember: For multidimensional slices, we also need to initialize each one of the inner slices. 10 00:28.970 --> 00:30.250 Let's do that in a loop, 11 00:30.290 --> 00:30.770 like so. 12 00:35.430 --> 00:43.290 For example, board[4][2] allows me to access the cell in the fifth column and in the third row and so on. 13 00:43.290 --> 00:44.930 By the way, 14 00:44.960 --> 00:48.410 you know me, I don't like magical values in the code. 15 00:48.410 --> 00:50.720 The dimensions of the board won't change. 16 00:50.780 --> 00:58.640 So let's declare them using constants like so. These values are fine for me but you can change them if 17 00:58.640 --> 00:59.200 you like. 18 00:59.210 --> 01:02.000 I found these values by trial and error, 19 01:02.000 --> 01:03.610 they are not magical values. 20 01:03.790 --> 01:04.760 OK. 21 01:04.970 --> 01:05.540 All right. 22 01:05.540 --> 01:06.970 Now the board is ready. 23 01:07.040 --> 01:15.060 So it's time to draw the board. Now I'm going to draw the board cells one by one. To do that, I need to 24 01:15.060 --> 01:22.440 use inner loops to access the inner elements of the board like so. The parent loop will let us move over 25 01:22.440 --> 01:29.450 the board rows and the inner loop will print the board columns. Here, I've picked the first element, it 26 01:29.450 --> 01:36.180 will loop for ten times, because the height is ten. You know, each element of the board has the exact same 27 01:36.180 --> 01:42.990 length, so I could have used any other element here as well. You will understand how this works in a second. 28 01:43.740 --> 01:50.550 By the way, since each row and column have the same length, I could have used an array instead of a slice. 29 01:50.880 --> 01:57.930 But, that's an optimization issue. Okay. I think it is better to see the board yourself. So, first let me 30 01:57.930 --> 02:00.180 print a dummy character here, as an example. 31 02:02.900 --> 02:09.020 Of course, it prints a lot of X characters in a single line. Of course, we need to print them in different 32 02:09.020 --> 02:18.090 lines. To do that, after each row, I'm going to print a new line here. Now it prints a grid, cool! Each 33 02:18.110 --> 02:20.580 X character here is an empty cell. 34 02:20.640 --> 02:21.940 I'm going to remove them soon. 35 02:21.990 --> 02:28.670 For now, they're there only for you to see where the empty cells are located, and how the program works. 36 02:29.850 --> 02:34.120 I don't like the way the cells look because they are too close to each other. 37 02:34.140 --> 02:39.080 So let me add a small space between them. Now it's okay. 38 02:39.190 --> 02:45.310 As you can see, the algorithm prints a grid with a height of 10 and a width of 50. 39 02:45.310 --> 02:46.980 Just like I want it. 40 02:47.140 --> 02:50.920 Okay now it's time to print the ball in a specific cell. 41 02:50.920 --> 02:54.180 Let's say the ball is in the top left corner of the board, 42 02:54.190 --> 02:58.810 like so. Now, let's detect that and print the ball in that position. 43 02:58.810 --> 03:01.770 To do that I need X and Y positions. 44 03:02.110 --> 03:03.980 So where can I get them? 45 03:04.000 --> 03:08.360 Remember I can get the positions through the range loop indexes. 46 03:08.500 --> 03:09.130 Let me show you. 47 03:11.590 --> 03:13.130 It is that simple. 48 03:13.150 --> 03:20.470 Remember the parent loop moves over the board rows and the inner loop moves over the board columns. 49 03:20.470 --> 03:25.550 So that is why the parent loop gives me the vertical positions and inner loops 50 03:25.570 --> 03:28.540 give me the horizontal positions. 51 03:28.540 --> 03:34.930 I loop over the vertical and after that I loop over the horizontal positions because I want to control 52 03:34.990 --> 03:36.960 what to draw in a single line. 53 03:37.210 --> 03:43.600 If I had first moved over the horizontal positions, I would need to print pixels vertically which is harder 54 03:43.600 --> 03:45.370 for me to imagine in my mind. 55 03:45.460 --> 03:49.090 However you can choose any way that is comfortable for you. 56 03:49.120 --> 03:55.150 Now let's use the positions to check whether the ball is in the current X and Y positions like so. 57 03:55.960 --> 04:02.440 If so, let's print the ball here. As you can see, there is a problem. For the first cell, 58 04:02.480 --> 04:06.450 the program prints the ball, and the empty cell on top of each other. 59 04:06.470 --> 04:07.900 I need to prevent that. 60 04:07.910 --> 04:11.550 Let's start by putting the current cell value into a variable. 61 04:11.690 --> 04:17.990 I have declared it as a rune variable because I'm going to use Unicode emojis. For example: 62 04:17.990 --> 04:24.620 The ball is an emoji which can only be represented using multiple bytes, and a rune value can contain 63 04:24.620 --> 04:27.710 multiple bytes, so it can store and emoji. 64 04:27.740 --> 04:32.020 Let me first assign the empty cell value to the cell variable like so. 65 04:32.750 --> 04:36.600 Remember single quote means a rune literal. Here, 66 04:36.650 --> 04:40.960 I'm gonna set the current cell to the actual ball value like so. 67 04:41.000 --> 04:45.380 And lastly let's print the cell value only once in here. 68 04:47.150 --> 04:53.750 As you can see, it prints a lot of numbers instead of the ball and the cells. It's because, each cell here 69 04:53.750 --> 04:58.700 is a rune which is a numeric type. To print the corresponding characters, 70 04:58.700 --> 05:03.740 I need to convert it to a string, like so. You're going to learn more about this later on. 71 05:03.740 --> 05:06.170 No worries. 72 05:06.260 --> 05:12.230 Cool! Now it works. The program prints the ball at the top left corner of the board and the rest of the cells 73 05:12.260 --> 05:13.120 are empty. 74 05:13.130 --> 05:15.320 As an example let me print a smiley. 75 05:18.010 --> 05:21.600 As you can see, I can't put the balls in any position on the board now. 76 05:21.610 --> 05:23.710 It's like a drawing board. 77 05:23.800 --> 05:30.400 I showed you this because I want you to have an intuition about how the animation is going to work. As 78 05:30.400 --> 05:31.210 an exercise, 79 05:31.210 --> 05:39.180 please pause the video, and try changing some of the pixels yourself. Instead of typing the cell values 80 05:39.180 --> 05:39.690 manually, 81 05:39.690 --> 05:47.390 here, let me also create a few constants for the cell values. So, I can change them anytime I like. 82 05:47.620 --> 05:50.720 And I think that this makes the code easier to understand. 83 05:53.290 --> 05:56.870 Let me also print the space character in a single function call, 84 05:56.920 --> 06:02.060 right here. It's because, I don't want to call the print function unnecessarily. 85 06:02.140 --> 06:06.050 It is an expensive operation. OK. 86 06:06.050 --> 06:11.240 The program still works, awesome. While I'm talking about the expensive operations, 87 06:11.240 --> 06:13.970 let me tell you something. Inside these loops, 88 06:13.970 --> 06:18.870 I use a lot of Print function calls and doing so is not efficient. 89 06:19.100 --> 06:23.360 In the next lecture, I'm also going to show you how to optimize this program. 90 06:23.360 --> 06:24.000 All right. 91 06:24.110 --> 06:25.130 That's all for now. 92 06:25.130 --> 06:26.390 See in the next lecture! Bye!