Взаимодействие с курсором.
-
0:00 - 0:04Вы уже научились создавать переменные и использовать их.
-
0:04 - 0:11Сейчас мы изучим две особые переменные: mouseX и mouseY.
-
0:11 - 0:17В данном случае вам не придется создавать эти переменные самостоятельно, в общем-то, вам и не нужно, так как они уже есть.
-
0:17 - 0:28Видите ли, программа устанавливает значения этих переменных без вашего ведома, закрепляя значение mouseX за y-положением вашего курсора, а значение mouseY - за y-положением вашего курсора.
-
0:28 - 0:33Это позволяет с большой легкостью делать отличные интерактивные программки, основанные на положении пользовательского курсора.
-
0:33 - 0:37Давайте взглянем на круг, который я здесь нарисовала.
-
0:37 - 0:41Так, я всегда рисую его в точке 200,200.
-
0:41 - 0:50Если я использую mouseX и mouseY, эти особые переменные, тогда я могу нарисовать его буквально в точке mouseX и mouseY.
-
0:50 - 0:58И сейчас, если я повожу курсором по холсту, вы можете увидеть, что кружок постоянно появляется в месте, где находится мой курсор - так, что он повсюду следует за моим курсором.
-
0:58 - 1:02Здорово!
-
1:02 - 1:14Если вы планируете использовать mouseX и mouseY, убедитесь, что вы используете их внутри функции draw. Посмотрите, что произойдет, если мы уберем эти две строчки кода за пределы функции draw.
-
1:14 - 1:16Видите?
-
1:16 - 1:27Сейчас этот код запускается единожды, так что круг нарисован всего один раз, и нарисован он там, где мой курсор находился при самом старте программы.
-
1:27 - 1:36Вот именно поэтому код должен быть прописан внутри функции draw, потому что функция draw - это такая функция, которая вызывается постоянно и непрерывно, пока наша программа работает.
-
1:36 - 1:44Так что, когда эта функция вызывается, она обращает внимание на текущее значение mouseX и mouseY и затем рисует круг именно в этой точке.
-
1:44 - 1:49Если вы задумаетесь об этом, это в действительности очень похоже на анимацию - она меняется с течением времени, просто немного по-другому.
-
1:49 - 1:53Замечательно, теперь мы можем делать множество забавных вещей.
-
1:53 - 2:04А что случится, если вместо рисования круга в позиции mouseX, mouseY, я нарисую его в той же позиции mouseX, но поменяю значение mouseY, скажем, на 300?
-
2:04 - 2:11Теперь вы видите, что круг сопровождает курсор только по оси координат x, не замечая, что я делаю на оси координат y.
-
2:11 - 2:22Хорошо, а если я нарисую его на в позиции mouseX, mouseY, вернув все на место, но избавлюсь от заднего плана, просто вынесу его в комментарии?
-
2:22 - 2:28Вы только посмотрите! Я получила эту клевую кисточку. Здорово!
-
2:28 - 2:40Или, или, я могу просто поменять местами эти переменные. Давайте вернем фон. Я поменяю переменные mouseX и mouseY местами, и увидим, что получится.
-
2:40 - 2:46Теперь стало совсем уж странно. Курсор делает все, что я ему велю, строго наоборот.
-
2:46 - 2:53Но это и здорово, вы могли бы придумать целую игру, где нужно нарисовать что-нибудь или сделать что-то, используя инверсное управление курсором.
-
2:53 - 3:00Вот и все про mouseX и mouseY - довольно весело. Наслаждайтесь!
- Title:
- Взаимодействие с курсором.
- Description:
-
Это лишь отрывок из нашего разговора об интерактивном программировании, приспособленный для облегченной подготовки субтитров и переводов. Удобнее смотреть наши познавательные разговоры здесь:
https://www.khanacademy.org/cs/programming/ - Video Language:
- English
- Duration:
- 03:00
dspec edited Russian subtitles for Mouse Interaction (Video Version) | ||
dspec edited Russian subtitles for Mouse Interaction (Video Version) | ||
dspec edited Russian subtitles for Mouse Interaction (Video Version) |