VP Gacha Claw

by Kofod

HTML

<div id="vpGacha">

  <section id="startScreen" class="screen">
    <div class="start-card">
      <h1>Gacha!</h1>
      <p>Move the claw left and right, then press <b>DROP CLAW</b>.</p>
      <p>Gather all the prizes and dress Jax up!</p>
      <div class="start-images">
        <img src="https://i.postimg.cc/Dycw2Pfn/Layer66.png" alt="Gacha prize preview 1">
        <img src="https://i.postimg.cc/J0LR8G9R/Layer67.png" alt="Gacha prize preview 2">
      </div>
      <p>Unisex code</p>
      <p><b>W0w1tsJ4x</b></p>
      <button id="startBtn" class="primary-btn">START GAME</button>
    </div>
  </section>

  <section id="gameScreen" class="screen">
    <div class="machine">
      <div class="machine-title">GACHA</div>

      <div class="rail"></div>

      <div id="clawRig">
        <div class="claw-cable"></div>
        <div class="claw-head"></div>
        <div class="claw-arm left"></div>
        <div class="claw-arm right"></div>
        <div class="claw-tip left"></div>
        <div class="claw-tip right"></div>
      </div>

      <div class="glass">
        <div id="ballField"></div>
      </div>

      <aside class="control-panel">
        <h2>CLAW CONTROL</h2>
        <div class="move-row">
          <button id="leftBtn" class="round-btn" aria-label="Move left">◀</button>
          <button id="rightBtn" class="round-btn" aria-label="Move right">▶</button>
        </div>
        <button id="dropBtn">DROP<br>CLAW</button>
        <div class="hint">
          Move with <b>← →</b> or <b>A / D</b>.<br>
          Drag the claw on touchscreens.<br>
          Drop with <b>↓</b>, <b>S</b> or <b>spacebar</b>.
        </div>
        <div id="status">Line up the claw with a ball.</div>
      </aside>

      <div class="prize-bay">
        <button id="openBall" aria-label="Open prize ball">
          <span class="lid"></span>
          <img class="reveal-icon" alt="Click to reveal">
        </button>
     ...

CSS

* { box-sizing: border-box; }
  html, body {
    margin: 0;
    min-height: 100%;
    background: #f7f7f7;
    font-family: Arial, Helvetica, sans-serif;
  }

  #vpGacha {
    position: relative;
    width: 960px;
    height: 700px;
    overflow: hidden;
    margin: 0 auto;
    color: #493a42;
    background:
      radial-gradient(circle at 15% 15%, rgba(255,255,255,.8), transparent 26%),
      linear-gradient(135deg, #ffd2e4 0%, #ffe1d2 25%, #ffefc1 50%, #ecf2cf 75%, #d8f1e4 100%);
    user-select: none;
  }

  button {
    font: inherit;
    cursor: pointer;
  }

  .screen {
    position: absolute;
    inset: 0;
  }


  #startScreen {
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 50px;
    background:
      radial-gradient(circle at 20% 15%, rgba(255,255,255,.95), transparent 23%),
      radial-gradient(circle at 82% 18%, rgba(255,255,255,.7), transparent 19%),
      linear-gradient(145deg, #ffd2e4, #ffe1d2 28%, #ffefc1 55%, #ecf2cf 78%, #d8f1e4);
  }

  .start-card {
    width: 650px;
    padding: 42px 48px;
    text-align: center;
    background: rgba(255,255,255,.78);
    border: 5px solid rgba(255,255,255,.92);
    border-radius: 28px;
    box-shadow: 0 20px 45px rgba(92,61,79,.22);
    backdrop-filter: blur(5px);
  }

  .start-card h1 {
    margin: 0 0 14px;
    font-size: 52px;
    letter-spacing: 2px;
    color: #6d4e5d;
  }

  .start-card p {
    margin: 8px 0;
    font-size: 20px;
    line-height: 1.45;
  }

  .start-card b,
  #resultText b {
    font-weight: 800;
  }

  #resultText {
    white-space: normal;
  }

  .start-images {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 18px auto 12px;
  }

  .start-images img {
    max-width: 240px;
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(92,61,79,.16));
  }

  .primary-btn {
    margin-top:...

JavaScript

(function () {
  "use strict";

  /*
    =========================================================
    ADD MORE BALLS FOR YOUR GACHA
    Weight is chance of grabbing the ball (higher = more common).
    =========================================================
  */
  var BALL_TYPES = [
    {
      id: "pink",
      weight: 20,
      title: "Congratulations!",
      text: "Seems like Jax is ready for his shift at Spudsy's!<br><br><b>W0rkT1m3OrN4pT1m3</b>",
      images: ["https://i.postimg.cc/tT0jdsRN/Layer15.png"]
    },
    {
      id: "peach",
      weight: 20,
      title: "Congratulations!",
      text: "Do you think you can get Jax to clean the counters?<br><br><b>ImN0tAM4id</b>",
      images: ["https://i.postimg.cc/50cV5X9m/Layer16.png"]
    },
    {
      id: "yellow",
      weight: 20,
      title: "Congratulations!",
      text: "Ugh, not school?!<br><br><b>W4t4sh1W4G4kus3i</b>",
      images: ["https://i.postimg.cc/FRt4bYFg/Layer17.png"]
    },
    {
      id: "mint",
      weight: 15,
      title: "Congratulations!",
      text: "Oh wow, uhm another Jax?<br><br><b>Jus7M1schi3v0us</b>",
      images: [
        "https://i.postimg.cc/x829QcWn/Layer68.png",
        "https://i.postimg.cc/4N1xJQ4f/Layer63.png"
      ]
    },
    {
      id: "lavender",
      weight: 15,
      title: "Congratulations!",
      text: "Who turned off the lights?!<br><br><b>1tsJ4xN01r</b>",
      images: [
        "https://i.postimg.cc/Kj2mbRdZ/Layer69.png",
        "https://i.postimg.cc/Dycw2Pf2/Layer62.png"
      ]
    },
    {
      id: "ultraRare",
      weight: 10,
      title: "Congratulations!",
      text: "I think it is looking at me...?<br><br><b>4bstr4ct1edF0rSur3</b>",
      images: ["https://i.postimg.cc/sDfJmyXR/Layer25.png"]
    }
  ];

  var FIELD_W = 614;
  var FIELD_H = 460;
  var BALL_SIZE = 62;
  var BALL_COUNT = 38;
  var GRAVITY = 0.42;
  var FRICTION = 0.985;
  var BOUNCE = 0.48;

  var...