martijn.diersmann@pm.me
432 lines
14 KiB
JavaScript
432 lines
14 KiB
JavaScript
/* 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.suffix || (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 };
|
|
})();
|
|
|