Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Scratch & Win</title>
  <style>
    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      text-align: center;
      background: linear-gradient(to right, #a1c4fd, #c2e9fb);
      margin: 0;
      padding: 15px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    h1 {
      font-size: 1.8rem;
      margin-bottom: 10px;
      margin-top: 10px;
    }
    .balance {
      margin-bottom: 15px;
      font-size: 1.1rem;
      background: rgba(255,255,255,0.9);
      padding: 10px 15px;
      border-radius: 8px;
      display: inline-block;
      min-width: 180px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .card-container {
      position: relative;
      width: 100%;
      max-width: 300px;
      height: 200px;
      background: #ddd;
      margin: 15px auto;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
      overflow: hidden;
      touch-action: none;
    }
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      border-radius: 12px;
      width: 100%;
      height: 100%;
    }
    .prize {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.8rem;
      font-weight: bold;
      z-index: 1;
      width: 100%;
      text-align: center;
    }
    button {
      margin: 15px auto;
      padding: 12px 25px;
      font-size: 1rem;
      background-color: #4e54c8;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      width: 80%;
      max-width: 250px;
    }
    button:hover {
      background-color: #3a41c0;
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .confetti {
      position: fixed;
      width: 10px;
      height: 10px;
      background-color: gold;
      top: 0;
      left: 0;
      pointer-events: none;
      animation: fall 3s ease-in-out forwards;
    }
    @keyframes fall {
      0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }
    .result-frame {
      background: rgba(255,255,255,0.9);
      border-radius: 8px;
      padding: 15px;
      margin: 15px auto;
      max-width: 300px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      min-height: 80px;
      width: 100%;
    }
    .result-value {
      font-size: 1.4rem;
      font-weight: bold;
      margin: 10px 0;
    }
    .win {
      color: #2ecc71;
    }
    .loss {
      color: #e74c3c;
    }
    .scratch-progress {
      margin-top: 10px;
      height: 6px;
      background: #eee;
      border-radius: 5px;
      overflow: hidden;
    }
    .progress-bar {
      height: 100%;
      background: #4e54c8;
      width: 0%;
      transition: width 0.3s;
    }
    .probability-info {
      font-size: 0.85rem;
      color: #666;
      margin-top: 5px;
    }
    footer {
      margin-top: auto;
      padding: 15px;
      font-size: 0.8rem;
      color: #555;
    }
    .game-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    @media (max-width: 350px) {
      .card-container {
        height: 180px;
      }
      h1 {
        font-size: 1.5rem;
      }
    }
  </style>
</head>
<body>
  <div class="game-container">
    <h1>🎉 Scratch & Win</h1>
    <div class="balance">Balance: <span id="balance">100</span> coins</div>

    <div class="result-frame">
      <div id="resultText">Scratch the card to reveal your prize!</div>
      <div class="result-value" id="resultValue"></div>
      <div class="probability-info">thanks</div>
      <div class="scratch-progress">
        <div class="progress-bar" id="progressBar"></div>
      </div>
    </div>

    <div class="card-container">
      <div class="prize" id="prize">?</div>
      <canvas id="scratchCanvas"></canvas>
    </div>

    <button id="newCardBtn">Get New Card (5 coins)</button>
  </div>

  <footer>
    © 2025 BetDiamondsGroup. All rights reserved.
  </footer>

  <audio id="winSound" src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_e3045c4b43.mp3?filename=game-win-sound-1-178990.mp3"></audio>

  <script>
    const canvas = document.getElementById('scratchCanvas');
    const ctx = canvas.getContext('2d');
    const prize = document.getElementById('prize');
    const balanceDisplay = document.getElementById('balance');
    const newCardBtn = document.getElementById('newCardBtn');
    const resultText = document.getElementById('resultText');
    const resultValue = document.getElementById('resultValue');
    const progressBar = document.getElementById('progressBar');

    let balance = 100;
    const cardCost = 5;
    let isDrawing = false;
    let currentPrize = 0;
    let prizeRevealed = false;

    // 30% win chance (70% lose chance)
    const prizes = [
      { text: '😢 Try Again', value: 0, probability: 70, class: 'loss' },
      { text: '💰 You Won!', value: 10, probability: 30, class: 'win' }
    ];

    function getRandomPrize() {
      const total = prizes.reduce((sum, prize) => sum + prize.probability, 0);
      let random = Math.random() * total;
      
      for (const prize of prizes) {
        if (random < prize.probability) {
          return prize;
        }
        random -= prize.probability;
      }
      return prizes[0];
    }

    function updateBalance(amount) {
      balance += amount;
      balanceDisplay.textContent = balance;
      newCardBtn.disabled = balance < cardCost;
    }

    function resizeCanvas() {
      const container = canvas.parentElement;
      canvas.width = container.offsetWidth;
      canvas.height = container.offsetHeight;
      ctx.fillStyle = '#888';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.globalCompositeOperation = 'destination-out';
    }

    function generateCard() {
      if (balance < cardCost) return;

      updateBalance(-cardCost);
      prizeRevealed = false;
      
      const selectedPrize = getRandomPrize();
      prize.textContent = "?";
      currentPrize = selectedPrize.value;
      
      // Reset UI
      resultText.textContent = "Scratch the card to reveal your prize!";
      resultValue.textContent = "";
      resultValue.className = "result-value";
      progressBar.style.width = "0%";

      canvas.style.pointerEvents = 'auto';
      ctx.globalCompositeOperation = 'source-over';
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      resizeCanvas();
    }

    function draw(e) {
      if (!isDrawing) return;
      e.preventDefault();
      
      let x, y;
      if (e.touches) {
        const rect = canvas.getBoundingClientRect();
        x = e.touches[0].clientX - rect.left;
        y = e.touches[0].clientY - rect.top;
      } else {
        x = e.offsetX;
        y = e.offsetY;
      }
      
      ctx.beginPath();
      ctx.arc(x, y, 25, 0, Math.PI * 2);
      ctx.fill();
      
      checkReveal();
    }

    function startDraw(e) {
      isDrawing = true;
      draw(e);
    }

    function endDraw() {
      isDrawing = false;
    }

    function checkReveal() {
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
      let transparent = 0;
      for (let i = 3; i < imageData.length; i += 4) {
        if (imageData[i] < 128) transparent++;
      }
      const total = canvas.width * canvas.height;
      const percent = (transparent / total) * 100;
      
      // Update progress bar
      progressBar.style.width = `${Math.min(100, percent)}%`;
      
      // Check if 60% is scratched
      if (percent > 60 && !prizeRevealed) {
        prizeRevealed = true;
        canvas.style.pointerEvents = 'none';
        
        const selectedPrize = prizes.find(p => p.value === currentPrize);
        prize.textContent = selectedPrize.text;
        
        if (currentPrize > 0) {
          launchConfetti();
          updateBalance(currentPrize);
          document.getElementById('winSound').play();
          resultText.textContent = "Congratulations! You won:";
          resultValue.textContent = `${currentPrize} coins`;
          resultValue.className = `result-value ${selectedPrize.class}`;
        } else {
          resultText.textContent = "Sorry, you didn't win this time";
          resultValue.textContent = "Try again!";
          resultValue.className = `result-value ${selectedPrize.class}`;
        }
      }
    }

    function launchConfetti() {
      for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        confetti.className = 'confetti';
        confetti.style.left = Math.random() * 100 + 'vw';
        confetti.style.backgroundColor = ['gold', '#ff6b6b', '#4ecdc4', '#ffbe76'][i % 4];
        confetti.style.width = Math.random() * 10 + 5 + 'px';
        confetti.style.height = confetti.style.width;
        document.body.appendChild(confetti);
        setTimeout(() => confetti.remove(), 3000);
      }
    }

    function init() {
      resizeCanvas();
      
      // Mouse events
      canvas.addEventListener('mousedown', startDraw);
      canvas.addEventListener('mousemove', draw);
      canvas.addEventListener('mouseup', endDraw);
      
      // Touch events
      canvas.addEventListener('touchstart', startDraw);
      canvas.addEventListener('touchmove', draw);
      canvas.addEventListener('touchend', endDraw);
      
      newCardBtn.addEventListener('click', generateCard);
      updateBalance(0);
      
      // Prevent touch scroll when scratching
      document.addEventListener('touchmove', function(e) {
        if (isDrawing) {
          e.preventDefault();
        }
      }, { passive: false });
    }

    window.addEventListener('load', init);
    window.addEventListener('resize', resizeCanvas);
  </script>
</body>
</html>
