API tools faq
paste
XTaylorSpenceX

Quantum Dice Dilemma

XTaylorSpenceX
Sep 16th, 2025
24
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Quantum Dice Dilemma</title>
  7.     <style>
  8.         @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
  9.        
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.        
  16.         body {
  17.             font-family: 'Orbitron', monospace;
  18.             background: linear-gradient(135deg, #0a0a2e 0%, #16213e 50%, #0f3460 100%);
  19.             min-height: 100vh;
  20.             color: #fff;
  21.             overflow-x: hidden;
  22.         }
  23.        
  24.         .quantum-background {
  25.             position: fixed;
  26.             top: 0;
  27.             left: 0;
  28.             width: 100%;
  29.             height: 100%;
  30.             background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
  31.                         radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
  32.                         radial-gradient(circle at 40% 80%, rgba(119, 198, 255, 0.3) 0%, transparent 50%);
  33.             animation: quantumShift 8s ease-in-out infinite;
  34.             z-index: -1;
  35.         }
  36.        
  37.         @keyframes quantumShift {
  38.             0%, 100% { transform: translateX(0) translateY(0); }
  39.             25% { transform: translateX(-20px) translateY(-10px); }
  40.             50% { transform: translateX(20px) translateY(10px); }
  41.             75% { transform: translateX(-10px) translateY(20px); }
  42.         }
  43.        
  44.         .container {
  45.             max-width: 1200px;
  46.             margin: 0 auto;
  47.             padding: 20px;
  48.         }
  49.        
  50.         .header {
  51.             text-align: center;
  52.             margin-bottom: 30px;
  53.         }
  54.        
  55.         .title {
  56.             font-size: 3rem;
  57.             font-weight: 900;
  58.             background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  59.             background-size: 400% 400%;
  60.             -webkit-background-clip: text;
  61.             -webkit-text-fill-color: transparent;
  62.             animation: gradientShift 3s ease-in-out infinite;
  63.             margin-bottom: 10px;
  64.         }
  65.        
  66.         @keyframes gradientShift {
  67.             0%, 100% { background-position: 0% 50%; }
  68.             50% { background-position: 100% 50%; }
  69.         }
  70.        
  71.         .subtitle {
  72.             font-size: 1.2rem;
  73.             opacity: 0.8;
  74.             margin-bottom: 20px;
  75.         }
  76.        
  77.         .game-stats {
  78.             display: flex;
  79.             justify-content: center;
  80.             gap: 40px;
  81.             margin-bottom: 30px;
  82.             flex-wrap: wrap;
  83.         }
  84.        
  85.         .stat {
  86.             text-align: center;
  87.             padding: 15px 25px;
  88.             background: rgba(255, 255, 255, 0.1);
  89.             border-radius: 15px;
  90.             backdrop-filter: blur(10px);
  91.             border: 1px solid rgba(255, 255, 255, 0.2);
  92.         }
  93.        
  94.         .stat-label {
  95.             font-size: 0.9rem;
  96.             opacity: 0.7;
  97.             margin-bottom: 5px;
  98.         }
  99.        
  100.         .stat-value {
  101.             font-size: 1.8rem;
  102.             font-weight: 700;
  103.             color: #4ecdc4;
  104.         }
  105.        
  106.         .quantum-dice-container {
  107.             display: flex;
  108.             justify-content: center;
  109.             gap: 30px;
  110.             margin: 40px 0;
  111.             flex-wrap: wrap;
  112.         }
  113.        
  114.         .quantum-die {
  115.             position: relative;
  116.             width: 120px;
  117.             height: 120px;
  118.         }
  119.        
  120.         .die {
  121.             width: 100%;
  122.             height: 100%;
  123.             background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  124.             border-radius: 20px;
  125.             display: flex;
  126.             align-items: center;
  127.             justify-content: center;
  128.             font-size: 3rem;
  129.             font-weight: 900;
  130.             color: white;
  131.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  132.             transition: all 0.3s ease;
  133.             cursor: pointer;
  134.         }
  135.        
  136.         .die:hover {
  137.             transform: translateY(-5px);
  138.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  139.         }
  140.        
  141.         .quantum-veil {
  142.             position: absolute;
  143.             top: 0;
  144.             left: 0;
  145.             width: 100%;
  146.             height: 100%;
  147.             background: linear-gradient(45deg,
  148.                 rgba(255, 255, 255, 0.3) 0%,
  149.                 rgba(120, 119, 198, 0.4) 25%,
  150.                 rgba(255, 119, 198, 0.4) 50%,
  151.                 rgba(119, 198, 255, 0.4) 75%,
  152.                 rgba(255, 255, 255, 0.3) 100%);
  153.             border-radius: 20px;
  154.             backdrop-filter: blur(8px);
  155.             animation: quantumVeilPulse 2s ease-in-out infinite;
  156.             transition: opacity 0.8s ease;
  157.         }
  158.        
  159.         @keyframes quantumVeilPulse {
  160.             0%, 100% { opacity: 0.8; }
  161.             50% { opacity: 0.4; }
  162.         }
  163.        
  164.         .quantum-veil.revealed {
  165.             opacity: 0;
  166.             pointer-events: none;
  167.         }
  168.        
  169.         .probability-display {
  170.             position: absolute;
  171.             bottom: -30px;
  172.             left: 50%;
  173.             transform: translateX(-50%);
  174.             font-size: 0.8rem;
  175.             opacity: 0.7;
  176.             text-align: center;
  177.         }
  178.        
  179.         .betting-section {
  180.             background: rgba(255, 255, 255, 0.1);
  181.             border-radius: 20px;
  182.             padding: 30px;
  183.             margin: 30px 0;
  184.             backdrop-filter: blur(10px);
  185.             border: 1px solid rgba(255, 255, 255, 0.2);
  186.         }
  187.        
  188.         .betting-title {
  189.             font-size: 1.5rem;
  190.             text-align: center;
  191.             margin-bottom: 25px;
  192.             color: #4ecdc4;
  193.         }
  194.        
  195.         .bet-options {
  196.             display: grid;
  197.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  198.             gap: 20px;
  199.             margin-bottom: 25px;
  200.         }
  201.        
  202.         .bet-option {
  203.             background: rgba(255, 255, 255, 0.05);
  204.             border: 2px solid rgba(255, 255, 255, 0.2);
  205.             border-radius: 15px;
  206.             padding: 20px;
  207.             text-align: center;
  208.             cursor: pointer;
  209.             transition: all 0.3s ease;
  210.         }
  211.        
  212.         .bet-option:hover {
  213.             background: rgba(255, 255, 255, 0.1);
  214.             border-color: #4ecdc4;
  215.             transform: translateY(-3px);
  216.         }
  217.        
  218.         .bet-option.selected {
  219.             background: rgba(78, 205, 196, 0.2);
  220.             border-color: #4ecdc4;
  221.             box-shadow: 0 0 20px rgba(78, 205, 196, 0.4);
  222.         }
  223.        
  224.         .bet-label {
  225.             font-size: 1.1rem;
  226.             font-weight: 700;
  227.             margin-bottom: 10px;
  228.         }
  229.        
  230.         .bet-description {
  231.             font-size: 0.9rem;
  232.             opacity: 0.8;
  233.             margin-bottom: 15px;
  234.         }
  235.        
  236.         .bet-payout {
  237.             font-size: 1.2rem;
  238.             color: #ff6b6b;
  239.             font-weight: 700;
  240.         }
  241.        
  242.         .bet-amount-section {
  243.             display: flex;
  244.             justify-content: center;
  245.             align-items: center;
  246.             gap: 20px;
  247.             margin: 25px 0;
  248.             flex-wrap: wrap;
  249.         }
  250.        
  251.         .bet-amount-input {
  252.             background: rgba(255, 255, 255, 0.1);
  253.             border: 2px solid rgba(255, 255, 255, 0.3);
  254.             border-radius: 10px;
  255.             padding: 10px 15px;
  256.             color: white;
  257.             font-family: 'Orbitron', monospace;
  258.             font-size: 1.1rem;
  259.             text-align: center;
  260.             width: 120px;
  261.         }
  262.        
  263.         .bet-amount-input:focus {
  264.             outline: none;
  265.             border-color: #4ecdc4;
  266.             box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
  267.         }
  268.        
  269.         .controls {
  270.             display: flex;
  271.             justify-content: center;
  272.             gap: 20px;
  273.             margin: 30px 0;
  274.             flex-wrap: wrap;
  275.         }
  276.        
  277.         .btn {
  278.             background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  279.             border: none;
  280.             border-radius: 12px;
  281.             padding: 15px 30px;
  282.             color: white;
  283.             font-family: 'Orbitron', monospace;
  284.             font-size: 1.1rem;
  285.             font-weight: 700;
  286.             cursor: pointer;
  287.             transition: all 0.3s ease;
  288.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  289.         }
  290.        
  291.         .btn:hover:not(:disabled) {
  292.             transform: translateY(-3px);
  293.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  294.         }
  295.        
  296.         .btn:disabled {
  297.             opacity: 0.5;
  298.             cursor: not-allowed;
  299.         }
  300.        
  301.         .btn-primary {
  302.             background: linear-gradient(45deg, #4ecdc4 0%, #44a08d 100%);
  303.         }
  304.        
  305.         .btn-danger {
  306.             background: linear-gradient(45deg, #ff6b6b 0%, #ee5a52 100%);
  307.         }
  308.        
  309.         .results-section {
  310.             background: rgba(255, 255, 255, 0.1);
  311.             border-radius: 20px;
  312.             padding: 25px;
  313.             margin: 25px 0;
  314.             backdrop-filter: blur(10px);
  315.             border: 1px solid rgba(255, 255, 255, 0.2);
  316.             min-height: 100px;
  317.             display: flex;
  318.             align-items: center;
  319.             justify-content: center;
  320.         }
  321.        
  322.         .result-text {
  323.             font-size: 1.3rem;
  324.             text-align: center;
  325.             line-height: 1.6;
  326.         }
  327.        
  328.         .quantum-paths {
  329.             background: rgba(255, 255, 255, 0.05);
  330.             border-radius: 15px;
  331.             padding: 20px;
  332.             margin: 20px 0;
  333.             border: 1px solid rgba(255, 255, 255, 0.1);
  334.         }
  335.        
  336.         .paths-title {
  337.             font-size: 1.2rem;
  338.             margin-bottom: 15px;
  339.             color: #4ecdc4;
  340.             text-align: center;
  341.         }
  342.        
  343.         .path-item {
  344.             display: flex;
  345.             justify-content: space-between;
  346.             align-items: center;
  347.             padding: 10px 15px;
  348.             margin: 5px 0;
  349.             background: rgba(255, 255, 255, 0.05);
  350.             border-radius: 8px;
  351.             border-left: 4px solid #4ecdc4;
  352.         }
  353.        
  354.         .rolling {
  355.             animation: diceRoll 1s ease-in-out infinite;
  356.         }
  357.        
  358.         @keyframes diceRoll {
  359.             0%, 100% { transform: rotate(0deg); }
  360.             25% { transform: rotate(90deg); }
  361.             50% { transform: rotate(180deg); }
  362.             75% { transform: rotate(270deg); }
  363.         }
  364.        
  365.         @media (max-width: 768px) {
  366.             .title {
  367.                 font-size: 2rem;
  368.             }
  369.            
  370.             .game-stats {
  371.                 gap: 20px;
  372.             }
  373.            
  374.             .quantum-dice-container {
  375.                 gap: 20px;
  376.             }
  377.            
  378.             .quantum-die {
  379.                 width: 100px;
  380.                 height: 100px;
  381.             }
  382.            
  383.             .die {
  384.                 font-size: 2.5rem;
  385.             }
  386.         }
  387.     </style>
  388. </head>
  389. <body>
  390.     <div class="quantum-background"></div>
  391.    
  392.     <div class="container">
  393.         <div class="header">
  394.             <h1 class="title">Quantum Dice Dilemma</h1>
  395.             <p class="subtitle">Roll dice in quantum superposition. Observe to collapse reality.</p>
  396.         </div>
  397.        
  398.         <div class="game-stats">
  399.             <div class="stat">
  400.                 <div class="stat-label">Credits</div>
  401.                 <div class="stat-value" id="credits">1000</div>
  402.             </div>
  403.             <div class="stat">
  404.                 <div class="stat-label">Round</div>
  405.                 <div class="stat-value" id="round">1</div>
  406.             </div>
  407.             <div class="stat">
  408.                 <div class="stat-label">Total Winnings</div>
  409.                 <div class="stat-value" id="totalWinnings">0</div>
  410.             </div>
  411.         </div>
  412.        
  413.         <div class="quantum-dice-container">
  414.             <div class="quantum-die">
  415.                 <div class="die" id="die1">?</div>
  416.                 <div class="quantum-veil" id="veil1"></div>
  417.                 <div class="probability-display" id="prob1">Superposition</div>
  418.             </div>
  419.             <div class="quantum-die">
  420.                 <div class="die" id="die2">?</div>
  421.                 <div class="quantum-veil" id="veil2"></div>
  422.                 <div class="probability-display" id="prob2">Superposition</div>
  423.             </div>
  424.         </div>
  425.        
  426.         <div class="betting-section">
  427.             <h3 class="betting-title">Place Your Quantum Bets</h3>
  428.             <div class="bet-options">
  429.                 <div class="bet-option" data-bet="sum-even">
  430.                     <div class="bet-label">Sum is Even</div>
  431.                     <div class="bet-description">Both dice sum to an even number</div>
  432.                     <div class="bet-payout">2:1 payout</div>
  433.                 </div>
  434.                 <div class="bet-option" data-bet="sum-odd">
  435.                     <div class="bet-label">Sum is Odd</div>
  436.                     <div class="bet-description">Both dice sum to an odd number</div>
  437.                     <div class="bet-payout">2:1 payout</div>
  438.                 </div>
  439.                 <div class="bet-option" data-bet="doubles">
  440.                     <div class="bet-label">Doubles</div>
  441.                     <div class="bet-description">Both dice show the same number</div>
  442.                     <div class="bet-payout">6:1 payout</div>
  443.                 </div>
  444.                 <div class="bet-option" data-bet="high-sum">
  445.                     <div class="bet-label">High Sum (8-12)</div>
  446.                     <div class="bet-description">Sum is 8 or higher</div>
  447.                     <div class="bet-payout">3:1 payout</div>
  448.                 </div>
  449.                 <div class="bet-option" data-bet="low-sum">
  450.                     <div class="bet-label">Low Sum (2-6)</div>
  451.                     <div class="bet-description">Sum is 6 or lower</div>
  452.                     <div class="bet-payout">3:1 payout</div>
  453.                 </div>
  454.                 <div class="bet-option" data-bet="quantum-anomaly">
  455.                     <div class="bet-label">Quantum Anomaly</div>
  456.                     <div class="bet-description">Rare quantum events (sum = 2 or 12)</div>
  457.                     <div class="bet-payout">15:1 payout</div>
  458.                 </div>
  459.             </div>
  460.            
  461.             <div class="bet-amount-section">
  462.                 <label for="betAmount">Bet Amount:</label>
  463.                 <input type="number" id="betAmount" class="bet-amount-input" value="50" min="1" max="1000">
  464.                 <span>Credits</span>
  465.             </div>
  466.         </div>
  467.        
  468.         <div class="controls">
  469.             <button class="btn btn-primary" id="rollBtn">Roll Quantum Dice</button>
  470.             <button class="btn" id="observeBtn" disabled>Observe & Collapse</button>
  471.            <button class="btn btn-danger" id="resetBtn">Reset Game</button>
  472.        </div>
  473.        
  474.        <div class="results-section">
  475.            <div class="result-text" id="resultText">Place your bets and roll the quantum dice!</div>
  476.        </div>
  477.        
  478.        <div class="quantum-paths">
  479.            <h4 class="paths-title">Quantum Path History</h4>
  480.            <div id="pathHistory"></div>
  481.        </div>
  482.    </div>
  483.  
  484.    <script>
  485.        class QuantumDiceGame {
  486.            constructor() {
  487.                this.credits = 1000;
  488.                 this.round = 1;
  489.                 this.totalWinnings = 0;
  490.                 this.currentBets = new Map();
  491.                 this.quantumStates = [];
  492.                 this.pathHistory = [];
  493.                 this.isRolling = false;
  494.                 this.hasRolled = false;
  495.                
  496.                 this.initializeGame();
  497.                 this.bindEvents();
  498.             }
  499.            
  500.             initializeGame() {
  501.                 this.updateDisplay();
  502.                 this.clearBets();
  503.             }
  504.            
  505.             bindEvents() {
  506.                 // Bet selection
  507.                 document.querySelectorAll('.bet-option').forEach(option => {
  508.                     option.addEventListener('click', () => this.toggleBet(option));
  509.                 });
  510.                
  511.                 // Control buttons
  512.                 document.getElementById('rollBtn').addEventListener('click', () => this.rollDice());
  513.                 document.getElementById('observeBtn').addEventListener('click', () => this.observeQuantumState());
  514.                 document.getElementById('resetBtn').addEventListener('click', () => this.resetGame());
  515.                
  516.                 // Bet amount input
  517.                 document.getElementById('betAmount').addEventListener('input', (e) => {
  518.                     const value = parseInt(e.target.value);
  519.                     if (value > this.credits) {
  520.                         e.target.value = this.credits;
  521.                     }
  522.                 });
  523.             }
  524.            
  525.             toggleBet(option) {
  526.                 if (this.hasRolled) return;
  527.                
  528.                 const betType = option.dataset.bet;
  529.                 const betAmount = parseInt(document.getElementById('betAmount').value);
  530.                
  531.                 if (betAmount > this.credits) {
  532.                     this.showResult("Insufficient credits for this bet!", "error");
  533.                     return;
  534.                 }
  535.                
  536.                 if (option.classList.contains('selected')) {
  537.                     option.classList.remove('selected');
  538.                     this.currentBets.delete(betType);
  539.                 } else {
  540.                     // Check if player has enough credits for all selected bets
  541.                     const totalBetAmount = Array.from(this.currentBets.values()).reduce((sum, bet) => sum + bet.amount, 0) + betAmount;
  542.                    
  543.                     if (totalBetAmount > this.credits) {
  544.                         this.showResult("Not enough credits for all selected bets!", "error");
  545.                         return;
  546.                     }
  547.                    
  548.                     option.classList.add('selected');
  549.                     this.currentBets.set(betType, {
  550.                         amount: betAmount,
  551.                         payout: this.getBetPayout(betType)
  552.                     });
  553.                 }
  554.                
  555.                 this.updateBetDisplay();
  556.             }
  557.            
  558.             getBetPayout(betType) {
  559.                 const payouts = {
  560.                     'sum-even': 2,
  561.                     'sum-odd': 2,
  562.                     'doubles': 6,
  563.                     'high-sum': 3,
  564.                     'low-sum': 3,
  565.                     'quantum-anomaly': 15
  566.                 };
  567.                 return payouts[betType] || 1;
  568.             }
  569.            
  570.             updateBetDisplay() {
  571.                 const totalBet = Array.from(this.currentBets.values()).reduce((sum, bet) => sum + bet.amount, 0);
  572.                 const betAmountInput = document.getElementById('betAmount');
  573.                 betAmountInput.max = Math.max(1, this.credits - totalBet + parseInt(betAmountInput.value));
  574.             }
  575.            
  576.             rollDice() {
  577.                 if (this.currentBets.size === 0) {
  578.                     this.showResult("Please place at least one bet before rolling!", "error");
  579.                     return;
  580.                 }
  581.                
  582.                 const totalBetAmount = Array.from(this.currentBets.values()).reduce((sum, bet) => sum + bet.amount, 0);
  583.                 if (totalBetAmount > this.credits) {
  584.                     this.showResult("Not enough credits for your bets!", "error");
  585.                     return;
  586.                 }
  587.                
  588.                 this.isRolling = true;
  589.                 this.hasRolled = true;
  590.                 this.credits -= totalBetAmount;
  591.                
  592.                 // Generate quantum superposition states
  593.                 this.generateQuantumStates();
  594.                
  595.                 // Visual rolling animation
  596.                 const die1 = document.getElementById('die1');
  597.                 const die2 = document.getElementById('die2');
  598.                
  599.                 die1.classList.add('rolling');
  600.                 die2.classList.add('rolling');
  601.                
  602.                 // Show probabilistic state
  603.                 this.updateProbabilityDisplays();
  604.                
  605.                 // Enable observation after delay
  606.                 setTimeout(() => {
  607.                     die1.classList.remove('rolling');
  608.                     die2.classList.remove('rolling');
  609.                     this.isRolling = false;
  610.                    
  611.                     document.getElementById('rollBtn').disabled = true;
  612.                     document.getElementById('observeBtn').disabled = false;
  613.                    
  614.                     this.showResult("Dice are in quantum superposition! Click 'Observe' to collapse the wave function.", "info");
  615.                 }, 2000);
  616.                
  617.                 this.updateDisplay();
  618.             }
  619.            
  620.             generateQuantumStates() {
  621.                 this.quantumStates = [];
  622.                
  623.                 // Generate all possible outcomes with probabilities
  624.                 for (let d1 = 1; d1 <= 6; d1++) {
  625.                    for (let d2 = 1; d2 <= 6; d2++) {
  626.                        this.quantumStates.push({
  627.                            die1: d1,
  628.                            die2: d2,
  629.                            probability: 1/36
  630.                        });
  631.                    }
  632.                }
  633.            }
  634.            
  635.            updateProbabilityDisplays() {
  636.                const prob1 = document.getElementById('prob1');
  637.                const prob2 = document.getElementById('prob2');
  638.                
  639.                prob1.textContent = "Probability Cloud";
  640.                prob2.textContent = "All Outcomes Possible";
  641.                
  642.                // Show quantum uncertainty in die display
  643.                const die1 = document.getElementById('die1');
  644.                const die2 = document.getElementById('die2');
  645.                
  646.                let counter = 0;
  647.                const uncertainty = setInterval(() => {
  648.                     if (!this.isRolling && !document.getElementById('observeBtn').disabled) {
  649.                        clearInterval(uncertainty);
  650.                         return;
  651.                     }
  652.                    
  653.                     die1.textContent = Math.floor(Math.random() * 6) + 1;
  654.                     die2.textContent = Math.floor(Math.random() * 6) + 1;
  655.                     counter++;
  656.                    
  657.                     if (counter > 20 && !this.isRolling) {
  658.                        clearInterval(uncertainty);
  659.                         die1.textContent = "?";
  660.                         die2.textContent = "?";
  661.                     }
  662.                 }, 100);
  663.             }
  664.            
  665.             observeQuantumState() {
  666.                 // Collapse the quantum state
  667.                 const collapsedState = this.collapseQuantumState();
  668.                
  669.                 // Reveal the dice
  670.                 document.getElementById('die1').textContent = collapsedState.die1;
  671.                 document.getElementById('die2').textContent = collapsedState.die2;
  672.                
  673.                 // Remove quantum veils
  674.                 document.getElementById('veil1').classList.add('revealed');
  675.                 document.getElementById('veil2').classList.add('revealed');
  676.                
  677.                 // Update probability displays
  678.                 document.getElementById('prob1').textContent = `Observed: ${collapsedState.die1}`;
  679.                 document.getElementById('prob2').textContent = `Observed: ${collapsedState.die2}`;
  680.                
  681.                 // Calculate results
  682.                 this.calculateResults(collapsedState);
  683.                
  684.                 // Add to path history
  685.                 this.addToPathHistory(collapsedState);
  686.                
  687.                 // Prepare for next round
  688.                 setTimeout(() => {
  689.                     this.prepareNextRound();
  690.                 }, 3000);
  691.             }
  692.            
  693.             collapseQuantumState() {
  694.                 // Weighted random selection (though all outcomes are equally likely in fair dice)
  695.                 const randomIndex = Math.floor(Math.random() * this.quantumStates.length);
  696.                 return this.quantumStates[randomIndex];
  697.             }
  698.            
  699.             calculateResults(state) {
  700.                 const sum = state.die1 + state.die2;
  701.                 let totalWinnings = 0;
  702.                 let resultDetails = [];
  703.                
  704.                 for (const [betType, bet] of this.currentBets) {
  705.                     let won = false;
  706.                    
  707.                     switch (betType) {
  708.                         case 'sum-even':
  709.                             won = sum % 2 === 0;
  710.                             break;
  711.                         case 'sum-odd':
  712.                             won = sum % 2 === 1;
  713.                             break;
  714.                         case 'doubles':
  715.                             won = state.die1 === state.die2;
  716.                             break;
  717.                         case 'high-sum':
  718.                             won = sum >= 8;
  719.                             break;
  720.                         case 'low-sum':
  721.                             won = sum <= 6;
  722.                            break;
  723.                        case 'quantum-anomaly':
  724.                            won = sum === 2 || sum === 12;
  725.                            break;
  726.                    }
  727.                    
  728.                    if (won) {
  729.                        const winAmount = bet.amount * bet.payout;
  730.                        totalWinnings += winAmount;
  731.                        resultDetails.push(`${betType}: WON ${winAmount} credits (${bet.payout}:1)`);
  732.                    } else {
  733.                        resultDetails.push(`${betType}: LOST ${bet.amount} credits`);
  734.                    }
  735.                }
  736.                
  737.                this.credits += totalWinnings;
  738.                this.totalWinnings += totalWinnings - Array.from(this.currentBets.values()).reduce((sum, bet) => sum + bet.amount, 0);
  739.                
  740.                 const resultText = `
  741.                     Dice: ${state.die1} + ${state.die2} = ${sum}<br>
  742.                     ${resultDetails.join('<br>')}<br>
  743.                     <strong>Net Result: ${totalWinnings > 0 ? '+' : ''}${totalWinnings - Array.from(this.currentBets.values()).reduce((sum, bet) => sum + bet.amount, 0)} credits</strong>
  744.                 `;
  745.                
  746.                 this.showResult(resultText, totalWinnings > 0 ? "success" : "error");
  747.                 this.updateDisplay();
  748.             }
  749.            
  750.             addToPathHistory(state) {
  751.                 const sum = state.die1 + state.die2;
  752.                 const pathItem = {
  753.                     round: this.round,
  754.                     dice: `${state.die1}, ${state.die2}`,
  755.                     sum: sum,
  756.                     timestamp: new Date().toLocaleTimeString()
  757.                 };
  758.                
  759.                 this.pathHistory.unshift(pathItem);
  760.                 if (this.pathHistory.length > 10) {
  761.                     this.pathHistory.pop();
  762.                 }
  763.                
  764.                 this.updatePathDisplay();
  765.             }
  766.            
  767.             updatePathDisplay() {
  768.                 const pathHistoryEl = document.getElementById('pathHistory');
  769.                 pathHistoryEl.innerHTML = '';
  770.                
  771.                 this.pathHistory.forEach(path => {
  772.                     const pathEl = document.createElement('div');
  773.                     pathEl.className = 'path-item';
  774.                     pathEl.innerHTML = `
  775.                         <span>Round ${path.round}: [${path.dice}] = ${path.sum}</span>
  776.                         <span>${path.timestamp}</span>
  777.                     `;
  778.                     pathHistoryEl.appendChild(pathEl);
  779.                 });
  780.             }
  781.            
  782.             prepareNextRound() {
  783.                 this.round++;
  784.                 this.hasRolled = false;
  785.                
  786.                 // Reset quantum veils
  787.                 document.getElementById('veil1').classList.remove('revealed');
  788.                 document.getElementById('veil2').classList.remove('revealed');
  789.                
  790.                 // Reset dice display
  791.                 document.getElementById('die1').textContent = '?';
  792.                 document.getElementById('die2').textContent = '?';
  793.                
  794.                 // Reset probability displays
  795.                 document.getElementById('prob1').textContent = 'Superposition';
  796.                 document.getElementById('prob2').textContent = 'Superposition';
  797.                
  798.                 // Reset buttons
  799.                 document.getElementById('rollBtn').disabled = false;
  800.                 document.getElementById('observeBtn').disabled = true;
  801.                
  802.                 // Clear bets
  803.                 this.clearBets();
  804.                
  805.                 // Check game over
  806.                 if (this.credits <= 0) {
  807.                    this.gameOver();
  808.                } else {
  809.                    this.showResult("Ready for next quantum roll!", "info");
  810.                }
  811.                
  812.                this.updateDisplay();
  813.            }
  814.            
  815.            clearBets() {
  816.                this.currentBets.clear();
  817.                document.querySelectorAll('.bet-option').forEach(option => {
  818.                     option.classList.remove('selected');
  819.                 });
  820.                 this.updateBetDisplay();
  821.             }
  822.            
  823.             gameOver() {
  824.                 this.showResult(`Game Over! You played ${this.round - 1} rounds with a total return of ${this.totalWinnings} credits.`, "error");
  825.                 document.getElementById('rollBtn').disabled = true;
  826.                 document.getElementById('observeBtn').disabled = true;
  827.             }
  828.            
  829.             resetGame() {
  830.                 this.credits = 1000;
  831.                 this.round = 1;
  832.                 this.totalWinnings = 0;
  833.                 this.currentBets.clear();
  834.                 this.quantumStates = [];
  835.                 this.pathHistory = [];
  836.                 this.isRolling = false;
  837.                 this.hasRolled = false;
  838.                
  839.                 // Reset UI
  840.                 document.getElementById('die1').textContent = '?';
  841.                 document.getElementById('die2').textContent = '?';
  842.                 document.getElementById('veil1').classList.remove('revealed');
  843.                 document.getElementById('veil2').classList.remove('revealed');
  844.                 document.getElementById('prob1').textContent = 'Superposition';
  845.                 document.getElementById('prob2').textContent = 'Superposition';
  846.                 document.getElementById('rollBtn').disabled = false;
  847.                 document.getElementById('observeBtn').disabled = true;
  848.                
  849.                 this.clearBets();
  850.                 this.updateDisplay();
  851.                 this.updatePathDisplay();
  852.                 this.showResult("Game reset! Place your bets and roll the quantum dice!", "info");
  853.             }
  854.            
  855.             updateDisplay() {
  856.                 document.getElementById('credits').textContent = this.credits;
  857.                 document.getElementById('round').textContent = this.round;
  858.                 document.getElementById('totalWinnings').textContent = this.totalWinnings;
  859.             }
  860.            
  861.             showResult(message, type = "info") {
  862.                 const resultEl = document.getElementById('resultText');
  863.                 resultEl.innerHTML = message;
  864.                
  865.                 // Add visual feedback based on type
  866.                 resultEl.style.color = type === "success" ? "#4ecdc4" :
  867.                                      type === "error" ? "#ff6b6b" : "#fff";
  868.             }
  869.         }
  870.        
  871.         // Initialize the game when the page loads
  872.         document.addEventListener('DOMContentLoaded', () => {
  873.             new QuantumDiceGame();
  874.         });
  875.        
  876.         // Add some quantum particle effects
  877.         function createQuantumParticle() {
  878.             const particle = document.createElement('div');
  879.             particle.style.position = 'fixed';
  880.             particle.style.width = '3px';
  881.             particle.style.height = '3px';
  882.             particle.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 70%)`;
  883.             particle.style.borderRadius = '50%';
  884.             particle.style.pointerEvents = 'none';
  885.             particle.style.zIndex = '1000';
  886.             particle.style.opacity = '0.8';
  887.            
  888.             const x = Math.random() * window.innerWidth;
  889.             const y = Math.random() * window.innerHeight;
  890.            
  891.             particle.style.left = x + 'px';
  892.             particle.style.top = y + 'px';
  893.            
  894.             document.body.appendChild(particle);
  895.            
  896.             // Animate the particle
  897.             const animation = particle.animate([
  898.                 {
  899.                     transform: 'translate(0, 0) scale(1)',
  900.                     opacity: 0.8
  901.                 },
  902.                 {
  903.                     transform: `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px) scale(0)`,
  904.                     opacity: 0
  905.                 }
  906.             ], {
  907.                 duration: 3000 + Math.random() * 2000,
  908.                 easing: 'ease-out'
  909.             });
  910.            
  911.             animation.onfinish = () => {
  912.                 particle.remove();
  913.             };
  914.         }
  915.        
  916.         // Create quantum particles periodically
  917.         setInterval(() => {
  918.             if (Math.random() < 0.3) {
  919.                createQuantumParticle();
  920.            }
  921.        }, 500);
  922.    </script>
  923. </body>
  924. </html>
  925.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!