Южный Парк

Знакомый пейзаж: четверо ребят стоят в ожидании автобуса, но что-то здесь явно не так... Похоже так просто с остановки им сегодня не выбраться.

Программа реализована с помощью двух основных функций `drawBackground()` и `drawAction()`, и обработчиков событий нажатия для трёх кнопок: `MOVE!`, `START! - STOP!` и `RESET!`.

Функция `drawBackground()` состоит из пяти локальный функций:

  1. `sky()` - отрисовывает небо;
  2. `background()` - отображает горы и задний план пейзажа;
  3. `hill()` - отрисовывает опасный склон;
  4. `sign()` - отрисовывает знак остановки;
  5. `children()` - отображает ребят.

Функция `children()` отображает детей в случае, если флаг `areChildrenThere == true`, иначе они, соответственно, не отображаются (дети в автобусе).

Функция `children()` в свою очередь состоит ещё из четырёх локальный функций: `Kyle()`, `Stan()`, `Cartman()` и `Kenny()`. Каждая из этих функций отрисовывает одного из четырёх ребят соответственно.

Функция `drawAction()` содержит локальную функцию `bus()`, которая отображает автобус. При запуске анимации с помощью механизма `requestAnimationFrame()` функция отрисовывает фон изображения, а затем автобус в новом положении.

Каждый раз по нажатии кнопки `START! - STOP!` запускается бесконечная анимация езды автобуса по кругу с последующими посадками-высадками детей на той же остановке или наоборот останавливается.

С помощью ползунка `MOVE!` можно вручную двигать автобус, анимация при этом прекращается. При запуске анимации после изменения положения автобуса, она начнётся с установленной позиции.

Кнопка `RESET!` сбрасывает все изменения в изображении и программе к стандартным значениям: дети стоят на остановке, автобус только подъезжает.

Исходники: