🎰 ペカって常時光るジャグラー風スロット 🎰

🍒

🎯 作ったスロットのポイント
💡 コード全文（コピペOK）
🎮 遊び方＆カスタマイズ
🎉 まとめ

🎯 作ったスロットのポイント

青白くネオン風に光るペカリランプをCSSグラデーション＋ぼかしでリアルに表現
3つのリールが回転し、ランダムに絵柄が変わる動きをJavaScriptで制御
20％の確率でペカってから「7揃い」が出る、本物感ある当たり演出！
連打防止もバッチリ対応でストレスなし

💡 コード全文（コピペOK）

htmlコピーする編集する<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ペカって常時光るスロット</title>
<style>
  body {
    text-align: center;
    font-family: sans-serif;
    background: #222;
    color: white;
  }
  .slot {
    display: flex;
    justify-content: center;
    margin: 20px;
  }
  .reel {
    width: 100px;
    height: 100px;
    margin: 10px;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 10px;
    border: 3px solid #fff;
    user-select: none;
  }
  .lamp {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 0 10px #000;
    transition: all 0.3s ease;
  }
  /* 青白いネオン調の光 */
  .lamp.on {
    background: radial-gradient(
      circle,
      #e0ffff 0%,
      #a0f0ff 40%,
      #40d0ff 70%,
      #00bfff 100%
    );
    box-shadow:
      0 0 20px #a0f0ff,
      0 0 40px #40d0ff,
      0 0 80px #00bfff,
      0 0 120px #00bfff,
      0 0 160px #00bfff;
    filter: brightness(2.5) saturate(1.8);
  }
  button {
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 6px;
    border: none;
    background: #444;
    color: white;
    user-select: none;
  }
  button:hover {
    background: #666;
  }
  #result {
    min-height: 1.5em;
    margin-top: 15px;
    font-size: 1.5em;
    user-select: none;
  }
</style>
</head>
<body>
  <h1>🎰 ペカって常時光るジャグラー風スロット 🎰</h1>
  <div class="lamp" id="lamp"></div>
  <div class="slot">
    <div class="reel" id="r1">🍒</div>
    <div class="reel" id="r2">🍒</div>
    <div class="reel" id="r3">🍒</div>
  </div>
  <button id="btnSpin">スタート</button>
  <div id="result"></div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const symbols = ["🍒", "🍋", "🍊", "🍇", "⭐", "7️⃣"];
      const lamp = document.getElementById("lamp");
      const btnSpin = document.getElementById("btnSpin");
      const reels = [
        document.getElementById("r1"),
        document.getElementById("r2"),
        document.getElementById("r3"),
      ];
      const resultText = document.getElementById("result");

      let spinning = false;

      btnSpin.addEventListener("click", spin);

      function spin() {
        if (spinning) return;
        spinning = true;

        resultText.textContent = "";
        lamp.classList.remove("on");

        let isHit = Math.random() < 0.2;
        let isPeka = false;
        let results = [];

        reels.forEach((reel, i) => {
          let count = 0;
          let timer = setInterval(() => {
            reel.textContent = symbols[(Math.random() * symbols.length) | 0];
            count++;

            if (isHit && !isPeka && count === 10) {
              lamp.classList.add("on");
              isPeka = true;
            }

            if (count > 20 + i * 5) {
              clearInterval(timer);
              if (isHit) {
                reel.textContent = "7️⃣";
              }
              results[i] = reel.textContent;

              if (i === 2) {
                if (isHit) {
                  resultText.textContent = "🎉 ペカって7揃い！ 🎉";
                } else if (
                  results[0] === results[1] &&
                  results[1] === results[2]
                ) {
                  resultText.textContent = "🎉 大当たり！ 🎉";
                  lamp.classList.add("on");
                } else {
                  resultText.textContent = "ハズレ…";
                }
                spinning = false;
              }
            }
          }, 50);
        });
      }
    });
  </script>
</body>
</html>

🎮 遊び方＆カスタマイズ

ボタンを押すとリールが回り始めます。
20％の確率でランプがペカっと光り「7」が揃います。
絵柄やペカリの色はCSSやJavaScriptの配列を書き換えて自由に変更OK！

🎉 まとめ

JavaScriptだけで簡単にジャグラー風スロットを作れます。
リアルなペカリ演出もCSSのグラデーションと影で表現しました。

自分好みに改造して楽しんでみてくださいね！