0:00:00.289,0:00:03.797
Ta đã học cách tạo ra các biến của riêng mình[br]và sử dụng chúng.
0:00:03.797,0:00:06.657
Bây giờ ta sẽ tìm hiểu về hai biến đặc biệt:
0:00:06.657,0:00:09.353
mouseX và mouseY .
0:00:10.222,0:00:12.671
Bạn không bao giờ phải tự tạo ra các biến này,
0:00:12.671,0:00:15.980
và trên thực tế là không nên, bởi vì chúng đã có sẵn rồi.
0:00:15.980,0: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,
0:00:19.599,0:00:23.758
đảm bảo rằng giá trị của 'mouseX' luôn ở vị trí x của con trỏ,
0:00:23.758,0:00:27.548
và giá trị của 'mouseY' luôn là vị trí y của con trỏ.
0:00:27.548,0: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ị
0:00:30.864,0:00:32.559
dựa vào vị trí con trỏ của người dùng.
0:00:33.430,0:00:35.868
Hãy nhìn vào hình elip ta đang vẽ ở đây.
0:00:35.868,0:00:39.366
Ngay lúc này, ta luôn vẽ nó ở tọa độ (200, 200).
0:00:40.612,0:00:43.827
Nếu sử dụng mouseX và mouseY, các biến đặc biệt này,
0:00:44.439,0:00:48.286
thì trong thực tế, ta có thể vẽ nó tại 'mouseX' và 'mouseY'.
0:00:49.337,0:00:52.359
Bây giờ, nếu di chuyển chuột trên nền vẽ, ta có thể thấy
0:00:52.359,0:00:55.291
hình elip luôn được vẽ tại con trỏ -
0:00:55.291,0:00:57.193
Vì vậy, nó vòng quanh theo con trỏ của chúng ta.
0:00:57.193,0:01:00.000
Điều đó thật tuyệt; bạn biết tôi đang vẽ gì không? Whee!
0:01:00.468,0:01:04.125
Nếu có ý định sử dụng 'mouseX' và 'mouseY', ta phải chắc chắn
0:01:04.125,0:01:06.365
rằng mình sử dụng chúng bên trong draw = function ()
0:01:06.365,0:01:08.135
bởi vì hãy xem chuyện gì xảy ra
0:01:09.575,0:01:12.700
khi ta di chuyển hai dòng code ra ngoài draw = function () .
0:01:13.289,0:01:14.436
Bạn thấy khkông?
0:01:14.871,0:01:19.206
Bây giờ code ở đây chỉ được chạy một lần,
0:01:19.206,0:01:21.811
nên hình elip này chỉ được vẽ một lần,
0:01:21.811,0:01:24.036
và nó được vẽ ở bất cứ vị trí nào của con trỏ
0:01:24.036,0:01:26.140
tại thời điểm chương trình bắt đầu chạy
0:01:26.725,0:01:30.337
Đó là lý do tại sao ta cần đặt nó bên trong draw = function () ,
0:01:30.337,0:01:32.459
bởi vì draw = function () là hàm
0:01:32.459,0: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.
0:01:35.784,0:01:39.149
Vì vậy, ta muốn khi được gọi, nó xem giá trị hiện tại
0:01:39.149,0:01:43.246
của mouseX và mouseY là gì, và sau đó nó vẽ hình elip ở vị trí đó.
0:01:43.246,0:01:46.063
Khi bạn hình dung, nó thực sự rất giống với ảnh động -
0:01:46.063,0:01:48.561
nó thay đổi theo thời gian, theo một cách khác.
0:01:49.191,0:01:52.065
Được rồi, bây giờ ta có thể làm tất cả những điều thú vị.
0:01:52.567,0:01:55.724
Chuyện gì sẽ xảy ra nếu, thay vì vẽ nó tại mouseX và mouseY,
0:01:56.353,0:02:02.591
ta vẽ nó ở mouseX nhưng sửa mouseY với giá trị là 300?
0:02:03.231,0:02:07.369
Bây giờ bạn có thể thấy rằng hình elip chỉ theo tọa độ 'x',
0:02:07.369,0:02:09.204
mà bỏ qua mọi thứ với 'y'.
0:02:10.991,0: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ũ,
0:02:16.873,0:02:19.756
Nhưng ta bỏ phần nền đi, chỉ comment nó lại thôi nhỉ?
0:02:20.547,0:02:25.234
Woo ! Bây giờ hãy nhìn xem, tôi đã có cây cọ vẽ ngộ nghĩnh này.
0:02:25.234,0:02:27.031
Điều đó thật tuyệt vời.
0:02:27.031,0:02:30.470
Hoặc, tôi thậm chí có thể sửa các biến này.
0:02:31.029,0:02:32.894
Hãy để tôi đặt hình nền trở lại.
0:02:32.894,0:02:37.703
Tôi sẽ đặt các biến này ở đây, mouseY và mouseX,
0:02:37.703,0:02:39.202
và sau đó xem chuyển gì xảy ra.
0:02:39.202,0:02:41.232
Bây giờ nó dường như thực sự, thực sự kỳ lạ.
0:02:41.232,0:02:43.853
Tôi đã điều khiển con trỏ đang làm ngược lại
0:02:43.854,0:02:45.576
về những gì mong đợi ở chúng.
0:02:45.576,0: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
0:02:48.321,0:02:50.950
để cố gắng vẽ hoặc làm một cái gì đó
0:02:50.950,0:02:52.940
có dùng tới điều khiển con trỏ theo chiều ngược lại.
0:02:53.040,0: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!