Equilibre · HTML
<title>Orbes en Équilibre</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="claude:viewport-fit-sides" content="cover">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=DM+Mono:wght@400;500&display=swap">
<style>
/* Plateau de verre incliné vu de dessus : un niveau à bulle géant sert de terrain, l'interface flotte en verre fumé sur les bords */
:root{
  --ink:#0d0f22;
  --ink-2:#1b1446;
  --glass:rgba(255,255,255,.07);
  --line:rgba(190,180,255,.16);
  --fg:#efeaff;
  --muted:#a59fcc;
  --accent:#3fe0a0;
  --danger:#ff3355;
  --orange:#ff9a3d;
  --gold:#ffd25a;
  --ice:#86dbff;
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--ink);color:var(--fg);font-family:var(--f-display);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
 
.hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));pointer-events:none;z-index:5}
.score-block{display:flex;flex-direction:column;gap:2px}
.score{font-weight:800;font-size:clamp(2.2rem,9vw,3.4rem);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.meta{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center}
.combo{color:var(--gold);font-weight:500;transition:transform .15s}
.combo.bump{transform:scale(1.35)}
.slow{color:var(--ice)}
.hud-btns{display:flex;gap:8px;pointer-events:auto}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg);display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn svg{width:20px;height:20px}
.icon-btn:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
 
.toast{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.9);font-weight:800;font-size:clamp(1.8rem,8vw,3rem);letter-spacing:-.02em;opacity:0;pointer-events:none;z-index:4;text-align:center;transition:opacity .3s, transform .5s cubic-bezier(.2,1.4,.4,1)}
.toast small{display:block;font-family:var(--f-mono);font-weight:400;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
 
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  padding-block:calc(env(safe-area-inset-top,0px) + 20px) calc(env(safe-area-inset-bottom,0px) + 20px);
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));
  background:radial-gradient(120% 80% at 50% 30%, rgba(27,20,70,.72), rgba(13,15,34,.94));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
.panel{width:100%;max-width:400px;display:flex;flex-direction:column;gap:22px;margin:auto}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font-weight:800;font-size:clamp(2.6rem,13vw,4.2rem);line-height:.88;letter-spacing:-.035em;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
h2{margin:0;font-weight:800;font-size:clamp(2rem,10vw,3rem);line-height:.95;letter-spacing:-.03em}
.lede{margin:0;color:var(--muted);font-size:1rem;line-height:1.5;max-width:34ch}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:10px;font-size:.92rem;min-width:0}
.legend b{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums;margin-left:auto;color:var(--fg)}
.dot{flex:none;border-radius:50%;box-shadow:0 0 14px var(--c);background:radial-gradient(circle at 35% 30%, #fff 0 8%, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%)}
.legend .warn{grid-column:1/-1;color:var(--danger)}
.legend .warn b{color:var(--danger)}
.btn{appearance:none;border:0;border-radius:999px;padding:16px 26px;font:600 1.1rem var(--f-display);cursor:pointer;color:var(--ink);background:var(--accent);box-shadow:0 10px 30px -8px rgba(63,224,160,.55);transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);box-shadow:none}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row .btn{flex:1 1 140px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:16px;overflow:hidden}
.stats div{background:var(--ink);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.stats span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stats strong{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums}
.reason{color:var(--danger);font-family:var(--f-mono);font-size:.82rem;letter-spacing:.06em}
.new-best{color:var(--gold);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
 
.settings{display:flex;flex-direction:column;gap:14px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:4px;border-bottom:1px solid var(--line);padding-bottom:12px}
.setting label{font-size:.98rem}
.setting small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
input[type=range]{accent-color:var(--accent);width:130px}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:500 .8rem var(--f-mono);padding:8px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--ink)}
.switch{appearance:none;width:46px;height:28px;border-radius:999px;background:var(--glass);border:1px solid var(--line);position:relative;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .2s, background .2s}
.switch:checked{background:rgba(63,224,160,.25)}
.switch:checked::after{transform:translateX(18px);background:var(--accent)}
 
.pad{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);width:118px;height:118px;border-radius:50%;
  border:1px solid var(--line);background:radial-gradient(circle, rgba(255,255,255,.05) 0 30%, transparent 31%), var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);touch-action:none}
.pad::before,.pad::after{content:"";position:absolute;background:var(--line)}
.pad::before{left:50%;top:10px;bottom:10px;width:1px}
.pad::after{top:50%;left:10px;right:10px;height:1px}
.knob{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff, #cfc6ff 40%, #6c5fd6);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.pad-hint{position:fixed;z-index:6;left:0;right:0;text-align:center;bottom:calc(env(safe-area-inset-bottom,0px) + 144px);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);pointer-events:none;padding-inline:16px}
.motion-note{font-family:var(--f-mono);font-size:.74rem;line-height:1.5;color:var(--muted);border-left:2px solid var(--ice);padding-left:10px}
@media (prefers-reduced-motion: reduce){.toast{transition:opacity .2s}.combo{transition:none}}
</style>
 
<canvas id="game" aria-label="Plateau de jeu"></canvas>
 
<div class="hud" id="hud" hidden>
  <div class="score-block">
    <div class="score" id="score">0</div>
    <div class="meta"><span id="level">Niv. 1</span><span class="combo" id="combo"></span><span class="slow" id="slow"></span></div>
  </div>
  <div class="hud-btns">
    <button class="icon-btn" id="calBtn" aria-label="Recalibrer l'inclinaison" title="Recalibrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2.5" fill="currentColor"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3"/></svg></button>
    <button class="icon-btn" id="pauseBtn" aria-label="Pause" title="Pause"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1.5"/><rect x="14" y="5" width="4" height="14" rx="1.5"/></svg></button>
  </div>
</div>
 
<div class="toast" id="toast"></div>
 
<div class="pad" id="pad" hidden><div class="knob" id="knob"></div></div>
<div class="pad-hint" id="padHint" hidden>Glisse la bille pour pencher le plateau</div>
 
<!-- Accueil -->
<div class="overlay" id="startScreen">
  <div class="panel">
    <div class="eyebrow">Jeu d'inclinaison</div>
    <h1>Orbes en <em>Équilibre</em></h1>
    <p class="lede">Penche le téléphone pour garder les orbes sur le plateau. Touche-les pour marquer. Une seule orbe qui tombe, et c'est fini.</p>
    <ul class="legend">
      <li><span class="dot" style="--c:var(--accent);width:28px;height:28px"></span>Grosse verte<b>+3</b></li>
      <li><span class="dot" style="--c:var(--orange);width:22px;height:22px"></span>Orange<b>+2</b></li>
      <li><span class="dot" style="--c:#f3f0ff;width:16px;height:16px"></span>Petite blanche<b>+1</b></li>
      <li><span class="dot" style="--c:var(--gold);width:18px;height:18px"></span>Or, rare<b>+5</b></li>
      <li><span class="dot" style="--c:var(--ice);width:18px;height:18px"></span>Glace : ralenti<b>+1</b></li>
      <li><span class="dot" style="--c:#b9a8ff;width:20px;height:20px"></span>Combo rapide<b>×4</b></li>
      <li class="warn"><span class="dot" style="--c:var(--danger);width:22px;height:22px"></span>Rouge : ne jamais toucher<b>FIN</b></li>
    </ul>
    <div class="row">
      <button class="btn" id="playBtn">Jouer</button>
      <button class="btn ghost" id="settingsBtn">Réglages</button>
    </div>
    <div class="meta">Record <span id="bestStart" style="color:var(--fg)">0</span></div>
  </div>
</div>
 
<!-- Pause / réglages -->
<div class="overlay" id="pauseScreen" hidden>
  <div class="panel">
    <div class="eyebrow" id="pauseEyebrow">Pause</div>
    <h2 id="pauseTitle">Plateau figé</h2>
    <div class="settings">
      <div class="setting">
        <div><label>Contrôle</label><small id="ctrlNote">Inclinaison du téléphone</small></div>
        <div class="seg" role="group" aria-label="Mode de contrôle">
          <button id="ctrlTilt" aria-pressed="true">Pencher</button>
          <button id="ctrlPad" aria-pressed="false">Pavé</button>
        </div>
      </div>
      <div class="setting">
        <div><label for="sens">Sensibilité</label><small id="sensVal">100 %</small></div>
        <input type="range" id="sens" min="50" max="180" step="5" value="100">
      </div>
      <div class="setting">
        <div><label for="sound">Son</label></div>
        <input type="checkbox" class="switch" id="sound" checked>
      </div>
      <div class="setting">
        <div><label for="vib">Vibrations</label><small>Selon le téléphone</small></div>
        <input type="checkbox" class="switch" id="vib" checked>
      </div>
    </div>
    <p class="motion-note" id="motionNote" hidden>Le gyroscope ne répond pas ici. La visionneuse peut bloquer les capteurs : le pavé tactile prend le relais. Ouvre la page dans le navigateur du téléphone pour jouer en penchant.</p>
    <div class="row">
      <button class="btn" id="resumeBtn">Reprendre</button>
      <button class="btn ghost" id="quitBtn">Accueil</button>
    </div>
  </div>
</div>
 
<!-- Fin de partie -->
<div class="overlay" id="overScreen" hidden>
  <div class="panel">
    <div class="eyebrow">Partie terminée</div>
    <h2>Game over</h2>
    <div class="reason" id="reason"></div>
    <div class="stats">
      <div><span>Score</span><strong id="finalScore">0</strong></div>
      <div><span>Record</span><strong id="finalBest">0</strong></div>
      <div><span>Niveau</span><strong id="finalLevel">1</strong></div>
      <div><span>Orbes touchées</span><strong id="finalHits">0</strong></div>
    </div>
    <div class="new-best" id="newBest" hidden>Nouveau record</div>
    <div class="row">
      <button class="btn" id="againBtn">Rejouer</button>
      <button class="btn ghost" id="homeBtn">Accueil</button>
    </div>
  </div>
</div>
 
<script>
(() => {
"use strict";
const $ = id => document.getElementById(id);
const cv = $("game"), ctx = cv.getContext("2d");
 
/* ---------- réglages persistants ---------- */
const store = {
  get(k, d){ try{ const v = localStorage.getItem("orbes_"+k); return v === null ? d : JSON.parse(v); }catch(e){ return d; } },
  set(k, v){ try{ localStorage.setItem("orbes_"+k, JSON.stringify(v)); }catch(e){} }
};
const settings = {
  sens: store.get("sens", 100),
  sound: store.get("sound", true),
  vib: store.get("vib", true),
  control: store.get("control", "tilt")
};
let best = store.get("best", 0);
 
/* ---------- types d'orbes ---------- */
const TYPES = {
  green:  { pts:3, rf:.085, c:"#3fe0a0", name:"verte",   roll:.85 },
  orange: { pts:2, rf:.064, c:"#ff9a3d", name:"orange",  roll:1 },
  white:  { pts:1, rf:.046, c:"#f3f0ff", name:"blanche", roll:1.15 },
  red:    { pts:0, rf:.06,  c:"#ff3355", name:"rouge",   roll:1.05 },
  gold:   { pts:5, rf:.05,  c:"#ffd25a", name:"or",      roll:1.2 },
  ice:    { pts:1, rf:.052, c:"#86dbff", name:"glace",   roll:1 }
};
const MUST_STAY = t => t === "green" || t === "orange" || t === "white";
 
/* ---------- taille / sprites ---------- */
let W = 0, H = 0, M = 0, DPR = 1;
const sprites = {};
function shade(hex, f){
  const n = parseInt(hex.slice(1),16); let r=n>>16, g=n>>8&255, b=n&255;
  if (f < 0){ r*=1+f; g*=1+f; b*=1+f; } else { r+=(255-r)*f; g+=(255-g)*f; b+=(255-b)*f; }
  return `rgb(${r|0},${g|0},${b|0})`;
}
function makeSprite(type){
  const T = TYPES[type], r = T.rf * M, pad = r * 0.9, size = Math.ceil((r + pad) * 2 * DPR);
  const c = document.createElement("canvas"); c.width = c.height = size;
  const g = c.getContext("2d"); g.scale(DPR, DPR);
  const cx = r + pad, cy = r + pad;
  const glow = g.createRadialGradient(cx, cy, r * .6, cx, cy, r + pad);
  glow.addColorStop(0, T.c + "66"); glow.addColorStop(1, T.c + "00");
  g.fillStyle = glow; g.beginPath(); g.arc(cx, cy, r + pad, 0, 7); g.fill();
  const body = g.createRadialGradient(cx - r*.35, cy - r*.4, r*.05, cx, cy, r);
  body.addColorStop(0, shade(T.c, .75)); body.addColorStop(.45, T.c); body.addColorStop(1, shade(T.c, -.45));
  g.fillStyle = body; g.beginPath(); g.arc(cx, cy, r, 0, 7); g.fill();
  g.fillStyle = "rgba(255,255,255,.55)"; g.beginPath(); g.ellipse(cx - r*.32, cy - r*.42, r*.32, r*.18, -.5, 0, 7); g.fill();
  g.strokeStyle = "rgba(255,255,255,.18)"; g.lineWidth = Math.max(1, r*.05); g.beginPath(); g.arc(cx, cy, r*.97, 0, 7); g.stroke();
  if (type === "red"){
    g.strokeStyle = "rgba(40,0,10,.55)"; g.lineWidth = r*.16; g.lineCap = "round";
    g.beginPath(); g.moveTo(cx-r*.32, cy-r*.32); g.lineTo(cx+r*.32, cy+r*.32); g.moveTo(cx+r*.32, cy-r*.32); g.lineTo(cx-r*.32, cy+r*.32); g.stroke();
  } else if (type === "gold"){
    g.fillStyle = "rgba(120,70,0,.5)"; g.beginPath();
    for (let i=0;i<10;i++){ const a = -Math.PI/2 + i*Math.PI/5, rr = i%2 ? r*.2 : r*.48; g.lineTo(cx+Math.cos(a)*rr, cy+Math.sin(a)*rr); }
    g.closePath(); g.fill();
  } else if (type === "ice"){
    g.strokeStyle = "rgba(255,255,255,.7)"; g.lineWidth = r*.09; g.lineCap = "round"; g.beginPath();
    for (let i=0;i<3;i++){ const a = i*Math.PI/3; g.moveTo(cx+Math.cos(a)*r*.45, cy+Math.sin(a)*r*.45); g.lineTo(cx-Math.cos(a)*r*.45, cy-Math.sin(a)*r*.45); }
    g.stroke();
  }
  sprites[type] = { c, r, half: (r + pad) };
}
function resize(){
  DPR = Math.min(window.devicePixelRatio || 1, 2.5);
  const oldW = W, oldH = H;
  W = innerWidth; H = innerHeight; M = Math.min(W, H);
  cv.width = Math.round(W * DPR); cv.height = Math.round(H * DPR);
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
  Object.keys(TYPES).forEach(makeSprite);
  if (oldW && game.orbs.length){
    for (const o of game.orbs){ o.x *= W/oldW; o.y *= H/oldH; o.r = TYPES[o.type].rf * M; }
  }
}
 
/* ---------- état ---------- */
const game = {
  running:false, paused:false, over:false, overT:0,
  t:0, score:0, level:1, hits:0,
  orbs:[], parts:[], texts:[],
  spawnT:0, combo:0, comboT:0, slowT:0, flash:0, dangerSide:null
};
 
/* ---------- inclinaison ---------- */
const tilt = { x:0, y:0, tx:0, ty:0, rawX:0, rawY:0, calX:0, calY:0, gotMotion:false, listening:false };
const keys = {};
const padTilt = { x:0, y:0 };
const MAX_DEG = 30;
 
function screenAngle(){
  if (screen.orientation && typeof screen.orientation.angle === "number") return screen.orientation.angle;
  return typeof window.orientation === "number" ? window.orientation : 0;
}
function onOrient(e){
  if (e.beta == null || e.gamma == null) return;
  const b = e.beta, g = e.gamma, a = ((screenAngle() % 360) + 360) % 360;
  let x, y;
  if (a === 90){ x = b; y = -g; }
  else if (a === 270){ x = -b; y = g; }
  else if (a === 180){ x = -g; y = -b; }
  else { x = g; y = b; }
  if (!tilt.gotMotion){ tilt.gotMotion = true; tilt.calX = x; tilt.calY = y; updateMotionUI(); }
  tilt.rawX = x; tilt.rawY = y;
}
async function startMotion(){
  if (tilt.listening) return;
  try{
    if (typeof DeviceOrientationEvent !== "undefined" && typeof DeviceOrientationEvent.requestPermission === "function"){
      const res = await DeviceOrientationEvent.requestPermission();
      if (res !== "granted") { updateMotionUI(); return; }
    }
    addEventListener("deviceorientation", onOrient);
    tilt.listening = true;
  }catch(e){ /* capteur refusé */ }
  setTimeout(updateMotionUI, 1400);
}
function calibrate(){
  tilt.calX = tilt.rawX; tilt.calY = tilt.rawY;
  showToast("Plateau à niveau", "nouvelle position neutre");
}
function usingPad(){ return settings.control === "pad" || !tilt.gotMotion; }
function updateMotionUI(){
  const pad = usingPad() && (game.running && !game.over);
  $("pad").hidden = !pad; $("padHint").hidden = !pad || game.t > 8;
  $("calBtn").hidden = usingPad();
  $("motionNote").hidden = tilt.gotMotion;
  $("ctrlTilt").setAttribute("aria-pressed", String(settings.control === "tilt"));
  $("ctrlPad").setAttribute("aria-pressed", String(settings.control === "pad"));
  $("ctrlNote").textContent = settings.control === "pad" ? "Pavé tactile et flèches du clavier" : (tilt.gotMotion ? "Inclinaison du téléphone" : "Inclinaison (capteur muet, pavé actif)");
}
function readTarget(){
  const s = settings.sens / 100;
  let x = 0, y = 0;
  if (!usingPad()){
    x = (tilt.rawX - tilt.calX) / MAX_DEG; y = (tilt.rawY - tilt.calY) / MAX_DEG;
  } else { x = padTilt.x; y = padTilt.y; }
  const kx = (keys.ArrowRight||keys.d ? 1:0) - (keys.ArrowLeft||keys.q||keys.a ? 1:0);
  const ky = (keys.ArrowDown||keys.s ? 1:0) - (keys.ArrowUp||keys.z||keys.w ? 1:0);
  if (kx || ky){ x = kx * .8; y = ky * .8; }
  tilt.tx = Math.max(-1, Math.min(1, x * s));
  tilt.ty = Math.max(-1, Math.min(1, y * s));
}
 
/* pavé tactile */
(() => {
  const pad = $("pad"), knob = $("knob"); let id = null;
  const move = e => {
    const r = pad.getBoundingClientRect(), R = r.width/2 - 20;
    let dx = e.clientX - (r.left + r.width/2), dy = e.clientY - (r.top + r.height/2);
    const d = Math.hypot(dx, dy); if (d > R){ dx *= R/d; dy *= R/d; }
    knob.style.transform = `translate(${dx}px,${dy}px)`;
    padTilt.x = dx / R; padTilt.y = dy / R;
  };
  pad.addEventListener("pointerdown", e => { e.stopPropagation(); id = e.pointerId; pad.setPointerCapture(id); move(e); });
  pad.addEventListener("pointermove", e => { if (e.pointerId === id) move(e); });
  const end = e => { if (e.pointerId !== id) return; id = null; padTilt.x = padTilt.y = 0; knob.style.transform = ""; };
  pad.addEventListener("pointerup", end); pad.addEventListener("pointercancel", end);
})();
 
addEventListener("keydown", e => { keys[e.key.length === 1 ? e.key.toLowerCase() : e.key] = true; if (e.key === " " || e.key === "Escape"){ if (game.running && !game.over) togglePause(); } if (e.key.startsWith("Arrow")) e.preventDefault(); });
addEventListener("keyup", e => { keys[e.key.length === 1 ? e.key.toLowerCase() : e.key] = false; });
 
/* ---------- son & vibration ---------- */
let actx = null;
function audio(){ if (!settings.sound) return null; try{ actx = actx || new (window.AudioContext || window.webkitAudioContext)(); if (actx.state === "suspended") actx.resume(); }catch(e){ return null; } return actx; }
function tone(freq, dur, type="sine", vol=.18, slide=0){
  const a = audio(); if (!a) return;
  const o = a.createOscillator(), g = a.createGain(), t = a.currentTime;
  o.type = type; o.frequency.setValueAtTime(freq, t); if (slide) o.frequency.exponentialRampToValueAtTime(Math.max(30, freq*slide), t+dur);
  g.gain.setValueAtTime(vol, t); g.gain.exponentialRampToValueAtTime(.001, t+dur);
  o.connect(g).connect(a.destination); o.start(t); o.stop(t+dur+.02);
}
function buzz(p){ if (!settings.vib) return; try{ navigator.vibrate && navigator.vibrate(p); }catch(e){} }
 
/* ---------- difficulté (douce au début, accélère lentement) ---------- */
const LEVEL_EVERY = 22;
function speedMul(){ return Math.min(1.75, .5 + (game.level-1) * .07); }
function spawnEvery(){ return Math.max(.6, 2.4 - (game.level-1) * .11); }
function redChance(){ return game.level < 2 ? 0 : Math.min(.3, .07 + (game.level-2) * .018); }
function maxOrbs(){ return Math.min(18, 6 + game.level); }
 
function pickType(){
  const r = Math.random();
  if (r < redChance()) return "red";
  const r2 = Math.random();
  if (game.level >= 2 && r2 < .045) return "gold";
  if (game.level >= 3 && r2 < .085) return "ice";
  const r3 = Math.random();
  return r3 < .3 ? "green" : r3 < .65 ? "orange" : "white";
}
function spawn(type){
  type = type || pickType();
  const r = TYPES[type].rf * M, mx = Math.max(r*1.8, M*.12);
  let x, y, ok = false;
  for (let i = 0; i < 16 && !ok; i++){
    x = mx + Math.random() * (W - mx*2);
    y = Math.max(mx, 90) + Math.random() * (H - Math.max(mx,90) - mx);
    ok = game.orbs.every(o => Math.hypot(o.x-x, o.y-y) > o.r + r + 8);
  }
  const life = type === "red" ? 7 + Math.random()*2.5 : type === "gold" ? 5 : type === "ice" ? 6.5 : Infinity;
  game.orbs.push({ type, x, y, vx:0, vy:0, r, warm:.7, age:0, life, pop:0, id:Math.random() });
}
 
/* ---------- boucle ---------- */
function startGame(){
  Object.assign(game, { running:true, paused:false, over:false, overT:0, t:0, score:0, level:1, hits:0, orbs:[], parts:[], texts:[], spawnT:1.2, combo:0, comboT:0, slowT:0, flash:0 });
  ["startScreen","overScreen","pauseScreen"].forEach(id => $(id).hidden = true);
  $("hud").hidden = false;
  spawn("green"); spawn("orange"); spawn("white");
  startMotion(); updateHUD(); updateMotionUI();
  showToast("Niveau 1", "doucement pour commencer");
  audio(); tone(440, .12, "triangle", .12, 1.5);
  requestWake();
}
function endGame(orb, why){
  if (game.over) return;
  game.over = true; game.overT = 0; game.flash = 1;
  game.dangerOrb = orb;
  buzz([60,40,160]); tone(180, .5, "sawtooth", .16, .3);
  const nb = game.score > best; if (nb){ best = game.score; store.set("best", best); }
  $("reason").textContent = why;
  $("finalScore").textContent = game.score; $("finalBest").textContent = best;
  $("finalLevel").textContent = game.level; $("finalHits").textContent = game.hits;
  $("newBest").hidden = !nb;
  updateMotionUI();
  setTimeout(() => { $("overScreen").hidden = false; $("hud").hidden = true; game.running = false; }, 900);
}
function togglePause(force){
  const p = typeof force === "boolean" ? force : !game.paused;
  game.paused = p; $("pauseScreen").hidden = !p;
  $("pauseEyebrow").textContent = "Pause"; $("pauseTitle").textContent = "Plateau figé";
  $("resumeBtn").hidden = false;
  updateMotionUI();
}
 
let last = performance.now();
function frame(now){
  const rdt = Math.min(.033, (now - last) / 1000); last = now;
  readTarget();
  const k = Math.min(1, rdt * 9);
  tilt.x += (tilt.tx - tilt.x) * k; tilt.y += (tilt.ty - tilt.y) * k;
  if (game.running && !game.paused && !game.over) update(rdt);
  else if (game.over) { game.overT += rdt; updateFx(rdt * .35); }
  game.flash = Math.max(0, game.flash - rdt * 1.6);
  draw(now / 1000);
  requestAnimationFrame(frame);
}
 
function update(rdt){
  const slow = game.slowT > 0 ? .42 : 1;
  game.slowT = Math.max(0, game.slowT - rdt);
  const dt = rdt * slow;
  game.t += dt;
 
  const lvl = 1 + Math.floor(game.t / LEVEL_EVERY);
  if (lvl !== game.level){
    game.level = lvl;
    const msg = lvl === 2 ? "attention aux rouges" : lvl === 3 ? "orbes de glace en jeu" : "ça accélère un peu";
    showToast("Niveau " + lvl, msg); tone(660, .15, "triangle", .1, 1.4);
  }
  if (game.t > 8) $("padHint").hidden = true;
 
  game.spawnT -= dt;
  const goodCount = game.orbs.filter(o => o.type !== "red").length;
  if (game.spawnT <= 0){
    game.spawnT = spawnEvery() * (.75 + Math.random() * .5);
    if (goodCount < maxOrbs()) spawn();
  }
 
  game.comboT -= rdt; if (game.comboT <= 0 && game.combo){ game.combo = 0; updateHUD(); }
 
  const G = M * 1.15 * speedMul();
  const maxV = M * (0.9 + speedMul() * .5);
  const damp = Math.exp(-1.25 * dt);
  for (const o of game.orbs){
    o.age += dt;
    if (o.warm > 0){ o.warm -= dt; continue; }
    const roll = TYPES[o.type].roll;
    o.vx = (o.vx + tilt.x * G * roll * dt) * damp;
    o.vy = (o.vy + tilt.y * G * roll * dt) * damp;
    const sp = Math.hypot(o.vx, o.vy); if (sp > maxV){ o.vx *= maxV/sp; o.vy *= maxV/sp; }
    o.x += o.vx * dt; o.y += o.vy * dt;
  }
  // collisions entre orbes
  const os = game.orbs;
  for (let i = 0; i < os.length; i++){
    const a = os[i]; if (a.warm > 0) continue;
    for (let j = i+1; j < os.length; j++){
      const b = os[j]; if (b.warm > 0) continue;
      const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy), min = a.r + b.r;
      if (d > 0 && d < min){
        const nx = dx/d, ny = dy/d, ma = a.r*a.r, mb = b.r*b.r, ov = (min - d);
        a.x -= nx * ov * mb/(ma+mb); a.y -= ny * ov * mb/(ma+mb);
        b.x += nx * ov * ma/(ma+mb); b.y += ny * ov * ma/(ma+mb);
        const rv = (b.vx - a.vx)*nx + (b.vy - a.vy)*ny;
        if (rv < 0){
          const jimp = -(1.55) * rv / (1/ma + 1/mb);
          a.vx -= jimp/ma*nx; a.vy -= jimp/ma*ny; b.vx += jimp/mb*nx; b.vy += jimp/mb*ny;
        }
      }
    }
  }
  // sorties et durée de vie
  for (let i = os.length - 1; i >= 0; i--){
    const o = os[i];
    const out = o.x < -o.r || o.x > W + o.r || o.y < -o.r || o.y > H + o.r;
    if (out){
      if (MUST_STAY(o.type)){ endGame(o, `L'orbe ${TYPES[o.type].name} est sortie du plateau`); return; }
      os.splice(i, 1); continue;
    }
    if (o.age > o.life){ burst(o, 8, .5); os.splice(i, 1); }
  }
  updateFx(dt);
}
function updateFx(dt){
  for (let i = game.parts.length-1; i >= 0; i--){
    const p = game.parts[i]; p.life -= dt;
    if (p.life <= 0){ game.parts.splice(i,1); continue; }
    p.x += p.vx*dt; p.y += p.vy*dt; p.vx *= .96; p.vy *= .96;
  }
  for (let i = game.texts.length-1; i >= 0; i--){
    const t = game.texts[i]; t.life -= dt; t.y -= 40*dt;
    if (t.life <= 0) game.texts.splice(i,1);
  }
}
function burst(o, n, speed=1){
  const c = TYPES[o.type].c;
  for (let i = 0; i < n; i++){
    const a = Math.random()*Math.PI*2, v = (60 + Math.random()*220) * speed;
    game.parts.push({ x:o.x, y:o.y, vx:Math.cos(a)*v, vy:Math.sin(a)*v, life:.5+Math.random()*.4, max:.9, c, r: 1.5 + Math.random()*o.r*.12 });
  }
}
 
/* ---------- toucher ---------- */
cv.addEventListener("pointerdown", e => {
  if (!game.running || game.paused || game.over) return;
  const x = e.clientX, y = e.clientY, slop = e.pointerType === "mouse" ? 2 : 12;
  for (let i = game.orbs.length - 1; i >= 0; i--){
    const o = game.orbs[i];
    if (o.warm > .25) continue;
    if (Math.hypot(o.x - x, o.y - y) <= o.r + slop){
      if (o.type === "red"){ burst(o, 30, 1.4); game.orbs.splice(i,1); endGame(o, "Tu as touché une orbe rouge"); return; }
      hit(o, i); return;
    }
  }
});
const POP_FREQ = { green:330, orange:440, white:587, gold:880, ice:740 };
function hit(o, i){
  game.orbs.splice(i, 1);
  game.combo = game.comboT > 0 ? game.combo + 1 : 1; game.comboT = 1.1;
  const mult = Math.min(4, 1 + Math.floor((game.combo - 1) / 4));
  const pts = TYPES[o.type].pts * mult;
  game.score += pts; game.hits++;
  game.texts.push({ x:o.x, y:o.y - o.r, txt:"+" + pts + (mult > 1 ? "  ×" + mult : ""), c:TYPES[o.type].c, life:.9 });
  burst(o, o.type === "gold" ? 26 : 16);
  tone(POP_FREQ[o.type] * (1 + (mult-1)*.12), .14, "triangle", .16, 1.8);
  buzz(12);
  if (o.type === "ice"){ game.slowT = 4; showToast("Ralenti", "4 secondes"); }
  if (o.type === "gold") showToast("+" + pts, "orbe d'or");
  updateHUD(mult > 1);
}
 
/* ---------- dessin ---------- */
function draw(t){
  const bg = ctx.createLinearGradient(0, 0, W*.4, H);
  bg.addColorStop(0, "#1b1446"); bg.addColorStop(1, "#0d0f22");
  ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
 
  // niveau à bulle géant
  const cx = W/2, cy = H/2, R = M*.46;
  ctx.save();
  ctx.strokeStyle = "rgba(190,180,255,.10)"; ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(190,180,255,.28)"; ctx.font = `500 ${Math.max(9, M*.022)}px "DM Mono", monospace`; ctx.textAlign = "left";
  for (let i = 1; i <= 3; i++){
    ctx.beginPath(); ctx.arc(cx, cy, R*i/3, 0, 7); ctx.stroke();
    ctx.fillText((MAX_DEG*i/3|0) + "°", cx + R*i/3 + 4, cy - 4);
  }
  ctx.beginPath(); ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy); ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R); ctx.stroke();
  // bulle : monte du côté haut, donc à l'opposé de la pente
  const bx = cx - tilt.x * R, by = cy - tilt.y * R, br = M*.06;
  const bub = ctx.createRadialGradient(bx - br*.3, by - br*.3, 2, bx, by, br);
  bub.addColorStop(0, "rgba(255,255,255,.22)"); bub.addColorStop(1, "rgba(160,150,255,.04)");
  ctx.fillStyle = bub; ctx.beginPath(); ctx.arc(bx, by, br, 0, 7); ctx.fill();
  ctx.strokeStyle = "rgba(220,215,255,.25)"; ctx.stroke();
  ctx.restore();
 
  // bord du plateau + alerte côté danger
  let edge = { l:0, r:0, t:0, b:0 };
  for (const o of game.orbs){
    if (!MUST_STAY(o.type) || o.warm > 0) continue;
    const z = o.r * 2.2;
    edge.l = Math.max(edge.l, 1 - o.x / z); edge.r = Math.max(edge.r, 1 - (W - o.x) / z);
    edge.t = Math.max(edge.t, 1 - o.y / z); edge.b = Math.max(edge.b, 1 - (H - o.y) / z);
  }
  const pulse = .6 + .4 * Math.sin(t * 10);
  const ew = Math.max(24, M*.08);
  const side = (v, x, y, w, h, x0, y0, x1, y1) => {
    if (v <= 0) return; v = Math.min(1, v);
    const g = ctx.createLinearGradient(x0, y0, x1, y1);
    g.addColorStop(0, `rgba(255,51,85,${.55*v*pulse})`); g.addColorStop(1, "rgba(255,51,85,0)");
    ctx.fillStyle = g; ctx.fillRect(x, y, w, h);
  };
  side(edge.l, 0, 0, ew, H, 0, 0, ew, 0);
  side(edge.r, W-ew, 0, ew, H, W, 0, W-ew, 0);
  side(edge.t, 0, 0, W, ew, 0, 0, 0, ew);
  side(edge.b, 0, H-ew, W, ew, 0, H, 0, H-ew);
  ctx.strokeStyle = "rgba(190,180,255,.18)"; ctx.lineWidth = 1.5;
  roundRect(5, 5, W-10, H-10, 22); ctx.stroke();
 
  // orbes
  for (const o of game.orbs){
    const s = sprites[o.type];
    if (o.warm > 0){
      // annonce d'apparition
      const p = 1 - o.warm / .7;
      ctx.strokeStyle = TYPES[o.type].c; ctx.globalAlpha = .35 + p*.4; ctx.lineWidth = 2;
      ctx.setLineDash([4, 6]); ctx.beginPath(); ctx.arc(o.x, o.y, o.r * (1.8 - p*.8), 0, 7); ctx.stroke(); ctx.setLineDash([]);
      ctx.globalAlpha = p * p;
      const sc = .3 + .7 * p;
      ctx.drawImage(s.c, o.x - s.half*sc, o.y - s.half*sc, s.half*2*sc, s.half*2*sc);
      ctx.globalAlpha = 1; continue;
    }
    let alpha = 1;
    const left = o.life - o.age;
    if (left < .8) alpha = Math.max(0, left / .8);
    ctx.globalAlpha = alpha;
    ctx.drawImage(s.c, o.x - s.half, o.y - s.half, s.half*2, s.half*2);
    if (o.type === "red"){
      ctx.strokeStyle = "rgba(255,51,85,.7)"; ctx.lineWidth = 2; ctx.setLineDash([3, 5]); ctx.lineDashOffset = -t * 20;
      ctx.beginPath(); ctx.arc(o.x, o.y, o.r + 6 + Math.sin(t*6)*2, 0, 7); ctx.stroke(); ctx.setLineDash([]);
    }
    if ((o.type === "gold" || o.type === "ice") && isFinite(o.life)){
      ctx.strokeStyle = TYPES[o.type].c; ctx.lineWidth = 3; ctx.lineCap = "round";
      ctx.beginPath(); ctx.arc(o.x, o.y, o.r + 7, -Math.PI/2, -Math.PI/2 + Math.PI*2*Math.max(0, left/o.life)); ctx.stroke();
    }
    if (MUST_STAY(o.type)){
      const d = Math.min(o.x, W - o.x, o.y, H - o.y);
      if (d < o.r * 1.6){
        ctx.strokeStyle = `rgba(255,51,85,${.9*pulse})`; ctx.lineWidth = 2.5;
        ctx.beginPath(); ctx.arc(o.x, o.y, o.r + 5, 0, 7); ctx.stroke();
      }
    }
    ctx.globalAlpha = 1;
  }
 
  // particules
  for (const p of game.parts){
    ctx.globalAlpha = Math.max(0, p.life / p.max);
    ctx.fillStyle = p.c; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 7); ctx.fill();
  }
  ctx.globalAlpha = 1;
  ctx.textAlign = "center";
  for (const tx of game.texts){
    ctx.globalAlpha = Math.min(1, tx.life * 2);
    ctx.fillStyle = tx.c; ctx.font = `800 ${Math.max(18, M*.055)}px "Bricolage Grotesque", system-ui, sans-serif`;
    ctx.fillText(tx.txt, tx.x, tx.y);
  }
  ctx.globalAlpha = 1;
 
  // teinte ralenti
  if (game.slowT > 0){ ctx.fillStyle = `rgba(134,219,255,${.07 + .03*Math.sin(t*4)})`; ctx.fillRect(0,0,W,H); }
  // orbe fautive mise en évidence
  if (game.over && game.dangerOrb){
    const o = game.dangerOrb, x = Math.max(o.r, Math.min(W - o.r, o.x)), y = Math.max(o.r, Math.min(H - o.r, o.y));
    ctx.strokeStyle = "rgba(255,51,85,.9)"; ctx.lineWidth = 3;
    ctx.beginPath(); ctx.arc(x, y, o.r + 10 + game.overT * 40, 0, 7); ctx.stroke();
  }
  if (game.flash > 0){ ctx.fillStyle = `rgba(255,51,85,${game.flash*.35})`; ctx.fillRect(0,0,W,H); }
}
function roundRect(x, y, w, h, r){
  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();
}
 
/* ---------- interface ---------- */
let toastTimer = 0;
function showToast(big, small){
  const el = $("toast"); el.innerHTML = ""; el.append(big);
  if (small){ const s = document.createElement("small"); s.textContent = small; el.append(s); }
  el.classList.add("show"); clearTimeout(toastTimer);
  toastTimer = setTimeout(() => el.classList.remove("show"), 1500);
}
function updateHUD(bump){
  $("score").textContent = game.score;
  $("level").textContent = "Niv. " + game.level;
  const mult = Math.min(4, 1 + Math.floor((game.combo - 1) / 4));
  const c = $("combo"); c.textContent = game.combo >= 3 ? `Combo ${game.combo}${mult > 1 ? " · ×" + mult : ""}` : "";
  if (bump){ c.classList.add("bump"); setTimeout(() => c.classList.remove("bump"), 150); }
}
setInterval(() => { $("slow").textContent = game.slowT > 0 ? "Ralenti " + game.slowT.toFixed(1) + "s" : ""; }, 100);
 
function syncSettingsUI(){
  $("sens").value = settings.sens; $("sensVal").textContent = settings.sens + " %";
  $("sound").checked = settings.sound; $("vib").checked = settings.vib;
  $("bestStart").textContent = best;
  updateMotionUI();
}
$("sens").addEventListener("input", e => { settings.sens = +e.target.value; $("sensVal").textContent = settings.sens + " %"; store.set("sens", settings.sens); });
$("sound").addEventListener("change", e => { settings.sound = e.target.checked; store.set("sound", settings.sound); });
$("vib").addEventListener("change", e => { settings.vib = e.target.checked; store.set("vib", settings.vib); if (settings.vib) buzz(20); });
$("ctrlTilt").addEventListener("click", () => { settings.control = "tilt"; store.set("control", "tilt"); startMotion(); updateMotionUI(); });
$("ctrlPad").addEventListener("click", () => { settings.control = "pad"; store.set("control", "pad"); updateMotionUI(); });
 
$("playBtn").addEventListener("click", startGame);
$("againBtn").addEventListener("click", startGame);
$("pauseBtn").addEventListener("click", () => togglePause(true));
$("resumeBtn").addEventListener("click", () => {
  if (!game.running){ $("pauseScreen").hidden = true; $("startScreen").hidden = false; return; }
  togglePause(false);
});
$("calBtn").addEventListener("click", calibrate);
const goHome = () => { game.running = false; game.over = false; game.orbs = []; ["pauseScreen","overScreen"].forEach(id => $(id).hidden = true); $("hud").hidden = true; syncSettingsUI(); $("startScreen").hidden = false; updateMotionUI(); };
$("quitBtn").addEventListener("click", goHome);
$("homeBtn").addEventListener("click", goHome);
$("settingsBtn").addEventListener("click", () => {
  startMotion();
  $("startScreen").hidden = true; $("pauseScreen").hidden = false;
  $("pauseEyebrow").textContent = "Réglages"; $("pauseTitle").textContent = "À ta main";
  $("resumeBtn").textContent = "Retour"; $("quitBtn").hidden = true;
});
const origResume = $("resumeBtn");
new MutationObserver(() => { if ($("pauseScreen").hidden){ origResume.textContent = "Reprendre"; $("quitBtn").hidden = false; } }).observe($("pauseScreen"), { attributes:true, attributeFilter:["hidden"] });
 
document.addEventListener("visibilitychange", () => { if (document.hidden && game.running && !game.over && !game.paused) togglePause(true); });
let wake = null;
async function requestWake(){ try{ if (navigator.wakeLock && !wake){ wake = await navigator.wakeLock.request("screen"); wake.addEventListener("release", () => wake = null); } }catch(e){} }
 
addEventListener("resize", resize);
resize();
// quelques orbes en démo derrière l'accueil
for (const t of ["green","orange","white","gold","red"]) { spawn(t); }
game.orbs.forEach(o => { o.warm = 0; o.life = Infinity; });
syncSettingsUI();
requestAnimationFrame(frame);
})();
</script>
 
Claude a terminé sa réponse.