Mouse Interaction (Video Version)

Ta đã học cách tạo ra các biến của riêng mình
và sử dụng chúng.

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

mouseX và mouseY .

Bạn không bao giờ phải tự tạo ra các biến này,

và trên thực tế là không nên, bởi vì chúng đã có sẵn rồi.

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,

đảm bảo rằng giá trị của 'mouseX' luôn ở vị trí x của con trỏ,

và giá trị của 'mouseY' luôn là vị trí y của con trỏ.

Điều này giúp ta dễ dàng thực hiện những tương tác thú vị

dựa vào vị trí con trỏ của người dùng.

Hãy nhìn vào hình elip ta đang vẽ ở đây.

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

Nếu sử dụng mouseX và mouseY, các biến đặc biệt này,

thì trong thực tế, ta có thể vẽ nó tại 'mouseX' và 'mouseY'.

Bây giờ, nếu di chuyển chuột trên nền vẽ, ta có thể thấy

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

Vì vậy, nó vòng quanh theo con trỏ của chúng ta.

Điều đó thật tuyệt; bạn biết tôi đang vẽ gì không? Whee!

Nếu có ý định sử dụng 'mouseX' và 'mouseY', ta phải chắc chắn

rằng mình sử dụng chúng bên trong draw = function ()

bởi vì hãy xem chuyện gì xảy ra

khi ta di chuyển hai dòng code ra ngoài draw = function () .

Bạn thấy khkông?

Bây giờ code ở đây chỉ được chạy một lần,

nên hình elip này chỉ được vẽ một lần,

và nó được vẽ ở bất cứ vị trí nào của con trỏ

tại thời điểm chương trình bắt đầu chạy

Đó là lý do tại sao ta cần đặt nó bên trong draw = function () ,

bởi vì draw = function () là hàm

được gọi lặp đi lặp lại trong khi chương trình của chúng ta chạy.

Vì vậy, ta muốn khi được gọi, nó xem giá trị hiện tại

của mouseX và mouseY là gì, và sau đó nó vẽ hình elip ở vị trí đó.

Khi bạn hình dung, nó thực sự rất giống với ảnh động -

nó thay đổi theo thời gian, theo một cách khác.

Được rồi, bây giờ ta có thể làm tất cả những điều thú vị.

Chuyện gì sẽ xảy ra nếu, thay vì vẽ nó tại mouseX và mouseY,

ta vẽ nó ở mouseX nhưng sửa mouseY với giá trị là 300?

Bây giờ bạn có thể thấy rằng hình elip chỉ theo tọa độ 'x',

mà bỏ qua mọi thứ với 'y'.

Sau đó, chuyện gì sẽ xảy ra nếu giờ ta vẽ nó tại mouseX và mouseY, trở lại như cũ,

Nhưng ta bỏ phần nền đi, chỉ comment nó lại thôi nhỉ?

Woo ! Bây giờ hãy nhìn xem, tôi đã có cây cọ vẽ ngộ nghĩnh này.

Điều đó thật tuyệt vời.

Hoặc, tôi thậm chí có thể sửa các biến này.

Hãy để tôi đặt hình nền trở lại.

Tôi sẽ đặt các biến này ở đây, mouseY và mouseX,

và sau đó xem chuyển gì xảy ra.

Bây giờ nó dường như thực sự, thực sự kỳ lạ.

Tôi đã điều khiển con trỏ đang làm ngược lại

về những gì mong đợi ở chúng.

Nhưng thật tuyệt, bạn có thể tưởng tượng để tạo ra cả một trò chơi

để cố gắng vẽ hoặc làm một cái gì đó

có dùng tới điều khiển con trỏ theo chiều ngược lại.

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