maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

@

Browse Source 
feat(quantik-game): фаза 2 — карта-созвездие + мир + XP/скины (MVP-мир)

Одиночный уровень → играбельный мир: карта-созвездие из 6 физ-уровней
(2 главы, нарастающая сложность), разблокировка по звёздам, клиентский
XP/уровень игрока, пикер из 8 скинов (тинт героя+нарратора), нарратор
PetSprite на интро/победе (mood по звёздам). Навигация карта→интро→игра→
успех→карта/дальше; кнопка «Дальше» пересчитывает nextPlayable после
дозагрузки прогресса (фикс stale-hasNext). Логика прогресса — чистый
модуль progress-logic.js (unlock/XP/группировка). Только фронт, без
бэкенда: XP агрегируется из game_progress (Ф1). Каждый уровень проверен
на реальном движке (выигрываем + обе звезды достижимы); цепочка
разблокировки доказуемо проходима. npm test 251/8 baseline; lint:routes 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@
This commit is contained in:
Maxim Dolgolyov
2026-06-13 16:24:31 +03:00
parent 351251d652
commit 0f3e12426a
9 changed files with 1539 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/game/levels.js
+357 -63
View File
@@ -1,107 +1,401 @@
'use strict';
/* ════════════════════════════════════════════════════════════════════════
Квантик — Законы Мира · Реестр уровней (Фаза 1, MVP).
Квантик — Законы Мира · Реестр уровней (Фаза 2 — мир из 6 физ-уровней).
Уровень = СПЕКА SimForge (данные, не код) + блок `goal` (победа), который
движок (_sim_engine.js) умеет с Фазы 0. Игрок не управляет героем напрямую —
он «чинит закон мира»: крутит слайдеры params (угол/скорость), затем «Запуск»,
и симуляция проигрывается к цели.
он «чинит закон мира»: крутит слайдеры params (угол/скорость/жёсткость…),
затем «Запуск», и симуляция проигрывается к цели.
ИСТОЧНИК УРОВНЕЙ (решение зафиксировано в CONTEXT.md):
— СЕЙЧАС (Фаза 1): встроенные данные здесь, window.QuantikLevels.
— ПОЗЖЕ (Фаза 5): уровни авторятся в sim-builder и хранятся в custom_sims
(cat='game'); реестр пополнится загрузкой опубликованных спек с сервера.
── МЕТАДАННЫЕ УРОВНЯ (Фаза 2) ───────────────────────────────────────────
{
id, // == level_id для /api/game/progress
title, // отображаемое имя узла карты
chapter, // ключ главы-созвездия (группировка на карте)
order, // глобальный порядок (для «предыдущих» при разблокировке и «Дальше»)
unlockStars, // порог: сумма звёзд во ВСЕХ предыдущих уровнях, чтобы открыть (деф. 0)
par_ms?, // норматив времени для 3-й звезды (мс мирового времени)
subject?, // тема (физика)
hint?, // подсказка-нарратив для интро
spec // обычная спека SimForge с блоком goal
}
Звёзды: зв.1 — достичь цели; зв.2 — собрать бонус (кристалл); зв.3 — уложиться
в par_ms. par-звезда выражается напрямую через мировое время t: `t*1000 <= PAR`
(вычисляется в момент победы; идентификатор tries для неё не нужен).
Форма записи уровня:
{ id, title, subject?, hint?, spec }
где spec — обычная спека SimForge с блоком goal. id == level_id для
/api/game/progress (LS.gameProgressSubmit(id, ...)).
ИСТОЧНИК УРОВНЕЙ: встроенные данные здесь (window.QuantikLevels). Авторённые
уровни (custom_sims cat='game') подмешаются в Фазе 5 (реестр станет асинхронным).
⛔ Без eval/Function. Все «числовые» поля могут быть числом ИЛИ строкой-
выражением (их безопасно вычисляет SimExpr на клиенте).
════════════════════════════════════════════════════════════════════════ */
(function (global) {
/* ── Уровень 1: «Артиллерия Квантика» ──────────────────────────────────
Герой — светящаяся точка-тело (body) с кометной трассой (P2). Запускается
из начала координат под углом θ со скоростью v; гравитация тянет вниз.
Цель — попасть в портал; бонус-звезда — собрать кристалл по дороге.
Параметры подобраны так, чтобы уровень был ПРОХОДИМ в пределах слайдеров. */
var PORTAL_X = 8; // центр портала по X (мир)
var PORTAL_Y = 0; // центр портала по Y (на «земле» y=0)
var PORTAL_R = 0.7; // радиус попадания
var STAR_X = 4; // бонус-кристалл (на восходящей ветви хорошей дуги)
var STAR_Y = 2.6;
var STAR_R = 0.65;
var BG = '#0D0D1A';
var GROUND = '#334155';
var HERO = '#22D3EE'; // дефолтный цвет героя (тинтуется скином — см. quantik-game.js)
var PORTAL = '#A78BFA'; // фиолет — цель
var CRYSTAL = '#F472B6'; // розовый — бонус
/* helper: общий объект «герой-тело» (point с body) — стартует из (sx,sy). */
function hero(sx, sy, vxExpr, vyExpr) {
return {
id: 'ball', type: 'point', r: 7, color: HERO,
x: sx, y: sy,
glow: true, glowColor: HERO, trail: true, trailColor: HERO, trailFade: true,
body: { mass: 1, vx: vxExpr, vy: vyExpr }
};
}
/* helper: светящийся портал-кольцо (визуал цели). */
function portalObjs(px, py, r) {
return [
{ type: 'circle', x: px, y: py, r: r, color: PORTAL, width: 3, glow: true, glowColor: PORTAL },
{ type: 'circle', x: px, y: py, r: r * 0.45, color: PORTAL, width: 2, opacity: 0.7 },
{ type: 'label', x: px, y: py + r + 0.9, text: 'портал', color: PORTAL, size: 12 }
];
}
function crystalObjs(cx, cy, r) {
return [
{ type: 'circle', x: cx, y: cy, r: r, color: CRYSTAL, width: 2, glow: true, glowColor: CRYSTAL },
{ type: 'label', x: cx, y: cy + r + 0.8, text: 'кристалл', color: CRYSTAL, size: 11 }
];
}
/* ─────────────────────────────────────────────────────────────────────────
Глава I — «Кинематика» (созвездие): полёт под действием гравитации.
──────────────────────────────────────────────────────────────────────── */
/* Уровень 1: «Артиллерия Квантика» — базовый бросок под углом. */
var L1_PX = 8, L1_PY = 0.7, L1_PR = 0.75;
var L1_CX = 4, L1_CY = 2.7, L1_CR = 0.7;
var artillery1 = {
id: 'phys-artillery-1',
title: 'Артиллерия Квантика',
title: 'Артиллерия',
chapter: 'kinematics',
order: 1,
unlockStars: 0,
par_ms: 1500,
subject: 'physics',
hint: 'Подберите угол и скорость, чтобы Квантик долетел до портала. Соберите кристалл по дороге — это бонусная звезда.',
hint: 'Подбери угол и скорость, чтобы Квантик долетел до портала. Собери кристалл по дороге — это вторая звезда. Быстрый бросок даст третью.',
spec: {
specVersion: 1,
meta: { title: 'Артиллерия Квантика', desc: 'Закон движения: бросок под углом к горизонту.' },
viewport: { xmin: -1, xmax: 12, ymin: -1.2, ymax: 7, grid: true, axes: true, bg: '#0D0D1A' },
viewport: { xmin: -1, xmax: 12, ymin: -1.2, ymax: 7, grid: true, axes: true, bg: BG },
params: [
{ name: 'theta', label: 'Угол', min: 10, max: 80, step: 1, value: 45, unit: '°' },
{ name: 'v', label: 'Скорость', min: 5, max: 20, step: 0.5, value: 10, unit: 'м/с' }
{ name: 'v', label: 'Скорость', min: 5, max: 20, step: 0.5, value: 10, unit: 'м/с' }
],
physics: {
enabled: true,
gravity: { x: 0, y: -9.8 }
},
physics: { enabled: true, gravity: { x: 0, y: -9.8 } },
objects: [
// «Земля» — линия y=0 для ориентира.
{ type: 'segment', x1: -1, y1: 0, x2: 12, y2: 0, color: '#334155', width: 2 },
// Бонус-кристалл (звезда). Контурный кружок-маркер.
{ type: 'circle', x: STAR_X, y: STAR_Y, r: STAR_R, color: '#FBBF24', width: 2, glow: true },
{ type: 'label', x: STAR_X, y: STAR_Y + 0.7, text: 'кристалл', color: '#FBBF24', size: 12 },
// Портал — цель. Светящийся кружок.
{ type: 'circle', x: PORTAL_X, y: PORTAL_Y + PORTAL_R, r: PORTAL_R, color: '#22D3EE', width: 3, glow: true, glowColor: '#22D3EE' },
{ type: 'label', x: PORTAL_X, y: PORTAL_Y + 2.0, text: 'портал', color: '#22D3EE', size: 12 },
// Герой Квантик — физ-тело, стартует из (0,0) со скоростью (vx,vy).
// glow + кометная трасса (P2).
{
id: 'ball', type: 'point', r: 7, color: '#06D6E0',
x: 0, y: 0,
glow: true, glowColor: '#06D6E0', trail: true, trailColor: '#06D6E0',
body: {
mass: 1,
vx: 'v*cos(theta*pi/180)',
vy: 'v*sin(theta*pi/180)'
}
},
// Живые показания скорости (бейдж-оверлей).
{ type: 'segment', x1: -1, y1: 0, x2: 12, y2: 0, color: GROUND, width: 2 }
].concat(crystalObjs(L1_CX, L1_CY, L1_CR), portalObjs(L1_PX, L1_PY, L1_PR), [
hero(0, 0, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
{ type: 'readout', label: 'v', expr: 'v', unit: 'м/с', precision: 1 },
{ type: 'readout', label: 'θ', expr: 'theta', unit: '°', precision: 0 }
],
]),
goal: {
title: 'Попади в портал',
hint: 'Квантик должен достичь портала. Бонус: собери кристалл по дороге.',
// Победа: герой в радиусе портала.
when: 'hypot(ball.x - ' + PORTAL_X + ', ball.y - ' + (PORTAL_Y + PORTAL_R) + ') < ' + PORTAL_R,
// Мягкий проигрыш: улетел далеко за поле (промах) — можно перезапустить.
hint: 'Достигни портала. Бонус: собери кристалл и уложись в норматив.',
when: 'hypot(ball.x - ' + L1_PX + ', ball.y - ' + L1_PY + ') < ' + L1_PR,
fail: 'ball.x > 11.5 || ball.y < -1.0',
stars: [
{ when: 'hypot(ball.x - ' + STAR_X + ', ball.y - ' + STAR_Y + ') < ' + STAR_R, label: 'Собрал кристалл' }
{ when: 'hypot(ball.x - ' + L1_CX + ', ball.y - ' + L1_CY + ') < ' + L1_CR, label: 'Собрал кристалл' },
{ when: 't*1000 <= 1500', label: 'Быстро (≤1.5 с)' }
]
}
}
};
var LEVELS = [artillery1];
/* Уровень 2: «Перелёт через стену» — между стартом и порталом стоит высокая
стена; нужно перебросить Квантика по дуге. Кристалл — на вершине дуги. */
var L2_PX = 9.5, L2_PY = 0.7, L2_PR = 0.8;
var L2_WALLX = 5, L2_WALLH = 3.6; // вертикальная стена-препятствие
var L2_CX = 5, L2_CY = 4.4, L2_CR = 0.7; // кристалл над стеной
var arc2 = {
id: 'phys-arc-2',
title: 'Перелёт через стену',
chapter: 'kinematics',
order: 2,
unlockStars: 1,
par_ms: 1800,
subject: 'physics',
hint: 'Стена преграждает прямой путь. Подбери крутую дугу — переброс Квантика через гребень в портал. Кристалл ждёт на вершине.',
spec: {
specVersion: 1,
meta: { title: 'Перелёт через стену', desc: 'Дальность и высота броска: перебрось препятствие.' },
viewport: { xmin: -1, xmax: 13, ymin: -1.2, ymax: 8, grid: true, axes: true, bg: BG },
params: [
{ name: 'theta', label: 'Угол', min: 20, max: 85, step: 1, value: 60, unit: '°' },
{ name: 'v', label: 'Скорость', min: 6, max: 22, step: 0.5, value: 12, unit: 'м/с' }
],
physics: { enabled: true, gravity: { x: 0, y: -9.8 } },
objects: [
{ type: 'segment', x1: -1, y1: 0, x2: 13, y2: 0, color: GROUND, width: 2 },
// стена-препятствие
{ type: 'segment', x1: L2_WALLX, y1: 0, x2: L2_WALLX, y2: L2_WALLH, color: '#475569', width: 6 },
{ type: 'label', x: L2_WALLX, y: L2_WALLH + 0.5, text: 'стена', color: '#94A3B8', size: 11 }
].concat(crystalObjs(L2_CX, L2_CY, L2_CR), portalObjs(L2_PX, L2_PY, L2_PR), [
hero(0, 0, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
{ type: 'readout', label: 'v', expr: 'v', unit: 'м/с', precision: 1 },
{ type: 'readout', label: 'θ', expr: 'theta', unit: '°', precision: 0 }
]),
goal: {
title: 'Перебрось стену в портал',
hint: 'Перелети стену и попади в портал. Бонус: задень кристалл на вершине.',
when: 'hypot(ball.x - ' + L2_PX + ', ball.y - ' + L2_PY + ') < ' + L2_PR,
// проигрыш: врезался в стену (рядом с ней и ниже её верха) либо улетел/упал за поле
fail: '(abs(ball.x - ' + L2_WALLX + ') < 0.22 && ball.y < ' + L2_WALLH + ') || ball.x > 12.5 || ball.y < -1.0',
stars: [
{ when: 'hypot(ball.x - ' + L2_CX + ', ball.y - ' + L2_CY + ') < ' + L2_CR, label: 'Собрал кристалл' },
{ when: 't*1000 <= 1800', label: 'Быстро (≤1.8 с)' }
]
}
}
};
/* Уровень 3: «Отскок» — рабочая зона как упругий ящик (пол + правая стена).
Прямого пути к высокому порталу слева-вверху нет: брось вправо, упругий
отскок от правой стены и пола приводит Квантика по ломаной к порталу.
Кристалл — у правой стены (на дуге до отскока). Тюнинг угла/скорости/упругости. */
var L3_PX = 1.6, L3_PY = 4.6, L3_PR = 0.95; // портал слева-вверху
var L3_CX = 8.4, L3_CY = 3.4, L3_CR = 0.85; // кристалл у правой стены
var bounce3 = {
id: 'phys-bounce-3',
title: 'Отскок',
chapter: 'kinematics',
order: 3,
unlockStars: 2,
par_ms: 2800,
subject: 'physics',
hint: 'Портал слева-вверху, прямого пути нет. Брось вправо — упругая стена отразит Квантика обратно. Поиграй упругостью: чем жёстче отскок, тем выше дуга назад.',
spec: {
specVersion: 1,
meta: { title: 'Отскок', desc: 'Упругое столкновение: отскок от стены.' },
viewport: { xmin: -1, xmax: 11, ymin: -1.0, ymax: 8, grid: true, axes: true, bg: BG },
params: [
{ name: 'theta', label: 'Угол', min: 20, max: 75, step: 1, value: 50, unit: '°' },
{ name: 'v', label: 'Скорость', min: 8, max: 24, step: 0.5, value: 16, unit: 'м/с' },
{ name: 'el', label: 'Упругость', min: 0.55, max: 0.95, step: 0.01, value: 0.8 }
],
physics: {
enabled: true,
gravity: { x: 0, y: -9.8 },
restitution: 'el',
walls: [{ side: 'bottom' }, { side: 'right' }]
},
objects: [
{ type: 'segment', x1: -1, y1: 0, x2: 11, y2: 0, color: GROUND, width: 3 },
{ type: 'segment', x1: 11, y1: 0, x2: 11, y2: 8, color: '#475569', width: 4 },
{ type: 'label', x: 10.2, y: 7.2, text: 'упр. стена', color: '#94A3B8', size: 11 }
].concat(crystalObjs(L3_CX, L3_CY, L3_CR), portalObjs(L3_PX, L3_PY, L3_PR), [
hero(0, 0.2, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
{ type: 'readout', label: 'упр', expr: 'el', precision: 2 },
{ type: 'readout', label: 'v', expr: 'v', unit: 'м/с', precision: 1 }
]),
goal: {
title: 'Отскоком в портал',
hint: 'Отрази Квантика от правой стены так, чтобы он вернулся в портал слева-вверху. Бонус: задень кристалл у стены.',
when: 'hypot(ball.x - ' + L3_PX + ', ball.y - ' + L3_PY + ') < ' + L3_PR,
fail: 't > 8',
stars: [
{ when: 'hypot(ball.x - ' + L3_CX + ', ball.y - ' + L3_CY + ') < ' + L3_CR, label: 'Собрал кристалл' },
{ when: 't*1000 <= 2800', label: 'Быстро (≤2.8 с)' }
]
}
}
};
/* ─────────────────────────────────────────────────────────────────────────
Глава II — «Динамика» (созвездие): силы, пружины, орбиты.
──────────────────────────────────────────────────────────────────────── */
/* Уровень 4: «Маятник» — Квантик подвешен на пружине к якорю сверху; даём ему
горизонтальный толчок. Пружина (закон Гука) тянет назад — он качается дугой.
Подбери начальную скорость и жёсткость, чтобы нижняя точка дуги прошла через
портал. Без гравитации вниз — чистая пружинная динамика к центру. */
var L4_ANCHOR_X = 4, L4_ANCHOR_Y = 7.4;
var L4_REST = 1.2; // короткая длина покоя -> пружина растянута -> сильный возврат
var L4_START_Y = 2.6; // тело висит ниже якоря (растяжение ~3.6)
var L4_PX = 7.4, L4_PY = 4.6, L4_PR = 1.0; // портал на правом плече дуги
var L4_CX = 4.0, L4_CY = 6.0, L4_CR = 0.9; // кристалл у верхней точки качания (ближе к якорю)
var pendulum4 = {
id: 'phys-pendulum-4',
title: 'Маятник',
chapter: 'dynamics',
order: 4,
unlockStars: 4,
par_ms: 3600,
subject: 'physics',
hint: 'Квантик висит на растянутой пружине у якоря. Толкни его вбок — закон Гука раскачает дугу вверх. Подбери толчок и жёсткость, чтобы плечо дуги достало портал.',
spec: {
specVersion: 1,
meta: { title: 'Маятник на пружине', desc: 'Закон Гука: гармонические колебания.' },
viewport: { xmin: -2, xmax: 11, ymin: -1, ymax: 9, grid: true, axes: true, bg: BG },
params: [
{ name: 'push', label: 'Толчок', min: 4, max: 18, step: 0.5, value: 10, unit: 'м/с' },
{ name: 'k', label: 'Жёсткость', min: 8, max: 50, step: 1, value: 24 }
],
physics: {
enabled: true,
gravity: { x: 0, y: 0 }, // чисто пружинная динамика (анализ закона Гука)
springs: [
{ a: [L4_ANCHOR_X, L4_ANCHOR_Y], b: 'ball', k: 'k', length: L4_REST }
]
},
objects: [
// якорь
{ type: 'circle', x: L4_ANCHOR_X, y: L4_ANCHOR_Y, r: 0.18, color: '#94A3B8', width: 0, fill: '#94A3B8' },
{ type: 'label', x: L4_ANCHOR_X, y: L4_ANCHOR_Y + 0.6, text: 'якорь', color: '#94A3B8', size: 11 },
// линия-пружина (визуальная связь якорь→тело)
{ type: 'segment', x1: L4_ANCHOR_X, y1: L4_ANCHOR_Y, x2: 'ball.x', y2: 'ball.y', color: '#475569', width: 1, lineStyle: 'dashed' }
].concat(crystalObjs(L4_CX, L4_CY, L4_CR), portalObjs(L4_PX, L4_PY, L4_PR), [
// тело висит ниже якоря, горизонтальный толчок вправо
hero(L4_ANCHOR_X, L4_START_Y, 'push', '0'),
{ type: 'readout', label: 'толчок', expr: 'push', unit: 'м/с', precision: 1 },
{ type: 'readout', label: 'k', expr: 'k', precision: 0 }
]),
goal: {
title: 'Качни в портал',
hint: 'Раскачай Квантика на пружине так, чтобы дуга прошла через портал. Бонус: задень кристалл у верхней точки.',
when: 'hypot(ball.x - ' + L4_PX + ', ball.y - ' + L4_PY + ') < ' + L4_PR,
fail: 't > 12',
stars: [
{ when: 'hypot(ball.x - ' + L4_CX + ', ball.y - ' + L4_CY + ') < ' + L4_CR, label: 'Собрал кристалл' },
{ when: 't*1000 <= 3600', label: 'Быстро (≤3.6 с)' }
]
}
}
};
/* Уровень 5: «Орбита» — центральная пружина-«гравитационный колодец» к центру
(закон Гука к центру == гармонический осциллятор == эллиптические орбиты).
Даём тангенциальную скорость; подбери её и силу колодца, чтобы орбита прошла
через портал-кольцо на её пути. */
var L5_CENTER_X = 4, L5_CENTER_Y = 3;
var L5_START_X = 4, L5_START_Y = 6; // старт над центром (радиус 3)
var L5_PX = 6.6, L5_PY = 3, L5_PR = 0.95; // портал на правом плече орбиты (внутри замкнутого витка)
var L5_CX = 4, L5_CY = 0.1, L5_CR = 0.9; // кристалл в нижней точке орбиты
var orbit5 = {
id: 'phys-orbit-5',
title: 'Орбита',
chapter: 'dynamics',
order: 5,
unlockStars: 6,
par_ms: 4200,
subject: 'physics',
hint: 'Колодец притягивает Квантика к центру (закон Гука). Дай ему боковой разгон — он выйдет на орбиту. Подбери скорость и силу колодца, чтобы виток прошёл сквозь портал.',
spec: {
specVersion: 1,
meta: { title: 'Орбита', desc: 'Центральная сила: замкнутая орбита через цель.' },
viewport: { xmin: -2, xmax: 11, ymin: -3, ymax: 9, grid: true, axes: true, bg: BG },
params: [
{ name: 'vt', label: 'Боковой разгон', min: 2, max: 14, step: 0.25, value: 6, unit: 'м/с' },
{ name: 'g', label: 'Сила колодца', min: 4, max: 30, step: 0.5, value: 12 }
],
physics: {
enabled: true,
gravity: { x: 0, y: 0 },
// пружина к центру с нулевой длиной покоя == центральная гармоническая сила F=-k·r
springs: [
{ a: [L5_CENTER_X, L5_CENTER_Y], b: 'ball', k: 'g', length: 0 }
]
},
objects: [
// центр-колодец
{ type: 'circle', x: L5_CENTER_X, y: L5_CENTER_Y, r: 0.3, color: '#F59E0B', width: 0, fill: '#F59E0B', glow: true, glowColor: '#F59E0B' },
{ type: 'label', x: L5_CENTER_X, y: L5_CENTER_Y - 0.9, text: 'колодец', color: '#F59E0B', size: 11 }
].concat(crystalObjs(L5_CX, L5_CY, L5_CR), portalObjs(L5_PX, L5_PY, L5_PR), [
// старт над центром, скорость вправо (vt) -> орбита по часовой
hero(L5_START_X, L5_START_Y, 'vt', '0'),
{ type: 'readout', label: 'разгон', expr: 'vt', unit: 'м/с', precision: 2 },
{ type: 'readout', label: 'сила', expr: 'g', precision: 1 }
]),
goal: {
title: 'Выйди на орбиту через портал',
hint: 'Орбита Квантика должна пройти через портал-кольцо. Бонус: задень кристалл в дальней точке.',
when: 'hypot(ball.x - ' + L5_PX + ', ball.y - ' + L5_PY + ') < ' + L5_PR,
fail: 't > 14',
stars: [
{ when: 'hypot(ball.x - ' + L5_CX + ', ball.y - ' + L5_CY + ') < ' + L5_CR, label: 'Собрал кристалл' },
{ when: 't*1000 <= 4200', label: 'Быстро (≤4.2 с)' }
]
}
}
};
/* Уровень 6: «Гравитационный манёвр» — капстоун главы. Гравитация тянет вниз,
но в центре поля — притягивающий колодец (пружина к центру), искривляющий путь.
Брось Квантика так, чтобы колодец завернул его дугу в портал в дальнем верхнем
углу. Комбинируем бросок под углом, гравитацию и центральную силу. */
var L6_WELL_X = 5, L6_WELL_Y = 3;
var L6_PX = 9.4, L6_PY = 5.6, L6_PR = 1.0; // портал в дальнем верхнем углу
var L6_CX = 5, L6_CY = 4.3, L6_CR = 0.85; // кристалл над колодцем (на восходящей дуге)
var slingshot6 = {
id: 'phys-slingshot-6',
title: 'Гравиманёвр',
chapter: 'dynamics',
order: 6,
unlockStars: 8,
par_ms: 3400,
subject: 'physics',
hint: 'Гравитация тянет вниз, а колодец в центре притягивает к себе. Брось Квантика так, чтобы колодец завернул его дугу в портал в дальнем верхнем углу. Подбери угол, скорость и силу колодца.',
spec: {
specVersion: 1,
meta: { title: 'Гравитационный манёвр', desc: 'Гравитация + центральная сила: манёвр у колодца.' },
viewport: { xmin: -1, xmax: 11, ymin: -1, ymax: 8, grid: true, axes: true, bg: BG },
params: [
{ name: 'theta', label: 'Угол', min: 20, max: 80, step: 1, value: 55, unit: '°' },
{ name: 'v', label: 'Скорость', min: 8, max: 22, step: 0.5, value: 14, unit: 'м/с' },
{ name: 'g', label: 'Сила колодца', min: 0, max: 16, step: 0.5, value: 6 }
],
physics: {
enabled: true,
gravity: { x: 0, y: -9.8 },
springs: [
{ a: [L6_WELL_X, L6_WELL_Y], b: 'ball', k: 'g', length: 0 }
]
},
objects: [
{ type: 'segment', x1: -1, y1: 0, x2: 11, y2: 0, color: GROUND, width: 3 },
// колодец-масса
{ type: 'circle', x: L6_WELL_X, y: L6_WELL_Y, r: 0.3, color: '#F59E0B', width: 0, fill: '#F59E0B', glow: true, glowColor: '#F59E0B' },
{ type: 'label', x: L6_WELL_X, y: L6_WELL_Y - 0.9, text: 'колодец', color: '#F59E0B', size: 11 }
].concat(crystalObjs(L6_CX, L6_CY, L6_CR), portalObjs(L6_PX, L6_PY, L6_PR), [
hero(0, 0.2, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
{ type: 'readout', label: 'сила', expr: 'g', precision: 1 },
{ type: 'readout', label: 'θ', expr: 'theta', unit: '°', precision: 0 }
]),
goal: {
title: 'Манёвром в портал',
hint: 'Используй колодец, чтобы завернуть дугу Квантика в дальний верхний портал. Бонус: задень кристалл на восходящей дуге.',
when: 'hypot(ball.x - ' + L6_PX + ', ball.y - ' + L6_PY + ') < ' + L6_PR,
fail: 'ball.y < -1 || t > 10',
stars: [
{ when: 'hypot(ball.x - ' + L6_CX + ', ball.y - ' + L6_CY + ') < ' + L6_CR, label: 'Собрал кристалл' },
{ when: 't*1000 <= 3400', label: 'Быстро (≤3.4 с)' }
]
}
}
};
var LEVELS = [artillery1, arc2, bounce3, pendulum4, orbit5, slingshot6];
/* Метаданные глав (созвездий) — для заголовков/оформления карты. */
var CHAPTERS = {
kinematics: { key: 'kinematics', title: 'Кинематика', subtitle: 'Полёт и гравитация', accent: '#22D3EE' },
dynamics: { key: 'dynamics', title: 'Динамика', subtitle: 'Силы, пружины, орбиты', accent: '#A78BFA' }
};
function list() { return LEVELS.slice(); }
function get(id) {
for (var i = 0; i < LEVELS.length; i++) if (LEVELS[i].id === id) return LEVELS[i];
return null;
}
function chapter(key) { return CHAPTERS[key] || { key: key, title: key, subtitle: '', accent: '#22D3EE' }; }
global.QuantikLevels = { list: list, get: get, LEVELS: LEVELS };
global.QuantikLevels = {
list: list, get: get, chapter: chapter,
LEVELS: LEVELS, CHAPTERS: CHAPTERS
};
})(typeof window !== 'undefined' ? window : this);
frontend/js/game/map.js
+385
View File
@@ -0,0 +1,385 @@
'use strict';
/* ════════════════════════════════════════════════════════════════════════
Квантик — Законы Мира · Карта-созвездие (Фаза 2).
Рисует мир как звёздную карту: каждая глава (chapter) — отдельное созвездие,
уровни — узлы-«звёзды», соединённые линиями по порядку. Узел показывает статус
(заблокирован / доступен / пройден + число звёзд). По клику на доступный узел —
колбэк onPlay(level).
Зависит от:
window.QuantikLevels — реестр уровней (Ф1/Ф2)
window.QuantikProgress — чистая логика прогресса/разблокировки/XP (Ф2)
window.PetSprite — нарратор-Квантик (SVG)
window.QuantikMap.create({ host, headerHost, onPlay, getSkin, onSkin }) -> {
render(progressMap), // перерисовать карту + шапку под новый прогресс
destroy()
}
⛔ Без эмодзи — звёзды/замки/иконки только inline SVG. Без eval/Function.
════════════════════════════════════════════════════════════════════════ */
(function (global) {
var doc = global.document;
var NS = 'http://www.w3.org/2000/svg';
function el(tag, cls, html) {
var n = doc.createElement(tag);
if (cls) n.className = cls;
if (html != null) n.innerHTML = html;
return n;
}
function svgEl(tag, attrs) {
var n = doc.createElementNS(NS, tag);
if (attrs) for (var k in attrs) if (attrs.hasOwnProperty(k)) n.setAttribute(k, attrs[k]);
return n;
}
/* ── inline SVG иконки (без эмодзи) ── */
function starPath() { return 'M12 2 15.1 8.6 22 9.3 17 14.1 18.2 21 12 17.6 5.8 21 7 14.1 2 9.3 8.9 8.6 Z'; }
function starSvg(filled, size) {
var s = size || 16;
var fill = filled ? '#FBBF24' : 'none';
var stroke = filled ? '#FBBF24' : 'rgba(148,163,184,0.55)';
return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="' + fill +
'" stroke="' + stroke + '" stroke-width="1.5" stroke-linejoin="round"><path d="' + starPath() + '"/></svg>';
}
function lockSvg(size) {
var s = size || 18;
return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="none" ' +
'stroke="rgba(226,232,240,0.85)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
'<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>';
}
function playSvg(size) {
var s = size || 18;
return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="currentColor" ' +
'stroke="none"><path d="M8 5.5 19 12 8 18.5 Z"/></svg>';
}
function checkSvg(size) {
var s = size || 18;
return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="none" ' +
'stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">' +
'<path d="M4 12.5 10 18.5 20 6"/></svg>';
}
/* ── Раскладка узлов созвездия ──────────────────────────────────────────
Для каждой главы раскладываем её уровни по «созвездию»: лёгкая зигзаг-дуга
внутри своего вертикального пояса. Координаты в % ширины ленты главы. */
function layoutNodes(levels) {
var n = levels.length;
var pts = [];
for (var i = 0; i < n; i++) {
// x идёт слева-направо, y — мягкий зигзаг (созвездие, не прямая)
var x = n === 1 ? 50 : (12 + (76 * i / (n - 1)));
var y = 50 + (i % 2 === 0 ? -16 : 16) + (i % 3 === 0 ? 6 : -4);
pts.push({ x: x, y: y });
}
return pts;
}
/* ── Звёздное небо (статичные точки на canvas-фоне через SVG) ──────────── */
function buildStarfield(seedCount) {
var g = svgEl('g', { class: 'qm-stars' });
var rnd = mulberry32(0x51ec7 + seedCount);
for (var i = 0; i < seedCount; i++) {
var cx = rnd() * 100, cy = rnd() * 100;
var r = 0.08 + rnd() * 0.22;
var op = 0.25 + rnd() * 0.55;
var c = svgEl('circle', { cx: cx, cy: cy, r: r, fill: '#E2E8F0', opacity: op.toFixed(2) });
c.style.setProperty('--tw', (1.6 + rnd() * 3).toFixed(2) + 's');
c.style.setProperty('--td', (rnd() * 3).toFixed(2) + 's');
c.classList.add('qm-tw');
g.appendChild(c);
}
return g;
}
function mulberry32(a) {
return function () {
a |= 0; a = a + 0x6D2B79F5 | 0;
var t = Math.imul(a ^ a >>> 15, 1 | a);
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
return ((t ^ t >>> 14) >>> 0) / 4294967296;
};
}
/* ════════════════════════ Создание карты ════════════════════════ */
function create(opts) {
opts = opts || {};
var host = opts.host;
var headerHost = opts.headerHost;
var onPlay = typeof opts.onPlay === 'function' ? opts.onPlay : function () {};
var getSkin = typeof opts.getSkin === 'function' ? opts.getSkin : function () { return 'cyan'; };
var onSkin = typeof opts.onSkin === 'function' ? opts.onSkin : function () {};
if (!host) return null;
var Levels = global.QuantikLevels;
var Prog = global.QuantikProgress;
if (!Levels || !Prog) return null;
var revealTimer = null;
function clearReveal() { if (revealTimer) { clearTimeout(revealTimer); revealTimer = null; } }
/* ── Шапка: нарратор + XP-бар + всего звёзд + скины ── */
function renderHeader(progressMap) {
if (!headerHost) return;
headerHost.innerHTML = '';
var levels = Levels.list();
var xp = Prog.computeXp(levels, progressMap);
var pl = Prog.playerLevel(xp);
var tStars = Prog.totalStars(levels, progressMap);
var maxStars = levels.reduce(function (s, L) { return s + (L.spec && L.spec.goal && L.spec.goal.stars ? L.spec.goal.stars.length : 0); }, 0);
var wrap = el('div', 'qm-header-inner');
// Нарратор-Квантик (mood по уровню игрока)
var mood = pl.level >= 5 ? 'ecstatic' : (pl.level >= 2 ? 'happy' : 'neutral');
var narr = el('div', 'qm-narrator');
if (global.PetSprite) {
var petLvl = Math.min(8, Math.max(1, pl.level));
narr.innerHTML = '<div class="qm-pet">' + global.PetSprite.render(petLvl, mood, [], getSkin(), 0, 'none') + '</div>';
}
var bubble = el('div', 'qm-bubble');
bubble.appendChild(el('div', 'qm-bubble-t', narrLine(pl, tStars, maxStars)));
narr.appendChild(bubble);
wrap.appendChild(narr);
// XP / уровень игрока
var stats = el('div', 'qm-stats');
var lvlBox = el('div', 'qm-level');
lvlBox.innerHTML = '<span class="qm-level-num">' + pl.level + '</span><span class="qm-level-lbl">уровень Квантика</span>';
stats.appendChild(lvlBox);
var xpBox = el('div', 'qm-xpbox');
var xpHead = el('div', 'qm-xp-head');
xpHead.innerHTML = '<span>' + xp + ' XP</span><span class="qm-xp-next">' +
(pl.xpForNext > 0 ? ('до ур. ' + (pl.level + 1) + ': ' + Math.max(0, pl.xpForNext - pl.xpInto) + ' XP') : 'максимум') + '</span>';
xpBox.appendChild(xpHead);
var bar = el('div', 'qm-xp-bar');
var fill = el('div', 'qm-xp-fill');
fill.style.width = '0%';
bar.appendChild(fill);
xpBox.appendChild(bar);
stats.appendChild(xpBox);
// всего звёзд
var starBox = el('div', 'qm-starcount');
starBox.innerHTML = starSvg(true, 18) + '<span>' + tStars + ' / ' + maxStars + '</span>';
stats.appendChild(starBox);
wrap.appendChild(stats);
// Скины
wrap.appendChild(buildSkinPicker(xp, tStars));
headerHost.appendChild(wrap);
// анимация XP-бара (после вставки в DOM)
requestAnimationFrame(function () {
fill.style.width = (pl.progress01 * 100).toFixed(1) + '%';
});
}
function narrLine(pl, tStars, maxStars) {
if (tStars === 0) return 'Привет! Я — Квантик. Помоги мне починить законы мира — выбери уровень и подкрути формулы.';
if (tStars >= maxStars) return 'Все звёзды собраны! Ты настоящий мастер законов мира.';
if (pl.level >= 5) return 'Невероятно! Уровень ' + pl.level + '. Осталось всего ' + (maxStars - tStars) + ' звёзд.';
if (pl.level >= 3) return 'Отлично идём — уровень ' + pl.level + '. Звёзды открывают новые созвездия.';
return 'Уже ' + tStars + ' звёзд! Собирай больше, чтобы открыть новые уровни.';
}
/* Палитра скинов: первые открыты, остальные — за XP/звёзды. */
var SKIN_GATES = [
{ key: 'cyan', name: 'Циан', need: 0 },
{ key: 'purple', name: 'Аметист', need: 0 },
{ key: 'green', name: 'Изумруд', needStars: 2 },
{ key: 'pink', name: 'Магента', needStars: 4 },
{ key: 'gold', name: 'Золото', needStars: 7 },
{ key: 'blue', name: 'Сапфир', needXp: 600 },
{ key: 'orange', name: 'Янтарь', needXp: 1000 },
{ key: 'indigo', name: 'Индиго', needStars: 11 }
];
function skinUnlocked(g, xp, stars) {
if (g.needStars && stars < g.needStars) return false;
if (g.needXp && xp < g.needXp) return false;
if (g.need && stars < g.need) return false;
return true;
}
function buildSkinPicker(xp, stars) {
var box = el('div', 'qm-skins');
box.appendChild(el('div', 'qm-skins-lbl', 'Скин'));
var row = el('div', 'qm-skins-row');
var cur = getSkin();
var pal = (global.PetSprite && global.PetSprite.PALETTES) || {};
SKIN_GATES.forEach(function (g) {
var unlocked = skinUnlocked(g, xp, stars);
var sw = el('button', 'qm-skin' + (cur === g.key ? ' active' : '') + (unlocked ? '' : ' locked'));
sw.type = 'button';
sw.style.setProperty('--sk', pal[g.key] || '#06D6E0');
sw.title = unlocked ? g.name : (g.name + ' — ' + skinReq(g));
sw.setAttribute('aria-label', g.name + (unlocked ? '' : ' (заблокирован)'));
if (!unlocked) sw.innerHTML = '<span class="qm-skin-lock">' + lockSvg(12) + '</span>';
if (unlocked) {
sw.addEventListener('click', function () { onSkin(g.key); });
} else {
sw.disabled = true;
}
row.appendChild(sw);
});
box.appendChild(row);
return box;
}
function skinReq(g) {
if (g.needStars) return 'нужно ' + g.needStars + ' звёзд';
if (g.needXp) return 'нужно ' + g.needXp + ' XP';
return 'заблокирован';
}
/* ── Тело карты: созвездия по главам ── */
function renderMap(progressMap) {
clearReveal();
host.innerHTML = '';
var groups = Prog.groupByChapter(Levels.list());
var allLevels = Levels.list();
var revealOrder = []; // узлы для поэтапного появления
groups.forEach(function (grp, gi) {
var meta = Levels.chapter(grp.chapter);
var section = el('section', 'qm-constellation');
section.style.setProperty('--accent', meta.accent || '#22D3EE');
// заголовок главы
var head = el('div', 'qm-con-head');
head.innerHTML = '<span class="qm-con-title">' + escapeHtml(meta.title) + '</span>' +
'<span class="qm-con-sub">' + escapeHtml(meta.subtitle || '') + '</span>';
// прогресс главы
var cStars = 0, cMax = 0;
grp.levels.forEach(function (L) {
cStars += Prog.starsFor(L.id, progressMap);
cMax += (L.spec && L.spec.goal && L.spec.goal.stars) ? L.spec.goal.stars.length : 0;
});
var cbadge = el('span', 'qm-con-stars', starSvg(true, 14) + ' ' + cStars + '/' + cMax);
head.appendChild(cbadge);
section.appendChild(head);
// поле созвездия
var field = el('div', 'qm-field');
var pts = layoutNodes(grp.levels);
// SVG-слой: звёздное небо + линии-связи
var svg = svgEl('svg', { class: 'qm-svg', viewBox: '0 0 100 100', preserveAspectRatio: 'none' });
svg.appendChild(buildStarfield(46 + gi * 7));
// линии между последовательными узлами
for (var li = 0; li < pts.length - 1; li++) {
var a = pts[li], b = pts[li + 1];
var nextUnlocked = Prog.isUnlocked(grp.levels[li + 1], progressMap, allLevels);
var line = svgEl('line', {
x1: a.x, y1: a.y, x2: b.x, y2: b.y,
class: 'qm-link' + (nextUnlocked ? ' on' : '')
});
svg.appendChild(line);
}
field.appendChild(svg);
// узлы-уровни
grp.levels.forEach(function (L, idx) {
var status = Prog.nodeStatus(L, progressMap, allLevels);
var node = buildNode(L, status, progressMap, allLevels, pts[idx]);
field.appendChild(node);
revealOrder.push(node);
});
section.appendChild(field);
host.appendChild(section);
});
// поэтапное появление узлов
staggerReveal(revealOrder);
}
function buildNode(level, status, progressMap, allLevels, pt) {
var stars = Prog.starsFor(level.id, progressMap);
var total = (level.spec && level.spec.goal && level.spec.goal.stars) ? level.spec.goal.stars.length : 0;
var node = el('button', 'qm-node qm-' + status);
node.type = 'button';
node.style.left = pt.x + '%';
node.style.top = pt.y + '%';
node.setAttribute('data-level', level.id);
// ядро узла
var core = el('span', 'qm-node-core');
var icon = status === 'locked' ? lockSvg(20)
: (status === 'completed' ? '<span class="qm-node-order">' + level.order + '</span>' : playSvg(18));
core.innerHTML = icon;
node.appendChild(core);
// подпись
var label = el('span', 'qm-node-label', escapeHtml(level.title));
node.appendChild(label);
// звёзды узла (для пройденных) или порог (для заблокированных)
if (status === 'completed' && total > 0) {
var sb = el('span', 'qm-node-stars');
var html = '';
for (var i = 0; i < total; i++) html += starSvg(i < stars, 13);
sb.innerHTML = html;
node.appendChild(sb);
} else if (status === 'locked') {
var need = Prog.starsToUnlock(level, progressMap, allLevels);
var hint = el('span', 'qm-node-need', starSvg(true, 11) + ' ещё ' + need);
node.appendChild(hint);
}
if (status === 'locked') {
node.disabled = true;
node.setAttribute('aria-disabled', 'true');
node.title = 'Заблокировано — собери больше звёзд в предыдущих уровнях';
} else {
node.title = level.title + (status === 'completed' ? ' — пройдено' : ' — играть');
node.addEventListener('click', function () { onPlay(level); });
}
node.setAttribute('aria-label', level.title + ' (' +
(status === 'locked' ? 'заблокировано' : status === 'completed' ? ('пройдено, ' + stars + ' из ' + total + ' звёзд') : 'доступно') + ')');
return node;
}
function staggerReveal(nodes) {
nodes.forEach(function (n) { n.classList.add('qm-pre'); });
var i = 0;
function step() {
if (i >= nodes.length) { revealTimer = null; return; }
nodes[i].classList.remove('qm-pre');
nodes[i].classList.add('qm-in');
i++;
revealTimer = setTimeout(step, 70);
}
revealTimer = setTimeout(step, 120);
}
function escapeHtml(s) {
return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function render(progressMap) {
progressMap = progressMap || {};
renderHeader(progressMap);
renderMap(progressMap);
}
function destroy() {
clearReveal();
if (host) host.innerHTML = '';
if (headerHost) headerHost.innerHTML = '';
}
return { render: render, destroy: destroy };
}
global.QuantikMap = { create: create };
})(typeof window !== 'undefined' ? window : this);
frontend/js/game/progress-logic.js
+195
View File
@@ -0,0 +1,195 @@
'use strict';
/* ════════════════════════════════════════════════════════════════════════
Квантик — Законы Мира · ЧИСТАЯ логика прогресса (Фаза 2).
Никакого DOM/сети/движка — только функции над данными. Это делает их
тривиально тестируемыми (headless vm) и переносимыми на сервер позже.
ВХОД везде:
levels — массив записей уровней (форма QuantikLevels): { id, chapter,
order, par_ms?, unlockStars?, ... }.
progressMap — объект { [level_id]: { best_stars, best_time_ms, attempts } },
агрегируется из LS.gameProgressList() (см. fromProgressList).
⛔ Без eval/Function. Без побочных эффектов.
════════════════════════════════════════════════════════════════════════ */
(function (global) {
/* Превратить ответ /api/game/progress ([{level_id, best_stars, ...}]) в карту. */
function fromProgressList(list) {
var map = {};
if (!Array.isArray(list)) return map;
for (var i = 0; i < list.length; i++) {
var row = list[i];
if (row && row.level_id != null) map[row.level_id] = row;
}
return map;
}
/* Лучшее число звёзд по уровню (0, если не пройден). */
function starsFor(levelId, progressMap) {
var p = progressMap && progressMap[levelId];
var s = p ? p.best_stars : 0;
return (typeof s === 'number' && s > 0) ? s : 0;
}
/* Пройден ли уровень (есть хотя бы одна звезда == достигнута цель). */
function isCompleted(levelId, progressMap) {
return starsFor(levelId, progressMap) > 0;
}
/* Сумма лучших звёзд по всем уровням. */
function totalStars(levels, progressMap) {
var sum = 0;
for (var i = 0; i < levels.length; i++) sum += starsFor(levels[i].id, progressMap);
return sum;
}
/* ── Разблокировка ────────────────────────────────────────────────────────
Уровень открыт, если СУММА звёзд во ВСЕХ предыдущих уровнях той же главы
(по полю order) ≥ level.unlockStars. Первый уровень главы (минимальный order
или unlockStars==0) открыт всегда. Глава открывается, если открыт её первый
уровень — он гейтится суммой звёзд предыдущих глав через unlockStars==0
первого уровня (по умолчанию) ИЛИ явным порогом.
Чистая функция: вход — уровень + карта прогресса + ВЕСЬ список (для подсчёта
«предыдущих» по order). Возвращает bool. */
function isUnlocked(level, progressMap, levels) {
if (!level) return false;
var need = (typeof level.unlockStars === 'number') ? level.unlockStars : 0;
if (need <= 0) return true; // нет порога — всегда доступен
// звёзды, набранные во всех уровнях с меньшим глобальным order
var have = 0;
for (var i = 0; i < levels.length; i++) {
var L = levels[i];
if (L.id === level.id) continue;
if ((L.order || 0) < (level.order || 0)) {
have += starsFor(L.id, progressMap);
}
}
return have >= need;
}
/* Статус узла для карты: 'completed' | 'available' | 'locked'. */
function nodeStatus(level, progressMap, levels) {
if (isCompleted(level.id, progressMap)) return 'completed';
if (isUnlocked(level, progressMap, levels)) return 'available';
return 'locked';
}
/* ── XP ────────────────────────────────────────────────────────────────────
XP = сумма (звёзды × STAR_XP) + бонус за каждый пройденный уровень
(COMPLETE_XP) + бонус за «par» (3-я звезда == уложился в норматив времени,
она и так считается звездой; дополнительный PAR_BONUS за первое прохождение
уровня в принципе). Детерминированная функция от карты прогресса. */
var STAR_XP = 100; // за каждую звезду
var COMPLETE_XP = 40; // за факт прохождения уровня (≥1 звезда)
function computeXp(levels, progressMap) {
var xp = 0;
for (var i = 0; i < levels.length; i++) {
var id = levels[i].id;
var s = starsFor(id, progressMap);
if (s > 0) {
xp += s * STAR_XP + COMPLETE_XP;
}
}
return xp;
}
/* ── Уровень игрока ──────────────────────────────────────────────────────
Порог уровня растёт линейно-нарастающе: уровень N требует кумулятивно
XP_PER_LEVEL_BASE·N·(N+1)/2 … упрощаем до квадратичной обратной формулы.
playerLevel(xp) -> { level, xpInto, xpForNext, progress01, totalForLevel }.
level начинается с 1. */
var XP_STEP = 240; // базовый шаг XP (level n требует n*XP_STEP суммарно для перехода)
// Кумулятивный XP, нужный чтобы ДОСТИЧЬ уровня L (L>=1). level 1 = 0 XP.
function xpForLevel(L) {
if (L <= 1) return 0;
// сумма k=1..L-1 of k*XP_STEP = XP_STEP * (L-1)*L/2
return XP_STEP * (L - 1) * L / 2;
}
function playerLevel(xp) {
if (!(xp > 0)) xp = 0;
var L = 1;
// найти максимальный L, чей порог <= xp
while (xpForLevel(L + 1) <= xp) L++;
var base = xpForLevel(L);
var next = xpForLevel(L + 1);
var span = next - base;
var into = xp - base;
return {
level: L,
xp: xp,
xpInto: into,
xpForNext: span,
totalForNext: next,
progress01: span > 0 ? Math.min(1, into / span) : 1
};
}
/* ── Группировка по главам ────────────────────────────────────────────────
Возвращает массив { chapter, levels:[...] } в порядке появления глав;
уровни внутри главы сортируются по order. */
function groupByChapter(levels) {
var order = [];
var byKey = {};
for (var i = 0; i < levels.length; i++) {
var L = levels[i];
var key = L.chapter || 'misc';
if (!byKey[key]) { byKey[key] = { chapter: key, levels: [] }; order.push(key); }
byKey[key].levels.push(L);
}
return order.map(function (k) {
var g = byKey[k];
g.levels = g.levels.slice().sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
return g;
});
}
/* Следующий разблокированный непройденный уровень после данного (по глоб. order),
или null. Используется кнопкой «Дальше». */
function nextPlayable(currentId, levels, progressMap) {
var sorted = levels.slice().sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
var idx = -1;
for (var i = 0; i < sorted.length; i++) if (sorted[i].id === currentId) { idx = i; break; }
// сначала ищем следующий по порядку доступный (предпочтительно непройденный)
for (var j = idx + 1; j < sorted.length; j++) {
if (isUnlocked(sorted[j], progressMap, levels)) return sorted[j];
}
return null;
}
/* Сколько ещё звёзд нужно, чтобы открыть уровень (для подсказки на замке). */
function starsToUnlock(level, progressMap, levels) {
var need = (typeof level.unlockStars === 'number') ? level.unlockStars : 0;
if (need <= 0) return 0;
var have = 0;
for (var i = 0; i < levels.length; i++) {
var L = levels[i];
if (L.id === level.id) continue;
if ((L.order || 0) < (level.order || 0)) have += starsFor(L.id, progressMap);
}
return Math.max(0, need - have);
}
global.QuantikProgress = {
fromProgressList: fromProgressList,
starsFor: starsFor,
isCompleted: isCompleted,
totalStars: totalStars,
isUnlocked: isUnlocked,
nodeStatus: nodeStatus,
computeXp: computeXp,
playerLevel: playerLevel,
xpForLevel: xpForLevel,
groupByChapter: groupByChapter,
nextPlayable: nextPlayable,
starsToUnlock: starsToUnlock,
// константы (для отображения/тестов)
STAR_XP: STAR_XP, COMPLETE_XP: COMPLETE_XP, XP_STEP: XP_STEP
};
})(typeof window !== 'undefined' ? window : this);
frontend/js/game/quantik-game.js
+153 -27
View File
@@ -1,19 +1,26 @@
'use strict';
/* ════════════════════════════════════════════════════════════════════════
Квантик — Законы Мира · логика игровой страницы (Фаза 1, MVP).
Квантик — Законы Мира · логика игрового уровня (Фаза 2).
Монтирует уровень-спеку через SimEngine.mount (тот же движок, что lab.html
и sim-builder.html). «Игровой режим» включается САМ наличием блока goal в
спеке (Фаза 0: HUD с целью/звёздами появляется автоматически). Управление —
собственные слайдеры params движка + кнопки Запуск/Сброс. На победу
(inst.onGoal) шлём результат на сервер и показываем экран успеха.
спеке (Фаза 0). На победу (inst.onGoal) шлём результат на сервер и показываем
экран успеха с нарратором-Квантиком; реакция нарратора зависит от числа звёзд.
window.QuantikGame.start({ host, level }) -> инстанс движка (или null).
Фаза 2:
- Скин Квантика (colorKey из палитр PetSprite, localStorage 'quantik-skin')
тинтует glow-точку героя в уровне и нарратора.
- Экран успеха активирует «Дальше» (переход к следующему уровню) через колбэк.
- Интро-карточка с нарратором перед стартом уровня.
window.QuantikGame.start({ host, level, skin?, onNext?, onMap?, hasNext?, resolveNext? }) -> инстанс.
⛔ Без eval/Function. Уровни — данные из window.QuantikLevels.
════════════════════════════════════════════════════════════════════════ */
(function (global) {
var doc = global.document;
var SKIN_KEY = 'quantik-skin';
var DEFAULT_SKIN = 'cyan';
function el(tag, cls, html) {
var n = doc.createElement(tag);
@@ -22,7 +29,42 @@
return n;
}
/* Inline SVG звезды (заполненная / контур) — без эмодзи (правило проекта). */
/* ── Скин ──────────────────────────────────────────────────────────────── */
function getSkin() {
try {
var v = global.localStorage && global.localStorage.getItem(SKIN_KEY);
if (v && global.PetSprite && global.PetSprite.PALETTES && global.PetSprite.PALETTES[v]) return v;
} catch (_e) {}
return DEFAULT_SKIN;
}
function setSkin(key) {
try { if (global.localStorage) global.localStorage.setItem(SKIN_KEY, key); } catch (_e) {}
}
function skinColor(key) {
var pal = (global.PetSprite && global.PetSprite.PALETTES) || {};
return pal[key || getSkin()] || '#06D6E0';
}
/* Тинтуем героя уровня (объект с id 'ball') цветом скина — БЕЗ исполнения,
просто переписываем цветовые поля спеки-копии перед монтированием. */
function tintHeroSpec(spec, skinKey) {
var color = skinColor(skinKey);
// глубокая копия (спека — данные, без функций) чтобы не мутировать реестр
var copy = JSON.parse(JSON.stringify(spec));
if (Array.isArray(copy.objects)) {
for (var i = 0; i < copy.objects.length; i++) {
var o = copy.objects[i];
if (o && o.id === 'ball') {
o.color = color;
if (o.glow) o.glowColor = color;
if (o.trail) o.trailColor = color;
}
}
}
return copy;
}
/* ── Inline SVG звезды ── */
function starSvg(filled) {
var fill = filled ? '#FBBF24' : 'none';
var stroke = filled ? '#FBBF24' : '#64748B';
@@ -33,25 +75,64 @@
function fmtTime(ms) {
if (!ms && ms !== 0) return '—';
var s = ms / 1000;
return s.toFixed(2) + ' с';
return (ms / 1000).toFixed(2) + ' с';
}
/* ── Экран успеха (DOM-оверлей страницы, поверх сцены) ─────────────────── */
function buildSuccessOverlay(state) {
function petSvg(mood, skinKey) {
if (!global.PetSprite) return '';
return global.PetSprite.render(4, mood, [], skinKey || getSkin(), 0, 'none');
}
/* ── Интро-карточка уровня (нарратор «почини закон…») ───────────────────── */
function buildIntro(level, skinKey) {
var overlay = el('div', 'qg-overlay qg-intro');
var card = el('div', 'qg-card qg-card-intro');
var pet = el('div', 'qg-intro-pet', petSvg('happy', skinKey));
card.appendChild(pet);
card.appendChild(el('div', 'qg-card-kicker', 'Почини закон'));
card.appendChild(el('div', 'qg-card-title', escapeText(level.title)));
var goalT = (level.spec && level.spec.goal && level.spec.goal.title) || '';
if (goalT) card.appendChild(el('div', 'qg-intro-goal', escapeText(goalT)));
if (level.hint) card.appendChild(el('div', 'qg-intro-hint', escapeText(level.hint)));
var actions = el('div', 'qg-actions');
var btnGo = el('button', 'btn-primary qg-btn', 'Начать');
btnGo.type = 'button';
var btnBack = el('button', 'btn-ghost qg-btn', 'К карте');
btnBack.type = 'button';
actions.appendChild(btnGo);
actions.appendChild(btnBack);
card.appendChild(actions);
overlay.appendChild(card);
return { overlay: overlay, btnGo: btnGo, btnBack: btnBack };
}
/* ── Экран успеха ───────────────────────────────────────────────────────── */
function buildSuccessOverlay(state, ctx) {
ctx = ctx || {};
var got = (state && state.stars && state.stars.got) || 0;
var total = (state && state.stars && state.stars.total) || 0;
var overlay = el('div', 'qg-overlay');
var card = el('div', 'qg-card');
// нарратор: все звёзды (>=2) -> ecstatic, иначе happy
var mood = (total > 0 && got >= total && total >= 2) ? 'ecstatic' : (got >= 1 ? 'happy' : 'neutral');
if (global.PetSprite) {
var pet = el('div', 'qg-success-pet', petSvg(mood, ctx.skin));
card.appendChild(pet);
}
card.appendChild(el('div', 'qg-card-title', 'Уровень пройден!'));
// звёзды: total «слотов», got заполнено
var starsBox = el('div', 'qg-stars');
var slots = Math.max(total, got, 1);
for (var i = 0; i < slots; i++) {
var w = el('span', 'qg-star');
var w = el('span', 'qg-star' + (i < got ? ' qg-star-on' : ''));
w.style.setProperty('--si', i);
w.innerHTML = starSvg(i < got);
starsBox.appendChild(w);
}
@@ -67,12 +148,10 @@
card.appendChild(stats);
var actions = el('div', 'qg-actions');
var btnAgain = el('button', 'btn-primary qg-btn', 'Ещё раз');
var btnAgain = el('button', 'btn-ghost qg-btn', 'Ещё раз');
btnAgain.type = 'button';
var btnNext = el('button', 'btn-ghost qg-btn', 'Дальше');
var btnNext = el('button', 'btn-primary qg-btn', ctx.hasNext ? 'Дальше' : 'К карте');
btnNext.type = 'button';
btnNext.disabled = true; // MVP: следующий уровень появится в Фазе 2
btnNext.title = 'Скоро: больше уровней';
actions.appendChild(btnAgain);
actions.appendChild(btnNext);
card.appendChild(actions);
@@ -81,8 +160,15 @@
return { overlay: overlay, btnAgain: btnAgain, btnNext: btnNext };
}
function escapeText(s) {
return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
/* ── Старт уровня ───────────────────────────────────────────────────────
host — DOM-контейнер сцены. level — запись из QuantikLevels (с .spec/.id). */
opts: { host, level, skin?, onNext?(level), onMap?(), hasNext?, resolveNext? }
resolveNext?() -> Promise<{ hasNext, next }>: пересчитать следующий уровень
ПОСЛЕ перезагрузки прогресса (победа разблокирует след. уровень). Если не
задан / упал — откатываемся к pre-win opts.hasNext (ровно прежнее поведение). */
function start(opts) {
opts = opts || {};
var host = opts.host;
@@ -90,7 +176,9 @@
if (!host || !level || !level.spec) return null;
if (!global.SimEngine || !global.SimExpr) return null;
var inst = global.SimEngine.mount(host, level.spec);
var skin = opts.skin || getSkin();
var spec = tintHeroSpec(level.spec, skin);
var inst = global.SimEngine.mount(host, spec);
var overlayRef = null;
function clearOverlay() {
@@ -100,34 +188,72 @@
overlayRef = null;
}
function showSuccess(state) {
// submitDone — promise сабмита прогресса (или null, если сабмита нет).
// Экран успеха показываем СРАЗУ (без ожидания сети) с pre-win hasNext, затем
// ОБНОВЛЯЕМ кнопку «Дальше/К карте», когда пересчёт после победы (resolveNext)
// увидит свежеразблокированный уровень. Это чинит «мёртвую Дальше» на первом
// прохождении (0 звёзд → доступен только L1 → pre-win nextPlayable == null).
function showSuccess(state, submitDone) {
clearOverlay();
overlayRef = buildSuccessOverlay(state);
// Текущее решение кнопки. Замыкания ниже читают его «живьём» (мутируем var),
// поэтому если игрок успеет нажать раньше пересчёта — отработает фолбэк,
// а после пересчёта та же кнопка уже ведёт «Дальше».
var canNext = typeof opts.onNext === 'function' && !!opts.hasNext;
overlayRef = buildSuccessOverlay(state, { skin: skin, hasNext: canNext });
overlayRef.btnAgain.addEventListener('click', function () {
clearOverlay();
try { inst.reset(); } catch (_e) {}
});
// Дальше — заглушка для MVP (нет следующего уровня).
overlayRef.btnNext.addEventListener('click', function () {
clearOverlay();
if (canNext) opts.onNext(level);
else if (typeof opts.onMap === 'function') opts.onMap();
});
host.appendChild(overlayRef.overlay);
if (typeof opts.resolveNext !== 'function') return;
var btn = overlayRef.btnNext;
// Пересчёт идёт ПОСЛЕ сабмита: победа сначала сохраняется на сервере, и только
// затем перезагрузка прогресса увидит разблокированный уровень.
Promise.resolve(submitDone)
.catch(function () {}) // сабмит best-effort: даже при ошибке пробуем пересчёт
.then(function () { return opts.resolveNext(); })
.then(function (r) {
// overlayRef мог смениться/закрыться, пока шла сеть — обновляем только «свою» кнопку.
if (!r || !overlayRef || overlayRef.btnNext !== btn) return;
var next = typeof opts.onNext === 'function' && !!r.hasNext;
if (next === canNext) return; // ничего не изменилось
canNext = next;
btn.textContent = next ? 'Дальше' : 'К карте';
})
.catch(function () {}); // пересчёт упал → остаёмся на pre-win решении
}
inst.onGoal(function (res) {
if (!res || !res.won) return;
var got = (res.stars && res.stars.got) || 0;
// Время победы — мировое t из движка (Ф0): res.timeMs.
var payload = { time_ms: res.timeMs, stars: got };
// Submit best-effort: экран успеха показываем независимо от сети.
var submitDone = null;
try {
if (global.LS && global.LS.gameProgressSubmit) {
global.LS.gameProgressSubmit(level.id, payload).catch(function () { /* офлайн — ок */ });
submitDone = global.LS.gameProgressSubmit(level.id, payload);
if (submitDone && typeof submitDone.catch === 'function') submitDone.catch(function () {});
}
} catch (_e) { /* нет клиента — всё равно показываем успех */ }
showSuccess(res);
} catch (_e) {}
showSuccess(res, submitDone);
});
return inst;
}
global.QuantikGame = { start: start, buildSuccessOverlay: buildSuccessOverlay };
global.QuantikGame = {
start: start,
buildSuccessOverlay: buildSuccessOverlay,
buildIntro: buildIntro,
getSkin: getSkin,
setSkin: setSkin,
skinColor: skinColor,
SKIN_KEY: SKIN_KEY
};
})(typeof window !== 'undefined' ? window : this);