Южный Парк
Знакомый пейзаж: четверо ребят стоят в ожидании автобуса, но что-то здесь явно не так... Похоже так просто с остановки им сегодня не выбраться.
Программа реализована с помощью двух основных функций `drawBackground()` и `drawAction()`, и обработчиков событий нажатия для трёх кнопок: `MOVE!`, `START! - STOP!` и `RESET!`.
Функция `drawBackground()` состоит из пяти локальный функций:
- `sky()` - отрисовывает небо;
- `background()` - отображает горы и задний план пейзажа;
- `hill()` - отрисовывает опасный склон;
- `sign()` - отрисовывает знак остановки;
- `children()` - отображает ребят.
Функция `children()` отображает детей в случае, если флаг `areChildrenThere == true`, иначе они, соответственно, не отображаются (дети в автобусе).
Функция `children()` в свою очередь состоит ещё из четырёх локальный функций: `Kyle()`, `Stan()`, `Cartman()` и `Kenny()`. Каждая из этих функций отрисовывает одного из четырёх ребят соответственно.
Функция `drawAction()` содержит локальную функцию `bus()`, которая отображает автобус. При запуске анимации с помощью механизма `requestAnimationFrame()` функция отрисовывает фон изображения, а затем автобус в новом положении.
Каждый раз по нажатии кнопки `START! - STOP!` запускается бесконечная анимация езды автобуса по кругу с последующими посадками-высадками детей на той же остановке или наоборот останавливается.
С помощью ползунка `MOVE!` можно вручную двигать автобус, анимация при этом прекращается. При запуске анимации после изменения положения автобуса, она начнётся с установленной позиции.
Кнопка `RESET!` сбрасывает все изменения в изображении и программе к стандартным значениям: дети стоят на остановке, автобус только подъезжает.