Запись 2. Системные часы и индикатор состояния
Задача. Добавить часы реального времени в шапке и цветной индикатор состояния поста, который меняет цвет и текст в зависимости от ситуации.
Решение. Часы обновляются через setInterval каждую секунду. Индикатор реализован как переключаемый класс: «ПОСТ СВОБОДЕН» (зелёный), «ПРИБЛИЖАЕТСЯ АВТО» / «ОЖИДАНИЕ РЕШЕНИЯ» (жёлтый), «МАШИНА ЖДЁТ» (синий), «СТАРШИЙ ВЫЗВАН» (голубой), «НАРУШИТЕЛЬ !» / «ТРЕВОГА !» (красный, мигающий).
function updateClock() {
const d = new Date();
document.getElementById('clock').textContent =
String(d.getHours()).padStart(2,'0') + ':' +
String(d.getMinutes()).padStart(2,'0') + ':' +
String(d.getSeconds()).padStart(2,'0');
}
setInterval(updateClock, 1000);
function setStatus(text, cls) {
document.getElementById('sysStatusText').textContent = text;
document.getElementById('sysStatus').className = 'sys-status' + (cls ? ' ' + cls : '');
}
Запись 3. Сравнение пропусков
Задача. Сделать две карточки для сравнения: эталонный пропуск «В БАЗЕ» и предъявленный водителем. Пропуска генерируются случайно: иногда совпадают, иногда отличаются номером, иногда предъявленный отозван.
Решение. Функция randomPass() генерирует случайный пропуск (номер, ФИО, подразделение, признак valid). Функция generateScenario() определяет, совпадает ли предъявленный с эталонным, и должно ли решение оператора быть «разрешить» или «запретить». Карточки рисуются в правой панели.
function randomPass() {
return {
num: series[Math.floor(Math.random()*series.length)] + '-' +
String(Math.floor(Math.random()*900)+100),
name: firstNames[Math.floor(Math.random()*firstNames.length)] + ' ' +
initials[Math.floor(Math.random()*initials.length)],
dept: departments[Math.floor(Math.random()*departments.length)],
valid: Math.random() > 0.25
};
}
Запись 4. Анимация шлагбаума
Задача. Шлагбаум должен плавно открываться и закрываться, с реалистичной красно-белой стрелой, лампой-индикатором и вращающейся осью. Угол стрелы — от 0 (закрыт) до 90° (открыт).
Решение. Уровень шлагбаума хранится в state.barrier.level от 0 до 1 и плавно интерполируется к target. Стрела рисуется через ctx.translate/rotate — угол равен Math.PI + level * Math.PI/2. Лампа на верху столба меняет цвет: красный при закрытом, жёлтый при движении, зелёный при открытом. Стрела состоит из 14 чередующихся сегментов.
const angle = Math.PI + level * Math.PI / 2;
ctx.save();
ctx.translate(pivotX, pivotY);
ctx.rotate(angle);
const seg = 14;
for (let i = 0; i < seg; i++) {
ctx.fillStyle = i % 2 === 0 ? '#e04040' : '#e8e8e8';
ctx.fillRect(i * (armLen / seg), -armH/2, armLen / seg, armH);
}
ctx.restore();
Запись 5. Движение автомобилей
Задача. Реализовать несколько типов машин: обычный легковой автомобиль и тёмный тонированный автомобиль для сценария «силовой проезд». Машины подъезжают к шлагбауму, останавливаются, ждут решения оператора, потом проезжают или разворачиваются.
Решение. Нарисованы две процедурные машины на Canvas. Легковой автомобиль — цветной, с градиентом, фарами и стёклами. Тонированный автомобиль — тёмный, с угловатыми фарами, решёткой радиатора, серебряными пятиспицевыми дисками. Колёса вращаются вместе с движением.
function drawCarScaled(drawFn, x, y, ...args) {
ctx.save();
ctx.translate(x, y);
ctx.scale(CAR_SCALE, CAR_SCALE);
ctx.translate(-x, -y);
drawFn(x, y, ...args);
ctx.restore();
}
Запись 6. Сценарий силового проезда и столкновения
Задача. Добавить сценарий, в котором машина не сбрасывает скорость и врезается в закрытый шлагбаум. При столкновении — искры, тревога, приезд полиции и эвакуатора.
Решение. Кнопка «Силовой проезд» запускает тонированный автомобиль со скоростью в два раза выше обычной. Если шлагбаум закрыт — срабатывает функция crash(): красная пульсирующая рамка, надпись «!!! ТРЕВОГА !!!», 40 частиц искр. Через 700 мс приезжает полицейский автомобиль с мигалками, через 1400 мс — эвакуатор с водителем.
function crash() {
logEvent('!!! СТОЛКНОВЕНИЕ СО ШЛАГБАУМОМ !!!', 'alarm');
setStatus('ТРЕВОГА !', 'alarm');
state.alarm = true;
state.alarmEnd = state.time + 5;
state.phase = 'crash_scene';
state.stats.alarms++;
state.stats.breaches++;
for (let i = 0; i < 40; i++) {
state.sparks.push({
x: l.pivotX - l.armLen - 30, y: l.topLaneY - 40,
vx: (Math.random() - .5) * 400, vy: (Math.random() - .5) * 300 - 80,
life: 1
});
}
}
Запись 7. Работа водителя эвакуатора
Задача. Водитель эвакуатора должен выйти из кабины, дойти до машины, прицепить её тросом, вернуться в кабину и увезти. Всё это — с анимацией ходьбы.
Решение. Реализован конечный автомат из 9 состояний: exiting → walking_out_down → walking_right → walking_up → attaching → returning_down → returning_left → returning_up → boarding → gone. Персонаж нарисован детально: оранжевый жилет со светоотражающими полосами, каска, трос крепится квадратичной кривой Безье.
if (td.state === 'walking_out_down') {
if (td.y < underY - 2) { td.y += SPD * dt; td.walking = true; }
else { td.y = underY; td.state = 'walking_right'; }
}
else if (td.state === 'attaching') {
td.attachTimer += dt; td.walking = false;
if (td.attachTimer > 0.6 && !state.towCable) {
state.towCable = true;
logEvent('Автомобиль зацеплен', 'info');
}
}
Запись 8. Старший смены
Задача. При отказе в проезде оператор может вызвать старшего смены. Старший должен прийти к машине, проверить документы и самостоятельно принять верное решение.
Решение. По кнопке «Вызвать старшего» создаётся объект state.senior с координатами за правым краем экрана. Он идёт к машине по нижней полосе, затем поднимается к верхней, стоит 2 секунды, «проверяет документы» и выносит верный вердикт. Отдельная функция drawSenior() рисует фигуру в форме охраны — тёмно-синий китель, фуражка, погоны.
Запись 9. Погода и время суток
Задача. Добавить переключение времени суток (день/ночь) и погоды (ясно, дождь, снег, туман). Освещение, цвета неба, поведение машин и видимость должны меняться.
Решение. Каждой комбинации соответствует свой режим освещения: day, dawn, dusk, overcast, night, wetnight, snownight. Функция skyColors() возвращает цвет неба, drawWeatherParticles() — рисует дождь, снег или туман. Дождь и снег снижают скорость машин через speedMult(): дождь — 0.75, снег — 0.6, туман — 0.85. Ночью включается ИК-режим камеры.
function speedMult() {
if (state.weather === 'rain') return 0.75;
if (state.weather === 'snow') return 0.6;
if (state.weather === 'fog') return 0.85;
return 1;
}
Запись 10. Журнал событий
Задача. Все действия в системе должны фиксироваться в журнале с отметкой времени и цветовой кодировкой.
Решение. Массив logEntries хранит до 80 последних записей. Каждая запись имеет тип: info (голубой), ok (зелёный), warn (жёлтый), alarm (красный), senior (голубой жирный). Журнал автоматически прокручивается вниз.
function logEvent(text, cls) {
const now = new Date();
const t = String(now.getHours()).padStart(2,'0') + ':' +
String(now.getMinutes()).padStart(2,'0') + ':' +
String(now.getSeconds()).padStart(2,'0');
logEntries.push({ t, text, cls: cls || 'info' });
if (logEntries.length > 80) logEntries.shift();
renderLog();
}
Запись 11. Отчёт о смене
Задача. В конце работы оператор нажимает «Закончить смену» — должно открыться модальное окно с итогами: сколько впущено, отказано, верных решений, ошибок, тревог, силовых проездов, вызовов старшего. Оценка — по проценту верных решений.
Решение. Собраны все счётчики в state.stats. Оценка рассчитывается: ≥ 95% — «ОТЛИЧНО», ≥ 80% — «ХОРОШО», ≥ 60% — «УДОВЛЕТВОРИТЕЛЬНО», иначе — «ТРЕБУЕТСЯ ПОДГОТОВКА».
const pct = s.correct / total;
if (pct >= 0.95) grade = 'ОТЛИЧНО';
else if (pct >= 0.8) grade = 'ХОРОШО';
else if (pct >= 0.6) grade = 'УДОВЛЕТВОРИТЕЛЬНО';
else grade = 'ТРЕБУЕТСЯ ПОДГОТОВКА';
Запись 12. Отметка в журнале вручную
Задача. Дать оператору возможность добавить собственную запись в журнал.
Решение. Кнопка «✎ Отметить в журнале» вызывает prompt, введённый текст добавляется в журнал с пометкой [ОПЕРАТОР].
document.getElementById('btnNote').onclick = () => {
const txt = prompt('Введите отметку для журнала:', '');
if (txt && txt.trim()) logEvent('[ОПЕРАТОР] ' + txt.trim(), 'info');
};
Запись 13. Чёткость Canvas
Задача. Картинка на экране размытая, особенно на Retina-дисплеях. Сделать рендер чётким.
Решение. Внутренний размер канваса увеличивается пропорционально devicePixelRatio, а рендер идёт в логических координатах через ctx.setTransform(). Это убирает размытие и сохраняет единую систему координат.
function resizeCanvas() {
const stage = cv.parentElement;
const dpr = window.devicePixelRatio || 1;
W = stage.clientWidth; H = stage.clientHeight;
cv.width = Math.floor(W * dpr); cv.height = Math.floor(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
window.addEventListener('resize', resizeCanvas);
Запись 14. Сброс состояния
Задача. Добавить кнопку полного сброса — вернуть систему в исходное состояние, очистить журнал, убрать все машины и объекты.
Решение. Функция resetAll() обнуляет машину, шлагбаум, полицию, эвакуатор, старшего, очищает журнал, перерисовывает карточки пропусков.
function resetAll() {
state.car = null; state.correctPass = null; state.presentedPass = null;
state.userDecision = null; state.correctDecision = null;
state.phase = 'idle'; state.barrier.target = 0; state.barrier.level = 0;
state.alarm = false; state.sparks = []; state.police = null;
state.tow = null; state.towDriver = null; state.towCable = false;
state.senior = null;
logEntries.length = 0; renderLog(); renderPasses();
setStatus('ПОСТ СВОБОДЕН');
setHint('Нажмите ...
1.2. Добавлена панель-переключатель в сайдбар
HTML (первый блок в