fitst version
This commit is contained in:
martijn.diersmann@pm.me
@@ -0,0 +1,475 @@
|
||||
/* Turbo Race - client: netwerk, input, rendering, HUD */
|
||||
(function () {
|
||||
'use strict';
|
||||
const painter = window.TurboPainter;
|
||||
const ROAD_W = 420;
|
||||
const K = 0.32; // zelfde schaal als render.js
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const clamp = (n, lo, hi) => (n < lo ? lo : n > hi ? hi : n);
|
||||
|
||||
/* ---------- state ---------- */
|
||||
let ws = null;
|
||||
const me = { id: null, host: false, name: '', color: '#ff3fa4' };
|
||||
let phase = 'lobby';
|
||||
let snap = null; // laatste snapshot
|
||||
let track = null; // {obstacles, powerups}
|
||||
const rp = {}; // render-state per speler {rx, rd, ...}
|
||||
const input = { steer: 0 };
|
||||
let visSteer = 0; // visuele stuursmoothing (alleen voor rendering)
|
||||
let fx = [];
|
||||
let shake = 0;
|
||||
let lastSent = 0;
|
||||
|
||||
const canvas = $('game');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const mm = $('minimap');
|
||||
const mmCtx = mm.getContext('2d');
|
||||
let W = 0, H = 0, DPR = 1;
|
||||
|
||||
function resize() {
|
||||
DPR = Math.min(window.devicePixelRatio || 1, 2);
|
||||
W = window.innerWidth; H = window.innerHeight;
|
||||
canvas.width = Math.round(W * DPR);
|
||||
canvas.height = Math.round(H * DPR);
|
||||
canvas.style.width = W + 'px';
|
||||
canvas.style.height = H + 'px';
|
||||
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
|
||||
mm.width = Math.round(mm.clientWidth * DPR);
|
||||
mm.height = Math.round(mm.clientHeight * DPR);
|
||||
mmCtx.setTransform(DPR, 0, 0, DPR, 0, 0);
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
window.addEventListener('orientationchange', () => setTimeout(resize, 200));
|
||||
|
||||
/* ---------- kleurenpalet ---------- */
|
||||
const PALETTE = ['#ff3fa4', '#00f0ff', '#ffd93d', '#3dff88', '#ff7a1a', '#8f5bff', '#ff4d6d', '#4dffd6', '#ff9ff3', '#b3ff4d'];
|
||||
let chosenColor = PALETTE[0];
|
||||
(function initColors() {
|
||||
const box = $('colors');
|
||||
PALETTE.forEach((c) => {
|
||||
const s = document.createElement('button');
|
||||
s.type = 'button';
|
||||
s.className = 'swatch' + (c === chosenColor ? ' on' : '');
|
||||
s.style.background = c;
|
||||
s.onclick = () => {
|
||||
chosenColor = c;
|
||||
box.querySelectorAll('.swatch').forEach((el) => el.classList.remove('on'));
|
||||
s.classList.add('on');
|
||||
};
|
||||
box.appendChild(s);
|
||||
});
|
||||
})();
|
||||
|
||||
/* ---------- verbinding ---------- */
|
||||
function hostToken() {
|
||||
try { return new URLSearchParams(location.search).get('host') || ''; } catch { return ''; }
|
||||
}
|
||||
|
||||
function connect() {
|
||||
const proto = location.protocol === 'https:' ? 'wss://' : 'ws://';
|
||||
ws = new WebSocket(proto + location.host + '/ws');
|
||||
ws.onopen = () => {
|
||||
ws.send(JSON.stringify({
|
||||
type: 'join', name: $('nameInput').value, color: chosenColor, hostToken: hostToken(),
|
||||
}));
|
||||
};
|
||||
ws.onmessage = (ev) => {
|
||||
let m; try { m = JSON.parse(ev.data); } catch { return; }
|
||||
handle(m);
|
||||
};
|
||||
ws.onclose = () => { if (phase !== 'results') $('dead').classList.remove('hidden'); };
|
||||
ws.onerror = () => {};
|
||||
}
|
||||
|
||||
$('joinBtn').onclick = () => connect();
|
||||
$('nameInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') connect(); });
|
||||
|
||||
/* ---------- message-handling ---------- */
|
||||
function handle(m) {
|
||||
switch (m.type) {
|
||||
case 'joined':
|
||||
me.id = m.id; me.host = !!m.host;
|
||||
me.name = m.self.name; me.color = m.self.color;
|
||||
snap = m.snapshot; track = m.track;
|
||||
applySnapshot(m.snapshot);
|
||||
$('join').classList.add('hidden');
|
||||
$('room').classList.remove('hidden');
|
||||
break;
|
||||
case 'snapshot':
|
||||
applySnapshot(m);
|
||||
break;
|
||||
case 'track':
|
||||
track = m.track;
|
||||
break;
|
||||
case 'fx':
|
||||
onFx(m.id, m.kind);
|
||||
break;
|
||||
case 'announce':
|
||||
toast(m.text, 'gold');
|
||||
break;
|
||||
case 'error':
|
||||
showJoinError(m.msg);
|
||||
break;
|
||||
case 'phase': // bevestiging; snapshot volgt zo
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- snapshot & interpolatie ---------- */
|
||||
let prevPhase = 'lobby';
|
||||
function applySnapshot(s) {
|
||||
snap = s;
|
||||
const newPhase = s.phase;
|
||||
const hard = (prevPhase !== newPhase) && (newPhase === 'race' || newPhase === 'lobby');
|
||||
const seen = new Set();
|
||||
for (const p of s.players) {
|
||||
seen.add(p.id);
|
||||
if (!rp[p.id]) {
|
||||
rp[p.id] = { rx: p.x, rd: p.d, name: p.name, color: p.color, boost: false, shield: false, slip: false, finished: false, rank: 0, speed: 0 };
|
||||
}
|
||||
if (hard) { rp[p.id].rx = p.x; rp[p.id].rd = p.d; }
|
||||
}
|
||||
for (const key in rp) if (!seen.has(key)) delete rp[key];
|
||||
prevPhase = newPhase;
|
||||
phase = newPhase;
|
||||
|
||||
if (phase === 'countdown') $('countdown').classList.remove('hidden');
|
||||
if (phase === 'race') { $('countdown').classList.add('hidden'); $('results').classList.add('hidden'); }
|
||||
if (phase === 'results') { $('countdown').classList.add('hidden'); buildResults(s); }
|
||||
if (phase === 'lobby') { $('results').classList.add('hidden'); $('countdown').classList.add('hidden'); }
|
||||
}
|
||||
|
||||
/* ---------- render-loop ---------- */
|
||||
let raf = 0, lastT = performance.now(), accHud = 0, accMinimap = 0;
|
||||
function frame(ts) {
|
||||
const dt = Math.min(0.05, (ts - lastT) / 1000);
|
||||
lastT = ts;
|
||||
accHud += dt; accMinimap += dt;
|
||||
|
||||
if (snap) {
|
||||
for (const p of snap.players) {
|
||||
const r = rp[p.id];
|
||||
if (!r) continue;
|
||||
const k = (p.id === me.id) ? (1 - Math.exp(-dt * 18)) : (1 - Math.exp(-dt * 7));
|
||||
r.rx += (p.x - r.rx) * k;
|
||||
r.rd += (p.d - r.rd) * k;
|
||||
r.name = p.name; r.color = p.color;
|
||||
r.boost = p.boost; r.shield = p.shield; r.slip = p.slip;
|
||||
r.finished = p.finished; r.speed = p.speed; r.rank = p.rank;
|
||||
}
|
||||
}
|
||||
|
||||
visSteer += (input.steer - visSteer) * Math.min(1, dt * 12);
|
||||
draw(ts);
|
||||
advanceFx(dt);
|
||||
shake = Math.max(0, shake - dt * 40);
|
||||
|
||||
if (accHud > 0.1) { accHud = 0; updateHud(); }
|
||||
if (accMinimap > 0.22) { accMinimap = 0; drawMinimap(); }
|
||||
|
||||
raf = requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
function draw(t) {
|
||||
const meSnap = snap ? snap.players.find((p) => p.id === me.id) : null;
|
||||
if (!meSnap) {
|
||||
painter.render(ctx, { W, H, t, me: { d: 0 }, trackLength: snap ? snap.trackLength : 23000, track, cars: [], fx: [], speedFactor: 0, shake: 0 });
|
||||
return;
|
||||
}
|
||||
const r = rp[me.id];
|
||||
const selfD = r ? r.rd : meSnap.d;
|
||||
const cars = [];
|
||||
for (const key in rp) {
|
||||
const o = rp[key];
|
||||
cars.push({
|
||||
x: o.rx, d: o.rd, name: o.name, color: o.color,
|
||||
boost: o.boost, shield: o.shield, slip: o.slip, finished: o.finished,
|
||||
isMe: key === me.id,
|
||||
steer: key === me.id ? visSteer : 0,
|
||||
});
|
||||
}
|
||||
painter.render(ctx, {
|
||||
W, H, t, me: { d: selfD },
|
||||
trackLength: snap.trackLength, track, cars, fx,
|
||||
speedFactor: (meSnap.speed || 0) / 300,
|
||||
shake,
|
||||
});
|
||||
}
|
||||
|
||||
function showJoinError(msg) {
|
||||
const el = $('joinMsg');
|
||||
el.textContent = msg || 'Kon niet aanmelden';
|
||||
el.className = 'msg err';
|
||||
}
|
||||
|
||||
|
||||
/* ---------- HUD & lijsten ---------- */
|
||||
let lastBoardSig = '';
|
||||
function updateHud() {
|
||||
if (!snap) return;
|
||||
const now = Date.now();
|
||||
const meSnap = snap.players.find((p) => p.id === me.id);
|
||||
|
||||
if (phase === 'countdown') {
|
||||
const rem = Math.max(0, Math.ceil((snap.countdownEndsAt - now) / 1000));
|
||||
$('cdNum').textContent = rem;
|
||||
updateBoard(rem);
|
||||
return;
|
||||
}
|
||||
|
||||
if (phase === 'race' && meSnap) {
|
||||
const rem = Math.max(0, snap.raceEndsAt - now);
|
||||
const tot = Math.ceil(rem / 1000);
|
||||
const min = Math.floor(tot / 60), sec = tot % 60;
|
||||
const tEl = $('hudTimer');
|
||||
const txt = `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
|
||||
if (tEl.textContent !== txt) tEl.textContent = txt;
|
||||
tEl.classList.toggle('danger', tot <= 10);
|
||||
$('hudSpeed').textContent = Math.round((meSnap.speed || 0) * 0.36) + ' km/u';
|
||||
$('hudPos').textContent = '#' + meSnap.rank + ' / ' + snap.players.length;
|
||||
$('hudDist').textContent = meSnap.d + ' m';
|
||||
}
|
||||
|
||||
updateBoard(0);
|
||||
updateLead();
|
||||
}
|
||||
|
||||
function updateBoard(remaining) {
|
||||
if (!snap) return;
|
||||
const inRace = phase === 'race' || phase === 'results';
|
||||
const head = inRace ? '🏁 WEDSTRIJD' : `👥 AANMELDERS (${snap.players.length}/${snap.maxPlayers})`;
|
||||
const sig = head + '|' + snap.players.map((p) => `${p.id}:${p.rank}:${p.d}`).join(',') + '|host' + me.host;
|
||||
if (sig === lastBoardSig) return;
|
||||
lastBoardSig = sig;
|
||||
$('boardHead').textContent = head;
|
||||
|
||||
const ol = $('boardList');
|
||||
ol.innerHTML = '';
|
||||
const sorted = snap.players.slice().sort((a, b) => a.rank - b.rank);
|
||||
for (const p of sorted) {
|
||||
const li = document.createElement('li');
|
||||
const cls = [];
|
||||
if (p.id === me.id) cls.push('me');
|
||||
if (inRace && p.rank === 1) cls.push('top');
|
||||
if (cls.length) li.className = cls.join(' ');
|
||||
if (inRace) {
|
||||
li.innerHTML = `<span class="rk">${p.rank}</span><span class="dot" style="background:${p.color};color:${p.color}"></span><span class="nm">${esc(p.name)}</span><span class="st">${p.finished ? fmtTime(p.finishTime) : Math.round(p.d) + ' m'}</span>`;
|
||||
} else {
|
||||
li.innerHTML = `<span class="rk">${p.rank}</span><span class="dot" style="background:${p.color};color:${p.color}"></span><span class="nm">${esc(p.name)}</span>`;
|
||||
}
|
||||
ol.appendChild(li);
|
||||
}
|
||||
if (me.host && !inRace) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'st';
|
||||
li.innerHTML = `<span class="nm" style="color:var(--gold)">👑 Jij bent host — druk op <b>S</b>${remaining != null ? ' (nog ' + remaining + 's voor start)' : ''}</span>`;
|
||||
ol.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
let lastLead = '';
|
||||
function updateLead() {
|
||||
if (!snap || phase !== 'race' || snap.players.length === 0) {
|
||||
if (lastLead !== '') { lastLead = ''; $('lead').classList.add('hidden'); }
|
||||
return;
|
||||
}
|
||||
const sorted = snap.players.slice().sort((a, b) => a.rank - b.rank);
|
||||
const top = sorted[0];
|
||||
const key = top.id + top.d;
|
||||
if (key === lastLead) return;
|
||||
lastLead = key;
|
||||
$('leadText').innerHTML = `<span class="crown">👑</span> ${esc(top.name)} ligt AAN KOP`;
|
||||
$('lead').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function drawMinimap() {
|
||||
if (!snap || !track) return;
|
||||
const w = mm.clientWidth, h = mm.clientHeight;
|
||||
mmCtx.clearRect(0, 0, w, h);
|
||||
const total = snap.trackLength || 23000;
|
||||
const yFor = (d) => h - 3 - (d / total) * (h - 8);
|
||||
// finishlijn
|
||||
mmCtx.fillStyle = 'rgba(255,217,61,0.85)';
|
||||
mmCtx.fillRect(1, 2, w - 2, 2);
|
||||
for (const p of snap.players) {
|
||||
const yy = yFor(p.d);
|
||||
const isMe = p.id === me.id;
|
||||
const isTop = p.rank === 1;
|
||||
mmCtx.beginPath();
|
||||
mmCtx.arc(w / 2, yy, isTop ? 3 : 2.2, 0, 7);
|
||||
mmCtx.fillStyle = p.color;
|
||||
mmCtx.fill();
|
||||
if (isMe) {
|
||||
mmCtx.strokeStyle = '#fff';
|
||||
mmCtx.lineWidth = 1;
|
||||
mmCtx.beginPath(); mmCtx.arc(w / 2, yy, 4.2, 0, 7); mmCtx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fmtTime(ms) {
|
||||
const s = ms / 1000;
|
||||
const m = Math.floor(s / 60);
|
||||
const ss = Math.floor(s % 60);
|
||||
return `${String(m).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
|
||||
}
|
||||
function esc(str) {
|
||||
return String(str).replace(/[&<>"]/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c]));
|
||||
}
|
||||
|
||||
|
||||
/* ---------- in-/uitvoer ---------- */
|
||||
const touchesLeft = new Map();
|
||||
const touchesRight = new Map();
|
||||
|
||||
canvas.addEventListener('pointerdown', (e) => {
|
||||
canvas.setPointerCapture(e.pointerId);
|
||||
const side = e.clientX < W / 2 ? 'L' : 'R';
|
||||
(side === 'L' ? touchesLeft : touchesRight).set(e.pointerId, true);
|
||||
updateSteerFromTouches();
|
||||
});
|
||||
canvas.addEventListener('pointermove', (e) => {
|
||||
if (!touchesLeft.has(e.pointerId) && !touchesRight.has(e.pointerId)) return;
|
||||
touchesLeft.delete(e.pointerId);
|
||||
touchesRight.delete(e.pointerId);
|
||||
const side = e.clientX < W / 2 ? 'L' : 'R';
|
||||
(side === 'L' ? touchesLeft : touchesRight).set(e.pointerId, true);
|
||||
updateSteerFromTouches();
|
||||
});
|
||||
const endTouch = (e) => { touchesLeft.delete(e.pointerId); touchesRight.delete(e.pointerId); updateSteerFromTouches(); };
|
||||
canvas.addEventListener('pointerup', endTouch);
|
||||
canvas.addEventListener('pointercancel', endTouch);
|
||||
|
||||
function updateSteerFromTouches() {
|
||||
if (touchesRight.size > 0 && touchesLeft.size === 0) input.steer = 1;
|
||||
else if (touchesLeft.size > 0 && touchesRight.size === 0) input.steer = -1;
|
||||
else input.steer = 0;
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') input.steer = -1;
|
||||
if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') input.steer = 1;
|
||||
if (e.key.toLowerCase() === 's' && me.host && (phase === 'lobby' || phase === 'results')
|
||||
&& document.activeElement !== $('nameInput')) {
|
||||
sendHostStart();
|
||||
}
|
||||
});
|
||||
window.addEventListener('keyup', (e) => {
|
||||
if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A' ||
|
||||
e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
|
||||
if (touchesLeft.size === 0 && touchesRight.size === 0) input.steer = 0;
|
||||
}
|
||||
});
|
||||
window.addEventListener('blur', () => { input.steer = 0; });
|
||||
|
||||
function sendHostStart() {
|
||||
if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'host_start' }));
|
||||
}
|
||||
|
||||
// input naar server
|
||||
setInterval(() => {
|
||||
if (ws && ws.readyState === 1 && me.id) {
|
||||
ws.send(JSON.stringify({ type: 'input', steer: input.steer }));
|
||||
}
|
||||
}, 33);
|
||||
|
||||
/* ---------- fx & toasts ---------- */
|
||||
function onFx(id, kind) {
|
||||
const r = rp[id];
|
||||
if (!r) return;
|
||||
const meSnap = snap && snap.players.find((p) => p.id === me.id);
|
||||
const selfD = meSnap ? rp[me.id] ? rp[me.id].rd : meSnap.d : 0;
|
||||
const roadW = Math.min(W * 0.88, 460);
|
||||
const scaleX = roadW / ROAD_W;
|
||||
const carY = Math.min(H * 0.62, H - 140);
|
||||
const sx = (W - roadW) / 2 + r.rx * scaleX;
|
||||
const sy = carY - (r.rd - selfD) * K;
|
||||
const col = kind.indexOf('boost') >= 0 ? '#00f0ff' : kind.indexOf('shield') >= 0 ? '#3dff88'
|
||||
: kind.indexOf('pylon') >= 0 ? '#ffd93d' : '#ff4d6d';
|
||||
|
||||
if (kind.indexOf('hit') === 0) {
|
||||
burst(sx, sy, col, 14);
|
||||
burst(sx, sy, '#fff', 6);
|
||||
} else {
|
||||
pulseFx(sx, sy, col);
|
||||
burst(sx, sy, col, 12);
|
||||
}
|
||||
|
||||
if (id === me.id) {
|
||||
if (kind === 'hit:pylon') toast('💥 Je raakt een pylon!', '');
|
||||
else if (kind === 'hit:oil') toast('🌀 Olie! Je glijdt weg…', '');
|
||||
else if (kind === 'pickup:boost') toast('⚡ BOOST!', 'gold');
|
||||
else if (kind === 'pickup:shield') toast('🛡 Schild actief!', 'gold');
|
||||
if (kind.indexOf('hit') === 0) shake = 14;
|
||||
}
|
||||
}
|
||||
|
||||
function burst(sx, sy, color, n) {
|
||||
for (let i = 0; i < n; i++) {
|
||||
const a = Math.random() * Math.PI * 2;
|
||||
const sp = 40 + Math.random() * 160;
|
||||
fx.push({
|
||||
kind: 'dot', sx, sy,
|
||||
vx: Math.cos(a) * sp, vy: Math.sin(a) * sp,
|
||||
size: 2 + Math.random() * 4,
|
||||
color, life: 0, maxLife: 0.4 + Math.random() * 0.4,
|
||||
});
|
||||
}
|
||||
}
|
||||
function pulseFx(sx, sy, color) {
|
||||
fx.push({ kind: 'pulse', sx, sy, vx: 0, vy: 0, size: 14, color, life: 0, maxLife: 0.5 });
|
||||
}
|
||||
function advanceFx(dt) {
|
||||
for (let i = fx.length - 1; i >= 0; i--) {
|
||||
const f = fx[i];
|
||||
f.life += dt;
|
||||
if (f.life >= f.maxLife) { fx.splice(i, 1); continue; }
|
||||
if (f.kind === 'dot') { f.sx += f.vx * dt; f.sy += f.vy * dt; f.vx *= 0.94; f.vy *= 0.94; }
|
||||
}
|
||||
}
|
||||
|
||||
function toast(text, cls) {
|
||||
const box = $('toasts');
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast' + (cls ? ' ' + cls : '');
|
||||
el.textContent = text;
|
||||
box.appendChild(el);
|
||||
setTimeout(() => el.remove(), 2600);
|
||||
while (box.children.length > 3) box.firstChild.remove();
|
||||
}
|
||||
|
||||
/* ---------- uitslag ---------- */
|
||||
function buildResults(s) {
|
||||
$('results').classList.remove('hidden');
|
||||
const sorted = s.players.slice().sort((a, b) => a.rank - b.rank);
|
||||
const podium = $('podium');
|
||||
podium.innerHTML = '';
|
||||
const medals = { 1: '🥇', 2: '🥈', 3: '🥉' };
|
||||
for (const p of sorted.slice(0, 3)) {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'pod g' + p.rank;
|
||||
d.innerHTML = `<span class="medal">${medals[p.rank]}</span><div class="pname">${esc(p.name)}</div>`;
|
||||
podium.appendChild(d);
|
||||
}
|
||||
const ol = $('resultsList');
|
||||
ol.innerHTML = '';
|
||||
sorted.forEach((p) => {
|
||||
const li = document.createElement('li');
|
||||
if (p.id === me.id) li.className = 'me';
|
||||
li.innerHTML = `<span class="rk">${p.rank}</span><span class="nm">${esc(p.name)}</span><span class="tm">${p.finished ? fmtTime(p.finishTime) : 'niet gefinisht · ' + Math.round(p.d) + ' m'}</span>`;
|
||||
ol.appendChild(li);
|
||||
});
|
||||
$('resSub').textContent = me.host
|
||||
? 'Druk op S om een nieuwe race te starten (of gebruik de knop).'
|
||||
: 'De host kan een nieuwe race starten.';
|
||||
}
|
||||
|
||||
$('againBtn').onclick = () => {
|
||||
if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'ready_again' }));
|
||||
};
|
||||
|
||||
/* ---------- start ---------- */
|
||||
resize();
|
||||
requestAnimationFrame(frame);
|
||||
})();
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#0b0f2a">
|
||||
<title>Turbo Race</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="stars"></div>
|
||||
<canvas id="game"></canvas>
|
||||
|
||||
<!-- Aanmeldscherm -->
|
||||
<section id="join" class="overlay">
|
||||
<div class="card">
|
||||
<h1 class="logo">TURBO<span>RACE</span></h1>
|
||||
<p class="tagline">Tot 20 coureurs · 1 baan · max 1:30 min</p>
|
||||
<input id="nameInput" maxlength="14" placeholder="Jouw racenaam" autocomplete="off">
|
||||
<div id="colors" class="colors"></div>
|
||||
<button id="joinBtn" class="btn">Aanmelden ▶</button>
|
||||
<p id="joinMsg" class="msg"></p>
|
||||
<p class="hint">🕹️ Hou links of rechts van het scherm vast om te sturen, ontwijk pylonen & olie, pak power-ups en word de snelste!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Spel / kamer -->
|
||||
<section id="room" class="hidden">
|
||||
<div id="hud">
|
||||
<div class="hud-left">
|
||||
<div id="hudTimer" class="hud-timer">01:30</div>
|
||||
<div id="hudSpeed" class="hud-speed">0 km/u</div>
|
||||
</div>
|
||||
<div class="hud-center">
|
||||
<div id="hudPos" class="hud-pos">#? / 20</div>
|
||||
<div id="hudDist" class="hud-dist">0 m</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lead" class="hidden"><span id="leadText"></span></div>
|
||||
<div id="board" class="board">
|
||||
<div class="board-head" id="boardHead">Aanmelders (0/20)</div>
|
||||
<ol id="boardList"></ol>
|
||||
</div>
|
||||
<div id="minimapWrap"><canvas id="minimap"></canvas></div>
|
||||
<div id="toasts"></div>
|
||||
<div id="controls">
|
||||
<div class="ctrl"><span class="arrow">◀</span> stuur</div>
|
||||
<div class="tipzoom" id="tipZoom">🌐</div>
|
||||
<div class="ctrl">stuur <span class="arrow">▶</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Countdown -->
|
||||
<section id="countdown" class="overlay hidden">
|
||||
<div id="cdNum" class="cd-num">0</div>
|
||||
<div id="cdLabel" class="cd-label">RACE START IN</div>
|
||||
<div class="cd-sub">Nieuwe aanmelders zijn nog welkom!</div>
|
||||
</section>
|
||||
|
||||
<!-- Uitslag -->
|
||||
<section id="results" class="overlay hidden">
|
||||
<div class="card results-card">
|
||||
<h2 class="res-title">🏆 UITSLAG</h2>
|
||||
<div id="podium" class="podium"></div>
|
||||
<ol id="resultsList" class="results-list"></ol>
|
||||
<button id="againBtn" class="btn">↻ Nog een keer</button>
|
||||
<p class="hint" id="resSub"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Verbinding verbroken -->
|
||||
<section id="dead" class="overlay hidden">
|
||||
<div class="card"><h2>⚠️ Verbinding verbroken</h2><p>Herlaad de pagina om opnieuw mee te doen.</p></div>
|
||||
</section>
|
||||
|
||||
<script src="render.js"></script>
|
||||
<script src="client.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,431 @@
|
||||
/* Turbo Race - canvas painter (neon synthwave) */
|
||||
window.TurboPainter = (function () {
|
||||
'use strict';
|
||||
|
||||
const ROAD_W = 420; // wereldbreedte (px)
|
||||
const K = 0.32; // verticale schaal: px per eenheid afstand
|
||||
const C = {
|
||||
cyan: '#00f0ff', pink: '#ff3fa4', gold: '#ffd93d', green: '#3dff88', red: '#ff4d6d',
|
||||
};
|
||||
|
||||
function rgba(hex, a) {
|
||||
const h = hex.replace('#', '');
|
||||
return `rgba(${parseInt(h.slice(0, 2), 16)},${parseInt(h.slice(2, 4), 16)},${parseInt(h.slice(4, 6), 16)},${a})`;
|
||||
}
|
||||
function clamp(n, lo, hi) { return n < lo ? lo : (n > hi ? hi : n); }
|
||||
function rrect(ctx, x, y, w, h, r) {
|
||||
r = Math.min(r, w / 2, h / 2);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.arcTo(x + w, y, x + w, y + h, r);
|
||||
ctx.arcTo(x + w, y + h, x, y + h, r);
|
||||
ctx.arcTo(x, y + h, x, y, r);
|
||||
ctx.arcTo(x, y, x + w, y, r);
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
// werelds-afstand -> scherm-y
|
||||
function syFor(v, d) { return v.carY - (d - v.me.d) * K; }
|
||||
|
||||
/* ---------------- ACHTERGROND ---------------- */
|
||||
function drawBackground(ctx, W, H, t) {
|
||||
const g = ctx.createLinearGradient(0, 0, 0, H);
|
||||
g.addColorStop(0, '#070a20');
|
||||
g.addColorStop(0.45, '#120c30');
|
||||
g.addColorStop(1, '#1b0f38');
|
||||
ctx.fillStyle = g;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
const hx = W / 2 + Math.sin(t * 0.5) * 8;
|
||||
const rad = ctx.createRadialGradient(hx, H * 0.42, 40, hx, H * 0.42, W * 0.75);
|
||||
rad.addColorStop(0, 'rgba(255,63,164,0.20)');
|
||||
rad.addColorStop(0.5, 'rgba(0,240,255,0.10)');
|
||||
rad.addColorStop(1, 'rgba(0,0,0,0)');
|
||||
ctx.fillStyle = rad;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// synthwave grid
|
||||
const gridY = H * 0.5;
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 1; i < 10; i++) {
|
||||
const y = gridY + (H - gridY) * Math.pow(i / 10, 1.7);
|
||||
ctx.strokeStyle = rgba(C.cyan, 0.06 + i * 0.006);
|
||||
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
|
||||
}
|
||||
for (let i = -7; i <= 7; i++) {
|
||||
const sway = Math.sin(t * 0.7 + i) * (W * 0.008);
|
||||
ctx.strokeStyle = rgba(C.pink, 0.08);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(hx + i * 22 + sway, gridY);
|
||||
ctx.lineTo(hx + i * (W / 6), H);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- WEG ---------------- */
|
||||
function drawRoad(ctx, v) {
|
||||
const { H, roadLeft, roadW, me, trackLength } = v;
|
||||
const rl = roadLeft, rr = roadLeft + roadW;
|
||||
|
||||
const ag = ctx.createLinearGradient(rl, 0, rr, 0);
|
||||
ag.addColorStop(0, '#181e38');
|
||||
ag.addColorStop(0.18, '#222a4e');
|
||||
ag.addColorStop(0.5, '#2a3460');
|
||||
ag.addColorStop(0.82, '#202747');
|
||||
ag.addColorStop(1, '#171c34');
|
||||
ctx.fillStyle = ag;
|
||||
ctx.fillRect(rl, 0, roadW, H);
|
||||
|
||||
// horizontale textuur-stroken (scollen)
|
||||
const stripeH = 26;
|
||||
const off = me.d * K;
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.025)';
|
||||
for (let y = -(off % stripeH); y < H; y += stripeH) {
|
||||
ctx.fillRect(rl + 5, y, roadW - 10, stripeH * 0.55);
|
||||
}
|
||||
|
||||
// midden-streepjes
|
||||
const period = 74, dashLen = 32;
|
||||
const cOff = (me.d * K) % period;
|
||||
ctx.fillStyle = rgba(C.gold, 0.55);
|
||||
for (let y = -period + cOff; y < H; y += period) {
|
||||
rrect(ctx, rl + roadW / 2 - 2.5, y, 5, dashLen, 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
// kantlijnen neon
|
||||
ctx.save();
|
||||
ctx.shadowBlur = 14;
|
||||
ctx.shadowColor = C.cyan;
|
||||
ctx.strokeStyle = C.cyan;
|
||||
ctx.lineWidth = 3;
|
||||
ctx.beginPath(); ctx.moveTo(rl + 2, 0); ctx.lineTo(rl + 2, H); ctx.stroke();
|
||||
ctx.shadowColor = C.pink;
|
||||
ctx.strokeStyle = C.pink;
|
||||
ctx.beginPath(); ctx.moveTo(rr - 2, 0); ctx.lineTo(rr - 2, H); ctx.stroke();
|
||||
ctx.restore();
|
||||
|
||||
// stroken net buiten de weg
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.04)';
|
||||
ctx.fillRect(rl - 14, 0, 12, H);
|
||||
ctx.fillRect(rr + 2, 0, 12, H);
|
||||
|
||||
// start- en finishlijn
|
||||
roadLine(ctx, v, 0, false);
|
||||
roadLine(ctx, v, trackLength, true);
|
||||
}
|
||||
|
||||
function roadLine(ctx, v, worldD, checkered) {
|
||||
const sy = syFor(v, worldD);
|
||||
if (sy < -16 || sy > v.H + 16) return;
|
||||
const { roadLeft, roadW } = v;
|
||||
const h = 16;
|
||||
if (checkered) {
|
||||
const sq = 8;
|
||||
for (let x = 0; x * sq < roadW; x++) {
|
||||
for (let y = 0; y * sq < h; y++) {
|
||||
ctx.fillStyle = ((x + y) % 2 === 0) ? '#fff' : '#0b0f2a';
|
||||
ctx.fillRect(roadLeft + x * sq, sy + y * sq, sq, sq);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.75)';
|
||||
ctx.fillRect(roadLeft, sy, roadW, h);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- AUTO'S ---------------- */
|
||||
function drawCar(ctx, v, p, t) {
|
||||
const w = Math.max(20, v.roadW * 0.062);
|
||||
const h = w * 1.42;
|
||||
const sx = v.roadLeft + p.x * v.scaleX;
|
||||
const sy = syFor(v, p.d);
|
||||
if (sy < -90 || sy > v.H + 90) return;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(sx, sy);
|
||||
if (p.slip) ctx.rotate(Math.sin(t * 40 + p.x) * 0.08);
|
||||
else ctx.rotate((p.steer || 0) * -0.08);
|
||||
|
||||
// boost-vlam
|
||||
if (p.boost) {
|
||||
const fl = 8 + Math.random() * 10;
|
||||
const fg = ctx.createLinearGradient(0, h * 0.4, 0, h * 0.4 + fl);
|
||||
fg.addColorStop(0, rgba(C.cyan, 0.9));
|
||||
fg.addColorStop(1, rgba(C.cyan, 0));
|
||||
ctx.fillStyle = fg;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-w * 0.28, h * 0.38);
|
||||
ctx.lineTo(0, h * 0.38 + fl);
|
||||
ctx.lineTo(w * 0.28, h * 0.38);
|
||||
ctx.closePath(); ctx.fill();
|
||||
}
|
||||
|
||||
// schild-bubbel
|
||||
if (p.shield) {
|
||||
ctx.strokeStyle = rgba(C.green, 0.65);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.shadowBlur = 12;
|
||||
ctx.shadowColor = C.green;
|
||||
ctx.beginPath(); ctx.ellipse(0, 0, w * 0.8, h * 0.75, 0, 0, 7); ctx.stroke();
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
|
||||
// schaduw
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.35)';
|
||||
ctx.beginPath(); ctx.ellipse(2, 2, w * 0.55, h * 0.55, 0, 0, 7); ctx.fill();
|
||||
|
||||
// carrosserie met glow
|
||||
ctx.shadowColor = p.color;
|
||||
ctx.shadowBlur = p.isMe ? 22 : 12;
|
||||
const body = ctx.createLinearGradient(0, -h / 2, w, h / 2);
|
||||
body.addColorStop(0, lighten(p.color, 18));
|
||||
body.addColorStop(0.5, p.color);
|
||||
body.addColorStop(1, darken(p.color, 12));
|
||||
ctx.fillStyle = body;
|
||||
rrect(ctx, -w / 2, -h / 2, w, h, w * 0.32);
|
||||
ctx.fill();
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.35)';
|
||||
ctx.lineWidth = 1;
|
||||
rrect(ctx, -w / 2, -h / 2, w, h, w * 0.32);
|
||||
ctx.stroke();
|
||||
|
||||
// voorruit
|
||||
ctx.fillStyle = 'rgba(10,16,46,0.9)';
|
||||
rrect(ctx, -w * 0.34, -h * 0.16, w * 0.68, h * 0.34, 3);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.25)';
|
||||
rrect(ctx, -w * 0.34, -h * 0.16, w * 0.68, 2.5, 2);
|
||||
ctx.fill();
|
||||
|
||||
// zijwielen
|
||||
ctx.fillStyle = '#0a0d1c';
|
||||
rrect(ctx, -w * 0.52, -h * 0.34, w * 0.16, h * 0.28, 2); ctx.fill();
|
||||
rrect(ctx, w * 0.36, -h * 0.34, w * 0.16, h * 0.28, 2); ctx.fill();
|
||||
rrect(ctx, -w * 0.52, h * 0.1, w * 0.16, h * 0.3, 2); ctx.fill();
|
||||
rrect(ctx, w * 0.36, h * 0.1, w * 0.16, h * 0.3, 2); ctx.fill();
|
||||
|
||||
// vlag bij gefinisht
|
||||
if (p.finished) {
|
||||
ctx.fillStyle = '#dfe7ff';
|
||||
ctx.fillRect(w * 0.3, -h * 0.72, 3, h * 0.7);
|
||||
const sq = 3;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let j = 0; j < 2; j++) {
|
||||
ctx.fillStyle = ((i + j) % 2 === 0) ? '#fff' : '#111';
|
||||
ctx.fillRect(w * 0.3 + 3 + i * sq, -h * 0.72 + j * sq, sq, sq);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// naamlabel
|
||||
ctx.font = '600 10px system-ui, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = p.isMe ? '#fff' : rgba('#eaf4ff', 0.92);
|
||||
ctx.shadowColor = '#000';
|
||||
ctx.shadowBlur = 4;
|
||||
ctx.fillText(p.name + (p.isMe ? ' • jij' : ''), 0, -h * 0.62);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function hexToRgb(hex) {
|
||||
const h = hex.replace('#', '');
|
||||
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
|
||||
}
|
||||
function lighten(hex, amt) {
|
||||
const [r, g, b] = hexToRgb(hex);
|
||||
const f = (x) => Math.round(clamp(x + amt, 0, 255));
|
||||
return `rgb(${f(r)},${f(g)},${f(b)})`;
|
||||
}
|
||||
function darken(hex, amt) {
|
||||
const [r, g, b] = hexToRgb(hex);
|
||||
const f = (x) => Math.round(clamp(x - amt, 0, 255));
|
||||
return `rgb(${f(r)},${f(g)},${f(b)})`;
|
||||
}
|
||||
|
||||
/* ---------------- FX / DEELTJES ---------------- */
|
||||
function drawFx(ctx, fx, t) {
|
||||
for (let i = fx.length - 1; i >= 0; i--) {
|
||||
const f = fx[i];
|
||||
if (!f) continue;
|
||||
const lifeF = 1 - f.life / f.maxLife;
|
||||
if (f.kind === 'pulse') {
|
||||
ctx.strokeStyle = rgba(f.color, lifeF * 0.7);
|
||||
ctx.lineWidth = 2.5;
|
||||
ctx.beginPath();
|
||||
ctx.arc(f.sx, f.sy, f.size * (1 + (1 - lifeF) * 3), 0, 7);
|
||||
ctx.stroke();
|
||||
} else {
|
||||
ctx.globalAlpha = lifeF;
|
||||
ctx.fillStyle = f.color;
|
||||
ctx.shadowBlur = f.size * 2;
|
||||
ctx.shadowColor = f.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(f.sx, f.sy, f.size * (0.3 + lifeF * 0.7), 0, 7);
|
||||
ctx.fill();
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
function drawPylon(ctx, v, sx, sy, t) {
|
||||
const s = Math.max(13, v.roadW * 0.05);
|
||||
ctx.save();
|
||||
ctx.translate(sx, sy);
|
||||
ctx.shadowBlur = 14;
|
||||
ctx.shadowColor = C.gold;
|
||||
const grad = ctx.createLinearGradient(0, -s, 0, s);
|
||||
grad.addColorStop(0, '#ff7a1a');
|
||||
grad.addColorStop(0.5, '#20264a');
|
||||
grad.addColorStop(1, '#ffd93d');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-s * 0.42, -s);
|
||||
ctx.lineTo(s * 0.42, -s);
|
||||
ctx.lineTo(s * 0.2, s);
|
||||
ctx.lineTo(-s * 0.2, s);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.fillStyle = C.red;
|
||||
ctx.shadowColor = C.red;
|
||||
ctx.shadowBlur = 8 + Math.sin(t * 10) * 5;
|
||||
ctx.beginPath(); ctx.arc(0, -s - 4, 3, 0, 7); ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawOil(ctx, v, sx, sy) {
|
||||
const rx = Math.max(24, v.roadW * 0.10);
|
||||
ctx.save();
|
||||
ctx.translate(sx, sy);
|
||||
const og = ctx.createRadialGradient(0, 0, 2, 0, 0, rx);
|
||||
og.addColorStop(0, 'rgba(40,20,60,0.9)');
|
||||
og.addColorStop(0.7, 'rgba(60,30,80,0.75)');
|
||||
og.addColorStop(1, 'rgba(80,40,110,0.45)');
|
||||
ctx.fillStyle = og;
|
||||
ctx.beginPath(); ctx.ellipse(0, 0, rx, rx * 0.42, 0, 0, 7); ctx.fill();
|
||||
ctx.strokeStyle = rgba(C.pink, 0.35);
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.beginPath(); ctx.ellipse(0, 0, rx * 0.6, rx * 0.24, 0, 0, 7); ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawPickup(ctx, v, sx, sy, kind, t) {
|
||||
const s = Math.max(11, v.roadW * 0.042);
|
||||
const pulse = 1 + Math.sin(t * 4 + sx * 0.01) * 0.12;
|
||||
ctx.save();
|
||||
ctx.translate(sx, sy + Math.sin(t * 3) * 4);
|
||||
ctx.scale(pulse, pulse);
|
||||
const col = kind === 'boost' ? C.cyan : C.green;
|
||||
ctx.shadowBlur = 18;
|
||||
ctx.shadowColor = col;
|
||||
ctx.strokeStyle = col;
|
||||
ctx.fillStyle = rgba(col, 0.18);
|
||||
ctx.lineWidth = 3;
|
||||
ctx.rotate(t * 1.5);
|
||||
ctx.beginPath();
|
||||
if (kind === 'boost') {
|
||||
ctx.moveTo(0, -s); ctx.lineTo(s, 0); ctx.lineTo(0, s); ctx.lineTo(-s, 0); ctx.closePath();
|
||||
} else {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const a = (i / 6) * Math.PI * 2;
|
||||
const r = (i % 2 === 0) ? s : s * 0.62;
|
||||
ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r);
|
||||
if (i === 0) { ctx.moveTo(Math.cos(a) * r, Math.sin(a) * r); ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r); }
|
||||
}
|
||||
ctx.closePath();
|
||||
}
|
||||
ctx.fill(); ctx.stroke();
|
||||
ctx.rotate(-t * 1.5);
|
||||
ctx.fillStyle = '#fff';
|
||||
if (kind === 'boost') {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(s * 0.12, -s * 0.55);
|
||||
ctx.lineTo(-s * 0.45, s * 0.25);
|
||||
ctx.lineTo(-s * 0.02, s * 0.25);
|
||||
ctx.lineTo(-s * 0.12, s * 0.55);
|
||||
ctx.lineTo(s * 0.45, -s * 0.25);
|
||||
ctx.lineTo(s * 0.02, -s * 0.25);
|
||||
ctx.closePath(); ctx.fill();
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -s * 0.55);
|
||||
ctx.lineTo(s * 0.5, -s * 0.3);
|
||||
ctx.lineTo(s * 0.5, s * 0.15);
|
||||
ctx.lineTo(0, s * 0.55);
|
||||
ctx.lineTo(-s * 0.5, s * 0.15);
|
||||
ctx.lineTo(-s * 0.5, -s * 0.3);
|
||||
ctx.closePath(); ctx.fill();
|
||||
ctx.strokeStyle = '#0b0f2a';
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
|
||||
/* ---------------- HOOFD-RENDER ---------------- */
|
||||
function render(ctx, o) {
|
||||
const t = o.t / 1000;
|
||||
const W = o.W, H = o.H;
|
||||
const roadW = Math.min(W * 0.88, 460);
|
||||
const roadLeft = (W - roadW) / 2;
|
||||
const scaleX = roadW / ROAD_W;
|
||||
const carY = Math.min(H * 0.62, H - 140);
|
||||
|
||||
const v = {
|
||||
W, H, roadLeft, roadW, scaleX, carY, t,
|
||||
me: { d: o.me.d },
|
||||
trackLength: o.trackLength,
|
||||
};
|
||||
|
||||
ctx.save();
|
||||
if (o.shake) {
|
||||
ctx.translate((Math.random() - 0.5) * o.shake, (Math.random() - 0.5) * o.shake);
|
||||
}
|
||||
drawBackground(ctx, W, H, t);
|
||||
drawRoad(ctx, v);
|
||||
|
||||
// obstakels + power-ups (alleen zichtbare)
|
||||
const top = -80, bot = H + 80;
|
||||
if (o.track) {
|
||||
for (const ob of o.track.obstacles) {
|
||||
const sy = syFor(v, ob.d);
|
||||
if (sy < top || sy > bot) continue;
|
||||
const sx = roadLeft + ob.x * scaleX;
|
||||
if (ob.type === 'oil') drawOil(ctx, v, sx, sy);
|
||||
else drawPylon(ctx, v, sx, sy, t);
|
||||
}
|
||||
for (const pu of o.track.powerups) {
|
||||
const sy = syFor(v, pu.d);
|
||||
if (sy < top || sy > bot) continue;
|
||||
const sx = roadLeft + pu.x * scaleX;
|
||||
drawPickup(ctx, v, sx, sy, pu.kind, t);
|
||||
}
|
||||
}
|
||||
|
||||
// auto's (achterste eerst)
|
||||
const cars = (o.cars || []).slice().sort((a, b) => a.d - b.d);
|
||||
for (const p of cars) drawCar(ctx, v, p, t);
|
||||
|
||||
drawFx(ctx, o.fx || [], t);
|
||||
ctx.restore();
|
||||
|
||||
// snelheidsstrepen bij boost
|
||||
if (o.speedFactor > 1.15) {
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.12)';
|
||||
ctx.lineWidth = 2;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const x = (Math.sin(t * 3 + i * 1.7) * 0.5 + 0.5) * W;
|
||||
const len = 40 + ((t * 300) % 40);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, H);
|
||||
ctx.lineTo(x, H - len - ((t * 400) % 60));
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { render };
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,261 @@
|
||||
:root {
|
||||
--bg1: #0b0f2a;
|
||||
--bg2: #150f33;
|
||||
--neon: #00f0ff;
|
||||
--neon2: #ff3fa4;
|
||||
--gold: #ffd93d;
|
||||
--ok: #3dff88;
|
||||
--red: #ff4d6d;
|
||||
--card: rgba(13, 16, 44, 0.82);
|
||||
--line: rgba(0, 240, 255, 0.35);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
overscroll-behavior: none;
|
||||
background: radial-gradient(120% 90% at 50% 0%, var(--bg1), var(--bg2));
|
||||
font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
|
||||
color: #eaf4ff;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: fixed; inset: 0;
|
||||
}
|
||||
|
||||
#stars {
|
||||
position: fixed; inset: 0;
|
||||
background-image:
|
||||
radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.8), transparent 60%),
|
||||
radial-gradient(1px 1px at 68% 8%, rgba(255,255,255,.7), transparent 60%),
|
||||
radial-gradient(1.5px 1.5px at 82% 66%, rgba(0,240,255,.7), transparent 60%),
|
||||
radial-gradient(1px 1px at 34% 84%, rgba(255,255,255,.55), transparent 60%),
|
||||
radial-gradient(2px 2px at 44% 12%, rgba(255,63,164,.6), transparent 60%),
|
||||
radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,.6), transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#game {
|
||||
position: fixed; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ---- Overlays ---- */
|
||||
.overlay {
|
||||
position: fixed; inset: 0;
|
||||
z-index: 5;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 16px;
|
||||
background: radial-gradient(100% 100% at 50% 20%, rgba(11,15,42,.45), rgba(11,15,42,.9));
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.hidden { display: none !important; }
|
||||
|
||||
.card {
|
||||
width: min(420px, 100%);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
padding: 26px 24px;
|
||||
box-shadow: 0 0 40px rgba(0, 240, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
animation: pop .35s cubic-bezier(.2, 1.4, .4, 1);
|
||||
}
|
||||
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
|
||||
.logo {
|
||||
font-size: 46px; font-weight: 900; letter-spacing: 3px; line-height: 1;
|
||||
color: var(--neon);
|
||||
text-shadow: 0 0 18px rgba(0,240,255,.8), 0 4px 0 rgba(255,63,164,.7);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.logo span { color: var(--neon2); text-shadow: 0 0 18px rgba(255,63,164,.9); }
|
||||
.tagline { color: #99a8d8; font-size: 13px; letter-spacing: 1px; margin-bottom: 20px; }
|
||||
|
||||
input[type=text], input:not([type]) {
|
||||
width: 100%;
|
||||
padding: 13px 16px;
|
||||
font-size: 17px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0,240,255,.4);
|
||||
background: rgba(8, 12, 32, 0.8);
|
||||
color: #fff;
|
||||
outline: none;
|
||||
margin-bottom: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
input:focus { border-color: var(--neon); box-shadow: 0 0 14px rgba(0,240,255,.45); }
|
||||
input::placeholder { color: #667; }
|
||||
|
||||
.colors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
|
||||
.swatch {
|
||||
width: 34px; height: 34px; border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.4);
|
||||
}
|
||||
.swatch.on { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); transform: scale(1.12); }
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 18px; font-weight: 800; letter-spacing: 1px;
|
||||
color: #02131a;
|
||||
background: linear-gradient(90deg, var(--neon), #45e0ff);
|
||||
border: none; border-radius: 14px;
|
||||
box-shadow: 0 0 22px rgba(0,240,255,.55), 0 6px 0 rgba(0,120,170,.9);
|
||||
cursor: pointer;
|
||||
transition: transform .08s;
|
||||
}
|
||||
.btn:active { transform: translateY(4px); box-shadow: 0 0 16px rgba(0,240,255,.5), 0 2px 0 rgba(0,120,170,.9); }
|
||||
.btn.ghost {
|
||||
background: linear-gradient(90deg, var(--neon2), #ff7ac0); color: #25010f;
|
||||
box-shadow: 0 0 22px rgba(255,63,164,.5), 0 6px 0 rgba(150,20,90,.9);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.msg { min-height: 20px; margin-top: 12px; font-size: 14px; color: var(--gold); }
|
||||
.msg.err { color: var(--red); }
|
||||
.hint { margin-top: 14px; font-size: 12.5px; color: #7d8ab8; line-height: 1.5; }
|
||||
|
||||
|
||||
/* ---- Kamer / HUD ---- */
|
||||
#room { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
|
||||
|
||||
#hud {
|
||||
position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0;
|
||||
display: flex; justify-content: space-between; align-items: flex-start;
|
||||
padding: 0 12px; pointer-events: none;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,.8);
|
||||
}
|
||||
.hud-timer {
|
||||
font-size: 30px; font-weight: 900; color: #fff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.hud-timer.danger { color: var(--red); animation: blink 1s infinite; }
|
||||
.hud-speed { font-size: 12px; color: var(--neon); letter-spacing: 1px; margin-top: 2px; }
|
||||
.hud-pos { text-align: right; font-size: 20px; font-weight: 800; color: var(--gold); }
|
||||
.hud-dist { text-align: right; font-size: 12px; color: #b9c6f0; letter-spacing: 1px; margin-top: 2px; }
|
||||
@keyframes blink { 50% { opacity: .35; } }
|
||||
|
||||
#lead {
|
||||
position: absolute; top: calc(118px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
|
||||
padding: 6px 16px; border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(255,63,164,.25), rgba(0,240,255,.25));
|
||||
background-color: rgba(10,14,40,.6);
|
||||
border: 1px solid var(--gold);
|
||||
color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px;
|
||||
text-shadow: 0 0 10px rgba(255,217,61,.9);
|
||||
display: flex; gap: 6px; align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#lead .crown { color: var(--gold); }
|
||||
|
||||
/* Leaderboard / aanmelderslijst */
|
||||
.board {
|
||||
position: absolute;
|
||||
top: calc(20px + env(safe-area-inset-top)); right: 12px;
|
||||
width: min(180px, 44vw);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 8px 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.board-head { font-size: 10.5px; letter-spacing: 1.5px; color: var(--neon); margin-bottom: 5px; text-transform: uppercase; }
|
||||
#boardList { list-style: none; max-height: 42vh; overflow: hidden; }
|
||||
#boardList li {
|
||||
display: flex; gap: 6px; align-items: center;
|
||||
font-size: 12px; padding: 3px 4px; border-radius: 6px;
|
||||
color: #dce7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
#boardList li .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
|
||||
#boardList li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
||||
#boardList li.me { background: rgba(0,240,255,.18); box-shadow: inset 0 0 0 1px rgba(0,240,255,.5); }
|
||||
#boardList li.top { background: rgba(255,217,61,.16); box-shadow: inset 0 0 0 1px rgba(255,217,61,.55); }
|
||||
#boardList li .rk { width: 14px; text-align: right; color: #7d8ab8; font-weight: 700; }
|
||||
#boardList li .st { font-size: 10px; color: #9fb0dd; }
|
||||
|
||||
/* Minimap */
|
||||
#minimapWrap {
|
||||
position: absolute;
|
||||
right: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
|
||||
width: 22px; height: 34vh;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(8,12,32,.7);
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
#minimap { width: 100%; height: 100%; display: block; }
|
||||
|
||||
/* Toasts */
|
||||
#toasts { position: absolute; top: calc(170px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: 86%; }
|
||||
.toast {
|
||||
background: rgba(10,14,40,.85);
|
||||
border: 1px solid rgba(0,240,255,.4);
|
||||
padding: 7px 14px; border-radius: 999px;
|
||||
font-size: 13px; font-weight: 600; color: #fff;
|
||||
box-shadow: 0 0 18px rgba(0,240,255,.25);
|
||||
animation: toastIn .25s ease-out;
|
||||
text-align: center;
|
||||
}
|
||||
.toast.gold { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,217,61,.3); }
|
||||
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
|
||||
|
||||
/* Touch hints */
|
||||
#controls {
|
||||
position: absolute; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom));
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0 18px; pointer-events: none;
|
||||
}
|
||||
.ctrl { color: rgba(234,244,255,.5); font-size: 12px; letter-spacing: 1px; text-shadow: 0 1px 6px #000; }
|
||||
.arrow { color: rgba(0,240,255,.8); font-size: 16px; }
|
||||
.tipzoom { color: rgba(234,244,255,.4); font-size: 14px; }
|
||||
|
||||
/* Countdown */
|
||||
#countdown { flex-direction: column; gap: 8px; background: radial-gradient(90% 90% at 50% 50%, rgba(11,15,42,.25), rgba(11,15,42,.88)); }
|
||||
.cd-label { font-size: 15px; letter-spacing: 5px; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 14px rgba(0,240,255,.8); }
|
||||
.cd-num {
|
||||
font-size: 120px; font-weight: 900; line-height: 1;
|
||||
color: #fff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-shadow: 0 0 40px var(--neon), 0 0 80px var(--neon2);
|
||||
animation: pulse 0.5s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
|
||||
.cd-sub { color: #9fb0dd; font-size: 14px; }
|
||||
|
||||
/* Uitslag */
|
||||
.results-card { max-height: 92vh; overflow: auto; }
|
||||
.res-title { font-size: 26px; letter-spacing: 3px; color: var(--gold); text-shadow: 0 0 18px rgba(255,217,61,.7); margin-bottom: 12px; }
|
||||
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
|
||||
.pod {
|
||||
width: 30%; border-radius: 12px 12px 0 0; padding: 6px 4px 10px;
|
||||
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
|
||||
font-size: 11px; text-align: center;
|
||||
}
|
||||
.pod.g1 { height: 96px; background: linear-gradient(180deg, rgba(255,217,61,.45), rgba(255,217,61,.08)); border-color: var(--gold); order: 2; }
|
||||
.pod.g2 { height: 72px; background: linear-gradient(180deg, rgba(200,214,255,.4), rgba(200,214,255,.06)); order: 1; }
|
||||
.pod.g3 { height: 56px; background: linear-gradient(180deg, rgba(255,150,90,.4), rgba(255,150,90,.06)); order: 3; }
|
||||
.pod .medal { font-size: 22px; display: block; margin-bottom: 4px; }
|
||||
.pod .pname { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.results-list { list-style: none; text-align: left; margin: 0 0 16px; max-height: 32vh; overflow: auto; }
|
||||
.results-list li { display: flex; gap: 10px; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; }
|
||||
.results-list li.me { background: rgba(0,240,255,.16); border-radius: 8px; }
|
||||
.results-list .rk { width: 28px; color: var(--gold); font-weight: 800; }
|
||||
.results-list .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.results-list .tm { color: #b9c6f0; font-variant-numeric: tabular-nums; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo { font-size: 40px; }
|
||||
.hud-timer { font-size: 26px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user