1
00:00:00,289 --> 00:00:03,797
 Ta đã học cách tạo ra các biến của riêng mình
và sử dụng chúng. 

2
00:00:03,797 --> 00:00:06,657
 Bây giờ ta sẽ tìm hiểu về hai biến đặc biệt: 

3
00:00:06,657 --> 00:00:09,353
 <i> mouseX  và <i> mouseY . </i></i>

4
00:00:10,222 --> 00:00:12,671
 Bạn không bao giờ phải tự tạo ra các biến này, 

5
00:00:12,671 --> 00:00:15,980
 và trên thực tế là không nên, bởi vì chúng đã có sẵn rồi. 

6
00:00:15,980 --> 00:00:19,599
 Như bạn thấy, chương trình thiết lập giá trị của các biến này ở hậu trường, 

7
00:00:19,599 --> 00:00:23,758
 đảm bảo rằng giá trị của 'mouseX' luôn ở vị trí <i> x  của con trỏ, </i>

8
00:00:23,758 --> 00:00:27,548
 và giá trị của 'mouseY' luôn là vị trí <i> y  của con trỏ. </i>

9
00:00:27,548 --> 00:00:30,864
 Điều này giúp ta dễ dàng thực hiện những tương tác thú vị 

10
00:00:30,864 --> 00:00:32,559
 dựa vào vị trí con trỏ của người dùng. 

11
00:00:33,430 --> 00:00:35,868
 Hãy nhìn vào hình elip ta đang vẽ ở đây. 

12
00:00:35,868 --> 00:00:39,366
 Ngay lúc này, ta luôn vẽ nó ở tọa độ (200, 200). 

13
00:00:40,612 --> 00:00:43,827
 Nếu sử dụng mouseX và mouseY, các biến đặc biệt này, 

14
00:00:44,439 --> 00:00:48,286
 thì trong thực tế, ta có thể vẽ nó tại 'mouseX' và 'mouseY'. 

15
00:00:49,337 --> 00:00:52,359
 Bây giờ, nếu di chuyển chuột trên nền vẽ, ta có thể thấy 

16
00:00:52,359 --> 00:00:55,291
 hình elip luôn được vẽ tại con trỏ - 

17
00:00:55,291 --> 00:00:57,193
 Vì vậy, nó vòng quanh theo con trỏ của chúng ta. 

18
00:00:57,193 --> 00:01:00,000
 Điều đó thật tuyệt; bạn biết tôi đang vẽ gì không? Whee! 

19
00:01:00,468 --> 00:01:04,125
 Nếu có ý định sử dụng 'mouseX' và 'mouseY', ta phải chắc chắn 

20
00:01:04,125 --> 00:01:06,365
 rằng mình sử dụng chúng bên trong <i> draw = function ()  </i>

21
00:01:06,365 --> 00:01:08,135
 bởi vì hãy xem chuyện gì xảy ra 

22
00:01:09,575 --> 00:01:12,700
 khi ta di chuyển hai dòng code ra ngoài <i> draw = function () . </i>

23
00:01:13,289 --> 00:01:14,436
 Bạn thấy khkông? 

24
00:01:14,871 --> 00:01:19,206
 Bây giờ code ở đây chỉ được chạy một lần, 

25
00:01:19,206 --> 00:01:21,811
 nên hình elip này chỉ được vẽ một lần, 

26
00:01:21,811 --> 00:01:24,036
 và nó được vẽ ở bất cứ vị trí nào của con trỏ 

27
00:01:24,036 --> 00:01:26,140
 tại thời điểm chương trình bắt đầu chạy

28
00:01:26,725 --> 00:01:30,337
 Đó là lý do tại sao ta <i> cần  đặt nó bên trong <i> draw = function () , </i></i>

29
00:01:30,337 --> 00:01:32,459
 bởi vì <i> draw = function ()  là hàm</i>

30
00:01:32,459 --> 00:01:35,784
 được gọi lặp đi lặp lại trong khi chương trình của chúng ta chạy. 

31
00:01:35,784 --> 00:01:39,149
 Vì vậy, ta muốn khi được gọi, nó xem giá trị hiện tại 

32
00:01:39,149 --> 00:01:43,246
 của mouseX và mouseY là gì, và sau đó nó vẽ hình elip ở vị trí đó. 

33
00:01:43,246 --> 00:01:46,063
 Khi bạn hình dung, nó thực sự rất giống với ảnh động - 

34
00:01:46,063 --> 00:01:48,561
 nó thay đổi theo thời gian, theo một cách khác. 

35
00:01:49,191 --> 00:01:52,065
 Được rồi, bây giờ ta có thể làm tất cả những điều thú vị. 

36
00:01:52,567 --> 00:01:55,724
 Chuyện gì sẽ xảy ra nếu, thay vì vẽ nó tại mouseX và mouseY, 

37
00:01:56,353 --> 00:02:02,591
 ta vẽ nó ở mouseX nhưng sửa mouseY với giá trị là 300? 

38
00:02:03,231 --> 00:02:07,369
 Bây giờ bạn có thể thấy rằng hình elip chỉ theo tọa độ 'x', 

39
00:02:07,369 --> 00:02:09,204
 mà bỏ qua mọi thứ với 'y'. 

40
00:02:10,991 --> 00:02:16,873
 Sau đó, chuyện gì sẽ xảy ra nếu giờ ta vẽ nó tại mouseX và mouseY, trở lại như cũ, 

41
00:02:16,873 --> 00:02:19,756
 Nhưng ta bỏ phần nền đi, chỉ comment nó lại thôi nhỉ? 

42
00:02:20,547 --> 00:02:25,234
 <i> Woo ! Bây giờ hãy nhìn xem, tôi đã có cây cọ vẽ ngộ nghĩnh này. </i>

43
00:02:25,234 --> 00:02:27,031
 Điều đó thật tuyệt vời. 

44
00:02:27,031 --> 00:02:30,470
 Hoặc, tôi thậm chí có thể sửa các biến này. 

45
00:02:31,029 --> 00:02:32,894
 Hãy để tôi đặt hình nền trở lại. 

46
00:02:32,894 --> 00:02:37,703
 Tôi sẽ đặt các biến này ở đây, mouseY và mouseX, 

47
00:02:37,703 --> 00:02:39,202
 và sau đó xem chuyển gì xảy ra. 

48
00:02:39,202 --> 00:02:41,232
 Bây giờ nó dường như thực sự, thực sự kỳ lạ. 

49
00:02:41,232 --> 00:02:43,853
 Tôi đã điều khiển con trỏ đang làm ngược lại 

50
00:02:43,854 --> 00:02:45,576
 về những gì mong đợi ở chúng. 

51
00:02:45,576 --> 00:02:48,321
 Nhưng thật tuyệt, bạn có thể tưởng tượng để tạo ra cả một trò chơi 

52
00:02:48,321 --> 00:02:50,950
 để cố gắng vẽ hoặc làm một cái gì đó 

53
00:02:50,950 --> 00:02:52,940
 có dùng tới điều khiển con trỏ theo chiều ngược lại. 

54
00:02:53,040 --> 00:00:00,000
 Đó là những gì về 'mouseX' và 'mouseY' - quả thực, khá thú vị. Hãy cùng tận hưởng!