# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 | Запуск JavaScripta |
1 тест |
|||
На этом уроке мы напишем и запустим простую программу на языке JavaScript.
Отчёт отправил: 11019. Trira Выполнено за 3 час. 12 мин. [Показать отчёт] Научился: создавать программы на JS в текстовом редакторе Сложности: не получилось реализовать ввод числа из allert() |
|||||
2 |
![]() |
без видео 2 теста |
|||
На этом уроке мы напишем на JavaScript игру "Угадай число". Компьютер загадает число от 0 до 1000, а мы его будем угадывать. Отчёт отправил: 11019. Trira Выполнено за 1 час. 7 мин. [Показать отчёт] Научился: Терпения не хватило угадывать-( Поэтому научилась взламывать игру, добавив одну команду в код скрипта - вывод загаданного числа в консоль. Эта команда не отображается на веб-странице, но ее результат виден в режиме разработчика в консоли Сложности: сложно не делать опечатки в слове alert -)) Из-за этого долго не могла понять, почему счетчик попыток не срабатывал |
|||||
3 |
![]() |
без видео 2 теста |
|||
На этом уроке мы напишем пасьянс "River". Правила игры. Есть 10 монеток. При щелчке по любой из них - переворачиваются сама монетка и две соседние. У крайних монеток только одна соседняя. Задача - перевернуть все монетки. Задачу будем решать на языке JavaScript. Отчёт отправил: 11019. Trira Выполнено за 22 час. 14 мин. [Показать отчёт] Научился: научилась играть в пасьянс с монетками Сложности: ... |
|||||
4 |
![]() |
2 теста |
|||
Мы начинаем создание игры "Очисти поле" на JavaScript. На этом уроке мы подготовим поле 5х5 из чекбосиков, и напишем функцию запуска уровня. Отчёт отправил: 11019. Trira Выполнено за 2 дня 3 час. 49 мин. [Показать отчёт] Научился: Разместила чекбоксы в виде поля 5x5; разместила 3 кнопки для запуска 3х уровней, функции для реализации этих уровней, а также функции для очистки поля и для указания элемента по его id. Сложности: при отладке в режиме разработчика в браузере не сразу удалось определить причину ошибки. оказалось - снова опечатки при наборе служебных команд. |
|||||
5 |
![]() |
|
|||
На этом уроке мы напишем функцию хода, Которая будет перещёлкивать чекбоксики. Затем напишем функцию isEmpty() для проверки поля на окончание игры, и ... всё! игра готова! Отчёт отправил: 11019. Trira Выполнено за 1 час. 54 мин. [Показать отчёт] Научился: 1. Создала функции turn (x, y) и turnxy (x, y) для выполнения хода 2. Создала функцию isEmpty () для проверки окончания игры 3. Добавила счётчик ходов по аналогии с одномерной игрой 3. Прошла 3 уровень (см. скриншот). Сложности: пройти 1й уровень, хотя принцип завершения игры стал понятен, загнать "галки" в заветный угол не хватило терпения |
|||||
6 |
![]() |
2 теста |
|||
На этом миниуроке мы напишем программку на JavaScript, которая посчитает, сколько тебе дней стукнуло. Отчёт отправил: 11019. Trira Выполнено за 20 мин. [Показать отчёт] Научился: Написала скрипт, вычисляющий количество прожитых дней с момента рождения. Сложности: ничего сложного |
|||||
7 | Гонка - Герои на канвасе |
2 теста |
|||
На этом уроке мы познакомимся с канвасом. Научимся его создавать, инициализировать и рисовать на нём прямоугольники. Отчёт отправил: 11019. Trira Выполнено за 2 час. 24 мин. [Показать отчёт] Научился: 1. создан канвас с id=canvascl в теге <body>; 2. canvas и context проинициализированы через функцию init(); 3. описаны параметры машинки и "боксов"; 4. при помощи паттерна fillRect нарисованы зеленая машинка и черные "боксы"; 5. созданы функции рисования машинки и боксов, причем размещение боксов реализовано рандомно на канвасе; 6. размещено 40 боксов и одна машинка. Сложности: немного запуталась с описанием стиля канваса. |
|||||
8 | Гонка - Массив боксиков |
1 тест |
|||
На этом уроке мы заставим двигаться наши боксики. Для этого необходимо сохранять их координаты, а при нажатии на кнопочку - менять их. Отчёт отправил: 11019. Trira Выполнено за 18 час. 44 мин. [Показать отчёт] Научился: выполнен рефакторинг предыдущего варианта скрипта race: функция downBox() перемещает боксы вниз, addBox() рандомно добавляет новые боксы на поле, showBox() рисует сами боксы, cls() очищает поле. Размещена кнопка Down, которая запускает эти функции в определенном порядке. Сложности: сначала боксы уходили вверх. Изменила - на + и все получилось. Дело было в направлении осей на канвасе: вниз и вправо - это положительные направления |
|||||
9 | Гонка - Запуск таймера |
1 тест |
|||
На этом уроке мы добавим таймер, чтобы наши боксики двигались сами. Потом долго будем настраивать процесс их появления и продвижения. Отчёт отправил: 11019. Trira Выполнено за 19 час. 20 мин. [Показать отчёт] Научился: 1. Добавила вызов таймера. 2. Создала функцию timer(). 3. функция addBox() изменена так, чтобы уровни увеличивались автоматически 4. плавное появление боксиков реализовано в функции addBox() 5. удаление уехавших боксиков реализовано в функции downBox() 6. подобрала параметры уровня и изменения скорости так, чтобы выполнение происходило комфортно для глаз Сложности: были опечатки в коде. Все также сложно искать такие ошибки без возможностей автоматического дебагера. Приходится искать возможности проверки хода выполнения скрипта, изменяя настройки среды и добавляя дополнительные операции визуализации. Снято видео mp4 с ходом выполнения скрипта, но прикрепить его к уроку не получилось |
|||||
10 | Гонка - Рулевое управление |
1 тест |
|||
На этом уроке мы добавим обработчик движения мышки. При перемещении мышки будет двигаться наша машинка. Нужно будет правильно рассчитать координаты и обрабатывать случае ухода мышки влево или вправо. Отчёт отправил: 11019. Trira Выполнено за 1 день 16 час. 40 мин. [Показать отчёт] Научился: добавила обработчик движения мышки, который связывает мышь с машинкой (функция moveCar()) Функция-обработчик рассчитывает координаты машинки в канвасе и обрабатывает перемещение машинки влево и вправо. |
|||||
11 | Гонка - Быстрые рекорды |
1 тест |
|||
На этом уроке мы добавим две функции для проверки на столкновения машинки с боксиками и немножко поиграем. Вдохновился я на эти уроки статьёй на Хабре: http://habrahabr.ru/post/202556/ Отчёт отправил: 11019. Trira Выполнено за 17 час. 2 мин. [Показать отчёт] Научился: История создания игры "гонки" на JS 1. создан канвас с id=canvas в теге <body>; 2. canvas и context проинициализированы через функцию init(); 3. описаны параметры машинки и "боксов"; 4. при помощи паттерна fillRect нарисованы зеленая машинка и черные "боксы"; 5. созданы функции рисования машинки и боксов, причем размещение боксов реализовано рандомно на канвасе; 6. размещено 40 боксов и одна машинка. 7. выполнен рефакторинг предыдущего варианта скрипта race: - функция downBox() перемещает боксы вниз, - addBox() рандомно добавляет новые боксы на поле, - showBox() рисует сами боксы, cls() очищает поле. 8. Размещена кнопка Down, которая запускает эти функции в определенном порядке. 9. Добавила вызов таймера. 10. Создала функцию timer(). 11. функция addBox() изменена так, чтобы уровни увеличивались автоматически 12. плавное появление боксиков реализовано в функции addBox() 13. удаление уехавших боксиков реализовано в функции downBox() 14. подобрала параметры уровня и изменения скорости так, чтобы выполнение происходило комфортно для глаз 15. добавила обработчик движения мышки, который связывает мышь с машинкой (функция moveCar()). Функция-обработчик рассчитывает координаты машинки в канвасе и обрабатывает перемещение машинки влево и вправо. 16. добавила три функции (checkCrash(), isInside(x, y) и isCrash(bx, by) для проверки на столкновения машинки с боксиками 17. момент остановки игры и фиксации результата реализован в функции gameOver() Сложности: запуск проекта осложнился тем, что работа с nodeJS изменила настройки VS Code. Проблема решилась переустановкой этой программы (сброс настроек + очистка системных папок) Видеообзор: _szaL86WkaU |
|||||
Итого: 11 видеоуроков |
2 час. 07 мин. 15 тестов |
22 чел. | |||
Финалисты: zhikharevav, mirbek, Максим Лапшинов, Michail Ostryj, Ludmila, Алексей В., Rita, Новопашин Владимир, Станислав, Иван, Tekashnik, Иван Воронин, Дмитрий, Андрей Гладков, Dmitry Sinitsin, chokayes, Yefim, Max, Николай Денисов, Anatoli, Trira, Tom . |