Spaces:

pedromsfaria
/

anycoder-bbf4ad2e

Running

App Files Files Community

pedromsfaria commited on Dec 12, 2025

Commit

d9ec52c

verified ·

1 Parent(s): 01bc31a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +519 -591

index.html CHANGED Viewed

@@ -1,649 +1,577 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ComfyUI Workflow</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
-            background-color: #000000;
-            color: #f5f5f7;
-            line-height: 1.6;
-            padding: 20px;
             min-height: 100vh;
         }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
         .header {
             text-align: center;
-            margin-bottom: 40px;
-            padding: 40px 20px;
         }
         .header h1 {
-            font-size: 48px;
-            font-weight: 600;
-            color: #ffffff;
-            margin-bottom: 12px;
-            letter-spacing: -0.02em;
         }
-        .header p {
-            font-size: 18px;
-            color: #86868b;
-            font-weight: 400;
         }
-        .controls {
             display: flex;
-            gap: 12px;
-            margin-bottom: 24px;
-            justify-content: center;
         }
-        .btn {
-            padding: 12px 24px;
-            border: none;
-            border-radius: 24px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-            font-family: inherit;
         }
-        .btn-primary {
-            background: #ffffff;
-            color: #000000;
         }
-        .btn-primary:hover {
-            background: #f5f5f7;
-            transform: scale(0.98);
         }
-        .btn-secondary {
-            background: #1d1d1f;
-            color: #f5f5f7;
-            border: 1px solid #424245;
         }
-        .btn-secondary:hover {
-            background: #2d2d2f;
-            transform: scale(0.98);
         }
-        .json-container {
-            background-color: #1d1d1f;
-            border-radius: 16px;
-            padding: 32px;
-            overflow-x: auto;
-            border: 1px solid #424245;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
         }
-        pre {
-            margin: 0;
-            font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
-            font-size: 13px;
-            line-height: 1.6;
-            white-space: pre-wrap;
-            word-wrap: break-word;
         }
-        .json-key {
-            color: #9cdcfe;
         }
-        .json-string {
-            color: #ce9178;
         }
-        .json-number {
-            color: #b5cea8;
         }
-        .json-boolean {
-            color: #569cd6;
         }
-        .json-null {
-            color: #569cd6;
         }
-        .success {
-            color: #30d158;
         }
         @media (max-width: 768px) {
             .header h1 {
-                font-size: 32px;
             }
             .controls {
                 flex-direction: column;
             }
-            .json-container {
-                padding: 20px;
             }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>ComfyUI Workflow</h1>
-            <p>View and download your workflow JSON</p>
         </div>
-        <div class="controls">
-            <button class="btn btn-primary" onclick="downloadJSON()">Download JSON</button>
-            <button class="btn btn-secondary" onclick="copyToClipboard()">Copy to Clipboard</button>
         </div>
-        <div class="json-container">
-            <pre id="json-content">{
-  "last_node_id": 9,
-  "last_link_id": 8,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CheckpointLoaderSimple",
-      "pos": [
-        200,
-        100
-      ],
-      "size": {
-        "0": 315,
-        "1": 174
-      },
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "ckpt_name",
-          "type": "COMBO",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "MODEL",
-          "type": "MODEL",
-          "links": [
-            2
-          ],
-          "slot_index": 0
-        },
-        {
-          "name": "CLIP",
-          "type": "CLIP",
-          "links": [
-            3
-          ],
-          "slot_index": 0
-        },
-        {
-          "name": "VAE",
-          "type": "VAE",
-          "links": [
-            4
-          ],
-          "slot_index": 0
-        }
-      ],
-      "title": "Load Checkpoint",
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple_1"
-      }
-    },
-    {
-      "id": 2,
-      "type": "CLIPTextEncode",
-      "pos": [
-        200,
-        300
-      ],
-      "size": {
-        "0": 422,
-        "1": 180
-      },
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 3
-        },
-        {
-          "name": "text",
-          "type": "STRING",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "links": [
-            5
-          ],
-          "slot_index": 0
-        }
-      ],
-      "title": "CLIP Text Encode (Prompt)",
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode_2"
-      }
-    },
-    {
-      "id": 3,
-      "type": "CLIPTextEncode",
-      "pos": [
-        200,
-        500
-      ],
-      "size": {
-        "0": 422,
-        "1": 180
-      },
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 3
-        },
-        {
-          "name": "text",
-          "type": "STRING",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "links": [
-            6
-          ],
-          "slot_index": 0
-        }
-      ],
-      "title": "CLIP Text Encode (Negative)",
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode_3"
-      }
-    },
-    {
-      "id": 4,
-      "type": "EmptyLatentImage",
-      "pos": [
-        200,
-        700
-      ],
-      "size": {
-        "0": 315,
-        "1": 118
-      },
-      "flags": {},
-      "order": 3,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "width",
-          "type": "INT",
-          "link": null
-        },
-        {
-          "name": "height",
-          "type": "INT",
-          "link": null
-        },
-        {
-          "name": "batch_size",
-          "type": "INT",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [
-            7
-          ],
-          "slot_index": 0
-        }
-      ],
-      "title": "Empty Latent Image",
-      "properties": {
-        "Node name for S&R": "EmptyLatentImage_4"
-      }
-    },
-    {
-      "id": 5,
-      "type": "KSampler",
-      "pos": [
-        600,
-        400
-      ],
-      "size": {
-        "0": 315,
-        "1": 262
-      },
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": 2
-        },
-        {
-          "name": "seed",
-          "type": "INT",
-          "link": null
-        },
-        {
-          "name": "steps",
-          "type": "INT",
-          "link": null
-        },
-        {
-          "name": "cfg",
-          "type": "FLOAT",
-          "link": null
-        },
-        {
-          "name": "sampler_name",
-          "type": "COMBO",
-          "link": null
-        },
-        {
-          "name": "scheduler",
-          "type": "COMBO",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": 5
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": 6
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": 7
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [
-            8
-          ],
-          "slot_index": 0
-        }
-      ],
-      "title": "KSampler",
-      "properties": {
-        "Node name for S&R": "KSampler_5"
-      }
-    },
-    {
-      "id": 6,
-      "type": "VAEDecode",
-      "pos": [
-        1000,
-        400
-      ],
-      "size": {
-        "0": 210,
-        "1": 46
-      },
-      "flags": {},
-      "order": 5,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": 8
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": 4
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [
-            9
-          ],
-          "slot_index": 0
-        }
-      ],
-      "title": "VAE Decode",
-      "properties": {
-        "Node name for S&R": "VAEDecode_6"
-      }
-    },
-    {
-      "id": 7,
-      "type": "SaveImage",
-      "pos": [
-        1300,
-        400
-      ],
-      "size": {
-        "0": 210,
-        "1": 258
-      },
-      "flags": {},
-      "order": 6,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 9
-        }
-      ],
-      "outputs": [],
-      "title": "Save Image",
-      "properties": {
-        "Node name for S&R": "SaveImage_7"
-      }
-    },
-    {
-      "id": 8,
-      "type": "Note",
-      "pos": [
-        100,
-        50
-      ],
-      "size": {
-        "0": 200,
-        "1": 120
-      },
-      "flags": {},
-      "order": 7,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "text",
-          "type": "STRING",
-          "link": null
-        }
-      ],
-      "outputs": [],
-      "title": "Note",
-      "properties": {
-        "Node name for S&R": "Note_8"
-      }
-    },
-    {
-      "id": 9,
-      "type": "Note",
-      "pos": [
-        100,
-        200
-      ],
-      "size": {
-        "0": 200,
-        "1": 120
-      },
-      "flags": {},
-      "order": 8,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "text",
-          "type": "STRING",
-          "link": null
-        }
-      ],
-      "outputs": [],
-      "title": "Note",
-      "properties": {
-        "Node name for S&R": "Note_9"
-      }
-    }
-  ],
-  "links": [
-    [
-      2,
-      1,
-      0,
-      5,
-      0
-    ],
-    [
-      3,
-      1,
-      1,
-      2,
-      0
-    ],
-    [
-      3,
-      1,
-      1,
-      3,
-      0
-    ],
-    [
-      4,
-      1,
-      2,
-      6,
-      1
-    ],
-    [
-      5,
-      2,
-      0,
-      5,
-      5
-    ],
-    [
-      6,
-      3,
-      0,
-      5,
-      6
-    ],
-    [
-      7,
-      4,
-      0,
-      5,
-      7
-    ],
-    [
-      8,
-      5,
-      0,
-      6,
-      0
-    ],
-    [
-      9,
-      6,
-      0,
-      7,
-      0
-    ]
-  ],
-  "groups": [],
-  "config": {},
-  "extra": {},
-  "version": 0.4
-}</pre>
         </div>
     </div>
     <script>
-        function copyToClipboard() {
-            const jsonContent = document.getElementById('json-content').textContent;
-            navigator.clipboard.writeText(jsonContent).then(() => {
-                const btn = event.target;
-                const originalText = btn.textContent;
-                btn.textContent = 'Copied!';
-                btn.classList.add('success');
-                setTimeout(() => {
-                    btn.textContent = originalText;
-                    btn.classList.remove('success');
-                }, 2000);
-            }).catch(err => {
-                alert('Failed to copy to clipboard');
-            });
-        }
-        function downloadJSON() {
-            const jsonContent = document.getElementById('json-content').textContent;
-            const blob = new Blob([jsonContent], { type: 'application/json' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'comfyui_workflow.json';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-            const btn = event.target;
-            const originalText = btn.textContent;
-            btn.textContent = 'Downloaded!';
-            btn.classList.add('success');
-            setTimeout(() => {
-                btn.textContent = originalText;
-                btn.classList.remove('success');
-            }, 2000);
-        }
-        // Add syntax highlighting
-        function highlightJSON() {
-            const content = document.getElementById('json-content');
-            let html = content.innerHTML;
-            // Highlight different JSON elements
-            html = html.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>');
-            html = html.replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>');
-            html = html.replace(/: (-?\d+\.?\d*)/g, ': <span class="json-number">$1</span>');
-            html = html.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>');
-            html = html.replace(/: null/g, ': <span class="json-null">null</span>');
-            content.innerHTML = html;
         }
-        // Apply syntax highlighting after page load
-        window.addEventListener('load', highlightJSON);
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jogo de Plinko</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            color: white;
         }
         .header {
             text-align: center;
+            margin-bottom: 20px;
+            width: 100%;
         }
         .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
+        .built-with {
+            margin-top: 10px;
+            font-size: 0.9rem;
+            opacity: 0.8;
         }
+        .built-with a {
+            color: #ffeb3b;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .built-with a:hover {
+            color: #fff;
+            text-decoration: underline;
+        }
+        .game-container {
             display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            max-width: 800px;
+            width: 100%;
         }
+        .stats-panel {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            padding: 15px 25px;
+            border-radius: 15px;
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
         }
+        .stat {
+            text-align: center;
         }
+        .stat-value {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #ffeb3b;
         }
+        .stat-label {
+            font-size: 0.9rem;
+            opacity: 0.8;
         }
+        .game-board {
+            position: relative;
+            width: 100%;
+            height: 500px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
         }
+        .peg-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
+        .peg {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: #ffeb3b;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
         }
+        .ball {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #ff4081;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 15px rgba(255, 64, 129, 0.7);
+            z-index: 10;
+            transition: transform 0.1s;
         }
+        .slot-container {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 60px;
+            display: flex;
+            justify-content: space-around;
+            padding: 0 10px;
         }
+        .slot {
+            flex: 1;
+            height: 100%;
+            margin: 0 5px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px 10px 0 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.2rem;
+            color: #ffeb3b;
+            transition: all 0.3s;
         }
+        .slot.active {
+            background: rgba(255, 235, 59, 0.3);
+            transform: scale(1.05);
         }
+        .controls {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            justify-content: center;
         }
+        .btn {
+            padding: 12px 25px;
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            border-radius: 25px;
+            color: white;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            backdrop-filter: blur(10px);
+        }
+        .btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+        }
+        .btn:active {
+            transform: translateY(0);
         }
+        .btn-primary {
+            background: linear-gradient(45deg, #ff4081, #ff9800);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(45deg, #f50057, #ff5722);
+        }
+        .message {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.8);
+            padding: 30px 50px;
+            border-radius: 15px;
+            text-align: center;
+            z-index: 100;
+            backdrop-filter: blur(10px);
+            display: none;
+        }
+        .message h2 {
+            margin-bottom: 15px;
+            color: #ffeb3b;
+        }
         @media (max-width: 768px) {
+            .game-board {
+                height: 400px;
+            }
             .header h1 {
+                font-size: 2rem;
+            }
+            .stat-value {
+                font-size: 1.5rem;
             }
+            .btn {
+                padding: 10px 20px;
+                font-size: 0.9rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .game-board {
+                height: 350px;
+            }
+            .stats-panel {
+                flex-direction: column;
+                gap: 10px;
+            }
             .controls {
                 flex-direction: column;
+                width: 100%;
             }
+            .btn {
+                width: 100%;
             }
         }
     </style>
 </head>
 <body>
+    <div class="header">
+        <h1>🎯 Jogo de Plinko</h1>
+        <p>Solte a bola e veja onde ela vai cair!</p>
+        <div class="built-with">
+            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
         </div>
+    </div>
+    <div class="game-container">
+        <div class="stats-panel">
+            <div class="stat">
+                <div class="stat-value" id="score">0</div>
+                <div class="stat-label">Pontuação</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value" id="balls-left">10</div>
+                <div class="stat-label">Bolas Restantes</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value" id="multiplier">1x</div>
+                <div class="stat-label">Multiplicador</div>
+            </div>
         </div>
+        <div class="game-board" id="gameBoard">
+            <div class="peg-container" id="pegContainer"></div>
+            <div class="slot-container" id="slotContainer"></div>
+        </div>
+        <div class="controls">
+            <button class="btn btn-primary" id="dropBall">Soltar Bola</button>
+            <button class="btn" id="resetGame">Reiniciar Jogo</button>
         </div>
     </div>
+    <div class="message" id="gameOverMessage">
+        <h2>Fim de Jogo!</h2>
+        <p>Sua pontuação final: <span id="finalScore">0</span></p>
+        <button class="btn btn-primary" id="playAgain">Jogar Novamente</button>
+    </div>
     <script>
+        class PlinkoGame {
+            constructor() {
+                this.gameBoard = document.getElementById('gameBoard');
+                this.pegContainer = document.getElementById('pegContainer');
+                this.slotContainer = document.getElementById('slotContainer');
+                this.scoreElement = document.getElementById('score');
+                this.ballsLeftElement = document.getElementById('balls-left');
+                this.multiplierElement = document.getElementById('multiplier');
+                this.dropBallBtn = document.getElementById('dropBall');
+                this.resetGameBtn = document.getElementById('resetGame');
+                this.gameOverMessage = document.getElementById('gameOverMessage');
+                this.finalScoreElement = document.getElementById('finalScore');
+                this.playAgainBtn = document.getElementById('playAgain');
+                this.score = 0;
+                this.ballsLeft = 10;
+                this.multiplier = 1;
+                this.isDropping = false;
+                this.balls = [];
+                this.pegs = [];
+                this.slots = [];
+                this.init();
+                this.setupEventListeners();
+            }
+            init() {
+                this.createPegs();
+                this.createSlots();
+                this.updateUI();
+            }
+            createPegs() {
+                const rows = 10;
+                const boardWidth = this.gameBoard.clientWidth;
+                const boardHeight = this.gameBoard.clientHeight - 60; // Subtract slot height
+                for (let row = 1; row <= rows; row++) {
+                    const pegsInRow = row + 5;
+                    const y = (row / (rows + 1)) * boardHeight + 50;
+                    for (let col = 0; col < pegsInRow; col++) {
+                        const x = (col + 0.5) / pegsInRow * boardWidth;
+                        const peg = document.createElement('div');
+                        peg.className = 'peg';
+                        peg.style.left = `${x}px`;
+                        peg.style.top = `${y}px`;
+                        this.pegContainer.appendChild(peg);
+                        this.pegs.push({
+                            element: peg,
+                            x: x,
+                            y: y,
+                            radius: 6
+                        });
+                    }
+                }
+            }
+            createSlots() {
+                const slotCount = 7;
+                const slotValues = [1, 2, 5, 10, 5, 2, 1];
+                for (let i = 0; i < slotCount; i++) {
+                    const slot = document.createElement('div');
+                    slot.className = 'slot';
+                    slot.textContent = slotValues[i];
+                    slot.dataset.value = slotValues[i];
+                    this.slotContainer.appendChild(slot);
+                    this.slots.push({
+                        element: slot,
+                        value: slotValues[i],
+                        x: (i + 0.5) * (this.gameBoard.clientWidth / slotCount),
+                        width: this.gameBoard.clientWidth / slotCount
+                    });
+                }
+            }
+            dropBall() {
+                if (this.isDropping || this.ballsLeft <= 0) return;
+                this.isDropping = true;
+                this.ballsLeft--;
+                const startX = this.gameBoard.clientWidth / 2;
+                const ball = document.createElement('div');
+                ball.className = 'ball';
+                ball.style.left = `${startX}px`;
+                ball.style.top = '30px';
+                this.gameBoard.appendChild(ball);
+                const ballObj = {
+                    element: ball,
+                    x: startX,
+                    y: 30,
+                    vx: (Math.random() - 0.5) * 2,
+                    vy: 0,
+                    radius: 10,
+                    active: true
+                };
+                this.balls.push(ballObj);
+                this.animateBall(ballObj);
+                this.updateUI();
+            }
+            animateBall(ball) {
+                const gravity = 0.2;
+                const friction = 0.99;
+                const bounce = 0.7;
+                const animate = () => {
+                    if (!ball.active) return;
+                    // Apply gravity
+                    ball.vy += gravity;
+                    // Update position
+                    ball.x += ball.vx;
+                    ball.y += ball.vy;
+                    // Check collisions with pegs
+                    this.checkPegCollisions(ball);
+                    // Check wall collisions
+                    if (ball.x <= ball.radius || ball.x >= this.gameBoard.clientWidth - ball.radius) {
+                        ball.vx *= -bounce;
+                        ball.x = Math.max(ball.radius, Math.min(this.gameBoard.clientWidth - ball.radius, ball.x));
+                    }
+                    // Check if ball reached bottom
+                    if (ball.y >= this.gameBoard.clientHeight - 60 - ball.radius) {
+                        this.handleBallLanded(ball);
+                        return;
+                    }
+                    // Apply friction
+                    ball.vx *= friction;
+                    ball.vy *= friction;
+                    // Update ball position
+                    ball.element.style.left = `${ball.x}px`;
+                    ball.element.style.top = `${ball.y}px`;
+                    requestAnimationFrame(animate);
+                };
+                animate();
+            }
+            checkPegCollisions(ball) {
+                for (const peg of this.pegs) {
+                    const dx = ball.x - peg.x;
+                    const dy = ball.y - peg.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < ball.radius + peg.radius) {
+                        // Collision detected
+                        const angle = Math.atan2(dy, dx);
+                        const targetX = peg.x + Math.cos(angle) * (ball.radius + peg.radius);
+                        const targetY = peg.y + Math.sin(angle) * (ball.radius + peg.radius);
+                        const ax = (targetX - ball.x) * 0.1;
+                        const ay = (targetY - ball.y) * 0.1;
+                        ball.vx -= ax;
+                        ball.vy -= ay;
+                        // Add some random variation
+                        ball.vx += (Math.random() - 0.5) * 0.5;
+                        // Move ball outside peg
+                        ball.x = targetX;
+                        ball.y = targetY;
+                    }
+                }
+            }
+            handleBallLanded(ball) {
+                ball.active = false;
+                this.isDropping = false;
+                // Find which slot the ball landed in
+                const slotIndex = this.findSlotForBall(ball.x);
+                if (slotIndex !== -1) {
+                    const slotValue = this.slots[slotIndex].value;
+                    const points = slotValue * this.multiplier;
+                    this.score += points;
+                    this.multiplier = Math.min(this.multiplier + 0.2, 5);
+                    // Highlight the slot
+                    this.slots[slotIndex].element.classList.add('active');
+                    setTimeout(() => {
+                        this.slots[slotIndex].element.classList.remove('active');
+                    }, 1000);
+                    // Remove ball after a delay
+                    setTimeout(() => {
+                        ball.element.remove();
+                        this.balls = this.balls.filter(b => b !== ball);
+                    }, 500);
+                }
+                this.updateUI();
+                // Check game over
+                if (this.ballsLeft === 0 && this.balls.length === 0) {
+                    setTimeout(() => this.showGameOver(), 1000);
+                }
+            }
+            findSlotForBall(x) {
+                for (let i = 0; i < this.slots.length; i++) {
+                    const slot = this.slots[i];
+                    const slotLeft = slot.x - slot.width / 2;
+                    const slotRight = slot.x + slot.width / 2;
+                    if (x >= slotLeft && x <= slotRight) {
+                        return i;
+                    }
+                }
+                return -1;
+            }
+            updateUI() {
+                this.scoreElement.textContent = this.score;
+                this.ballsLeftElement.textContent = this.ballsLeft;
+                this.multiplierElement.textContent = `${this.multiplier.toFixed(1)}x`;
+                // Update button state
+                this.dropBallBtn.disabled = this.isDropping || this.ballsLeft <= 0;
+            }
+            showGameOver() {
+                this.finalScoreElement.textContent = this.score;
+                this.gameOverMessage.style.display = 'block';
+            }
+            resetGame() {
+                // Remove all balls
+                this.balls.forEach(ball => {
+                    ball.element.remove();
+                });
+                this.balls = [];
+                this.score = 0;
+                this.ballsLeft = 10;
+                this.multiplier = 1;
+                this.isDropping = false;
+                this.gameOverMessage.style.display = 'none';
+                this.updateUI();
+            }
+            setupEventListeners() {
+                this.dropBallBtn.addEventListener('click', () => this.dropBall());
+                this.resetGameBtn.addEventListener('click', () => this.resetGame());
+                this.playAgainBtn.addEventListener('click', () => this.resetGame());
+                // Allow dropping ball by pressing spacebar
+                document.addEventListener('keydown', (e) => {
+                    if (e.code === 'Space' && !this.isDropping && this.ballsLeft > 0) {
+                        e.preventDefault();
+                        this.dropBall();
+                    }
+                });
+            }
         }
+        // Initialize the game when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PlinkoGame();
+        });
     </script>
 </body>
 </html>