WEBVTT

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. 

00:00:03.797 --> 00:00:06.657
 Bây giờ ta sẽ tìm hiểu về hai biến đặc biệt: 

00:00:06.657 --> 00:00:09.353
 <i> mouseX  và <i> mouseY . </i></i>

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, 

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. 

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, 

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>

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>

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ị 

00:00:30.864 --> 00:00:32.559
 dựa vào vị trí con trỏ của người dùng. 

00:00:33.430 --> 00:00:35.868
 Hãy nhìn vào hình elip ta đang vẽ ở đây. 

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

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, 

00:00:44.439 --> 00:00:48.286
 thì trong thực tế, ta có thể vẽ nó tại 'mouseX' và 'mouseY'. 

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 

00:00:52.359 --> 00:00:55.291
 hình elip luôn được vẽ tại con trỏ - 

00:00:55.291 --> 00:00:57.193
 Vì vậy, nó vòng quanh theo con trỏ của chúng ta. 

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! 

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 

00:01:04.125 --> 00:01:06.365
 rằng mình sử dụng chúng bên trong <i> draw = function ()  </i>

00:01:06.365 --> 00:01:08.135
 bởi vì hãy xem chuyện gì xảy ra 

00:01:09.575 --> 00:01:12.700
 khi ta di chuyển hai dòng code ra ngoài <i> draw = function () . </i>

00:01:13.289 --> 00:01:14.436
 Bạn thấy khkông? 

00:01:14.871 --> 00:01:19.206
 Bây giờ code ở đây chỉ được chạy một lần, 

00:01:19.206 --> 00:01:21.811
 nên hình elip này chỉ được vẽ một lần, 

00:01:21.811 --> 00:01:24.036
 và nó được vẽ ở bất cứ vị trí nào của con trỏ 

00:01:24.036 --> 00:01:26.140
 tại thời điểm chương trình bắt đầu chạy

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>

00:01:30.337 --> 00:01:32.459
 bởi vì <i> draw = function ()  là hàm</i>

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. 

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 

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

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 - 

00:01:46.063 --> 00:01:48.561
 nó thay đổi theo thời gian, theo một cách khác. 

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ị. 

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, 

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

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', 

00:02:07.369 --> 00:02:09.204
 mà bỏ qua mọi thứ với 'y'. 

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ũ, 

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ỉ? 

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>

00:02:25.234 --> 00:02:27.031
 Điều đó thật tuyệt vời. 

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. 

00:02:31.029 --> 00:02:32.894
 Hãy để tôi đặt hình nền trở lại. 

00:02:32.894 --> 00:02:37.703
 Tôi sẽ đặt các biến này ở đây, mouseY và mouseX, 

00:02:37.703 --> 00:02:39.202
 và sau đó xem chuyển gì xảy ra. 

00:02:39.202 --> 00:02:41.232
 Bây giờ nó dường như thực sự, thực sự kỳ lạ. 

00:02:41.232 --> 00:02:43.853
 Tôi đã điều khiển con trỏ đang làm ngược lại 

00:02:43.854 --> 00:02:45.576
 về những gì mong đợi ở chúng. 

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 

00:02:48.321 --> 00:02:50.950
 để cố gắng vẽ hoặc làm một cái gì đó 

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. 

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!