игра для новичков

[html]<div class="theme_design">
<div class="theme_top">
<p>когда последние искры фейерверка исчезнут в небе, они превратятся в дождь и снег, чтобы вновь упасть на землю, питать её и взращивать человечество — чтобы однажды снова подняться в небо и расцвести там своей великолепной вспышкой.<br>
проходи, путник — мы ждём тебя за дверью, осталась всего пара шагов.</p>
</div>
</div>

.board{
position:relative; background:url('https://i.imgur.com/xIZTEH5.png') no-repeat center/100% 100%;
width:100%; aspect-ratio:1110/768; border-radius:12px; overflow:hidden;
}

.token{
position:absolute; z-index:3; width:26px; height:26px; border-radius:50%;
background:#e74c3c; border:2px solid rgba(255,255,255,.95);
box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.4);
cursor:grab; transition:box-shadow .15s ease, transform .1s ease;
}
.token:active{ cursor:grabbing; transform:scale(1.02); }

.point{
position:absolute; z-index:1; width:17px; height:17px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #fff 0%, #ffe274 35%, #f5c546 70%, #b9861b 100%);
border:2px solid rgba(0,0,0,.45); box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.point::after{ content:"?"; position:absolute; inset:0; display:grid; place-items:center; font-weight:800; color:#3a2b00; font-size:11px; }

.finish{
position:absolute; z-index:2; width:34px; height:34px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #fff 0%, #b2ffb7 30%, #52d66a 70%, #2b9443 100%);
border:2px solid rgba(0,0,0,.5); box-shadow:0 0 0 3px rgba(82,214,106,.25), 0 6px 16px rgba(0,0,0,.28);
}
.finish::after{ content:"★"; position:absolute; inset:0; display:grid; place-items:center; color:#0f5a25; font-size:16px; font-weight:900; text-shadow:0 1px 0 #fff; }
</style>

<div class="board-wrap">
<div class="board-title">НАСТОЛЬНАЯ ИГРА ДЛЯ НОВИЧКОВ «NEXTDOOR»</div>

<div class="token" id="token1" style="left:40px; top:10px;"></div>

<div class="point" style="left:370px; top:249px;" title="выполнить пункт из списка"></div>
<div class="point" style="left:300px; top:230px;" title="выполнить пункт из списка"></div>
<div class="point" style="left:200px; top:340px;" title="выполнить пункт из списка"></div>
<div class="point" style="left:530px; top:410px;" title="получить награды"></div>
</div>
</div>

// Перетаскивание — мышь
let isDragging = false, shiftX = 0, shiftY = 0;
token.addEventListener('mousedown', (e) => {
isDragging = true; token.style.cursor = 'grabbing';
const rect = token.getBoundingClientRect();
shiftX = e.clientX - rect.left; shiftY = e.clientY - rect.top; e.preventDefault();
});
document.addEventListener('mouseup', () => { isDragging = false; token.style.cursor = 'grab'; });
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const r = board.getBoundingClientRect();
let x = e.clientX - r.left - shiftX;
let y = e.clientY - r.top - shiftY;
x = Math.max(0, Math.min(x, r.width - token.offsetWidth));
y = Math.max(0, Math.min(y, r.height - token.offsetHeight));
token.style.left = x + 'px'; token.style.top = y + 'px';
});

// Тач
token.addEventListener('touchstart', (e) => {
const t = e.touches[0]; const rect = token.getBoundingClientRect();
shiftX = t.clientX - rect.left; shiftY = t.clientY - rect.top; isDragging = true; e.preventDefault();
}, {passive:false});
document.addEventListener('touchmove', (e) => {
if (!isDragging) return; const t = e.touches[0]; const r = board.getBoundingClientRect();
let x = t.clientX - r.left - shiftX; let y = t.clientY - r.top - shiftY;
x = Math.max(0, Math.min(x, r.width - token.offsetWidth));
y = Math.max(0, Math.min(y, r.height - token.offsetHeight));
token.style.left = x + 'px'; token.style.top = y + 'px'; e.preventDefault();
}, {passive:false});
document.addEventListener('touchend', () => { isDragging = false; });

// Палитра цвета
palette.addEventListener('click', (e) => {
const sw = e.target.closest('.swatch'); if (!sw) return;
token.style.background = sw.getAttribute('data-color');
});
</script>

[/html]