< Return to Video

Mouse Interaction (Video Version)

  • 0:00 - 0:04
    Ta đã học cách tạo ra các biến của riêng mình
    và sử dụng chúng.
  • 0:04 - 0:07
    Bây giờ ta sẽ tìm hiểu về hai biến đặc biệt:
  • 0:07 - 0:09
    mouseX và mouseY .
  • 0:10 - 0:13
    Bạn không bao giờ phải tự tạo ra các biến này,
  • 0:13 - 0:16
    và trên thực tế là không nên, bởi vì chúng đã có sẵn rồi.
  • 0:16 - 0:20
    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:20 - 0:24
    đảm bảo rằng giá trị của 'mouseX' luôn ở vị trí x của con trỏ,
  • 0:24 - 0:28
    và giá trị của 'mouseY' luôn là vị trí y của con trỏ.
  • 0:28 - 0:31
    Điều này giúp ta dễ dàng thực hiện những tương tác thú vị
  • 0:31 - 0:33
    dựa vào vị trí con trỏ của người dùng.
  • 0:33 - 0:36
    Hãy nhìn vào hình elip ta đang vẽ ở đây.
  • 0:36 - 0:39
    Ngay lúc này, ta luôn vẽ nó ở tọa độ (200, 200).
  • 0:41 - 0:44
    Nếu sử dụng mouseX và mouseY, các biến đặc biệt này,
  • 0:44 - 0:48
    thì trong thực tế, ta có thể vẽ nó tại 'mouseX' và 'mouseY'.
  • 0:49 - 0:52
    Bây giờ, nếu di chuyển chuột trên nền vẽ, ta có thể thấy
  • 0:52 - 0:55
    hình elip luôn được vẽ tại con trỏ -
  • 0:55 - 0:57
    Vì vậy, nó vòng quanh theo con trỏ của chúng ta.
  • 0:57 - 1:00
    Điều đó thật tuyệt; bạn biết tôi đang vẽ gì không? Whee!
  • 1:00 - 1:04
    Nếu có ý định sử dụng 'mouseX' và 'mouseY', ta phải chắc chắn
  • 1:04 - 1:06
    rằng mình sử dụng chúng bên trong draw = function ()
  • 1:06 - 1:08
    bởi vì hãy xem chuyện gì xảy ra
  • 1:10 - 1:13
    khi ta di chuyển hai dòng code ra ngoài draw = function () .
  • 1:13 - 1:14
    Bạn thấy khkông?
  • 1:15 - 1:19
    Bây giờ code ở đây chỉ được chạy một lần,
  • 1:19 - 1:22
    nên hình elip này chỉ được vẽ một lần,
  • 1:22 - 1:24
    và nó được vẽ ở bất cứ vị trí nào của con trỏ
  • 1:24 - 1:26
    tại thời điểm chương trình bắt đầu chạy
  • 1:27 - 1:30
    Đó là lý do tại sao ta cần đặt nó bên trong draw = function () ,
  • 1:30 - 1:32
    bởi vì draw = function () là hàm
  • 1:32 - 1:36
    được gọi lặp đi lặp lại trong khi chương trình của chúng ta chạy.
  • 1:36 - 1:39
    Vì vậy, ta muốn khi được gọi, nó xem giá trị hiện tại
  • 1:39 - 1:43
    của mouseX và mouseY là gì, và sau đó nó vẽ hình elip ở vị trí đó.
  • 1:43 - 1:46
    Khi bạn hình dung, nó thực sự rất giống với ảnh động -
  • 1:46 - 1:49
    nó thay đổi theo thời gian, theo một cách khác.
  • 1:49 - 1:52
    Được rồi, bây giờ ta có thể làm tất cả những điều thú vị.
  • 1:53 - 1:56
    Chuyện gì sẽ xảy ra nếu, thay vì vẽ nó tại mouseX và mouseY,
  • 1:56 - 2:03
    ta vẽ nó ở mouseX nhưng sửa mouseY với giá trị là 300?
  • 2:03 - 2:07
    Bây giờ bạn có thể thấy rằng hình elip chỉ theo tọa độ 'x',
  • 2:07 - 2:09
    mà bỏ qua mọi thứ với 'y'.
  • 2:11 - 2:17
    Sau đó, chuyện gì sẽ xảy ra nếu giờ ta vẽ nó tại mouseX và mouseY, trở lại như cũ,
  • 2:17 - 2:20
    Nhưng ta bỏ phần nền đi, chỉ comment nó lại thôi nhỉ?
  • 2:21 - 2:25
    Woo ! Bây giờ hãy nhìn xem, tôi đã có cây cọ vẽ ngộ nghĩnh này.
  • 2:25 - 2:27
    Điều đó thật tuyệt vời.
  • 2:27 - 2:30
    Hoặc, tôi thậm chí có thể sửa các biến này.
  • 2:31 - 2:33
    Hãy để tôi đặt hình nền trở lại.
  • 2:33 - 2:38
    Tôi sẽ đặt các biến này ở đây, mouseY và mouseX,
  • 2:38 - 2:39
    và sau đó xem chuyển gì xảy ra.
  • 2:39 - 2:41
    Bây giờ nó dường như thực sự, thực sự kỳ lạ.
  • 2:41 - 2:44
    Tôi đã điều khiển con trỏ đang làm ngược lại
  • 2:44 - 2:46
    về những gì mong đợi ở chúng.
  • 2:46 - 2:48
    Nhưng thật tuyệt, bạn có thể tưởng tượng để tạo ra cả một trò chơi
  • 2:48 - 2:51
    để cố gắng vẽ hoặc làm một cái gì đó
  • 2:51 - 2:53
    có dùng tới điều khiển con trỏ theo chiều ngược lại.
  • 2:53 - 0:00
    Đó là những gì về 'mouseX' và 'mouseY' - quả thực, khá thú vị. Hãy cùng tận hưởng!
Title:
Mouse Interaction (Video Version)
Description:

more » « less
Video Language:
English
Duration:
03:00

Vietnamese subtitles

Incomplete

Revisions