Spaces:

tidy
/

smart-studio-686

Running

App Files Files Community

tidy commited on Nov 3, 2025

Commit

98f78b7

verified ·

1 Parent(s): 4ade195

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +708 -18

index.html CHANGED Viewed

@@ -1,19 +1,709 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>轮盘赌游戏</title>
+    <meta name="description" content="在线轮盘赌游戏，体验真实的赌场乐趣">
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>🎰 轮盘赌游戏</h1>
+            <p class="subtitle">体验真实的赌场乐趣</p>
+        </header>
+        <main class="game-area">
+            <div class="wheel-container">
+                <div class="wheel-wrapper">
+                    <div class="wheel" id="wheel">
+                        <!-- 轮盘数字将通过JavaScript生成 -->
+                    </div>
+                    <div class="ball" id="ball"></div>
+                    <div class="wheel-pointer">▼</div>
+                </div>
+            </div>
+            <div class="game-controls">
+                <div class="balance-info">
+                    <div class="balance">
+                        <span>余额：¥</span>
+                        <span id="balance">1000</span>
+                    </div>
+                    <div class="last-result" id="lastResult">
+                        点击开始按钮开始游戏
+                    </div>
+                </div>
+                <div class="betting-section">
+                    <div class="bet-input">
+                        <label for="betAmount">投注金额：</label>
+                        <input type="number" id="betAmount" min="1" max="1000" value="10">
+                        <button id="clearBet" class="btn-secondary">清空</button>
+                    </div>
+                    <div class="number-selection">
+                        <label>选择号码 (0-36)：</label>
+                        <div class="number-grid" id="numberGrid">
+                            <!-- 数字按钮将通过JavaScript生成 -->
+                        </div>
+                    </div>
+                    <div class="current-bet">
+                        <span>当前投注：</span>
+                        <span id="currentBetDisplay">无</span>
+                    </div>
+                    <div class="action-buttons">
+                        <button id="spinButton" class="btn-primary">开始旋转</button>
+                        <button id="resetButton" class="btn-secondary">重置游戏</button>
+                    </div>
+                </div>
+            </div>
+            <div class="game-stats">
+                <div class="stat-item">
+                    <span>总游戏次数：</span>
+                    <span id="totalGames">0</span>
+                </div>
+                <div class="stat-item">
+                    <span>获胜次数：</span>
+                    <span id="winGames">0</span>
+                </div>
+                <div class="stat-item">
+                    <span>胜率：</span>
+                    <span id="winRate">0%</span>
+                </div>
+            </div>
+        </main>
+        <footer class="footer">
+            <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
+        </footer>
+    </div>
+    <script src="assets/js/roulette.js"></script>
+</body>
 </html>
+=== assets/css/styles.css ===
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    min-height: 100vh;
+    color: #fff;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+.header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+.subtitle {
+    font-size: 1.2rem;
+    opacity: 0.9;
+}
+.game-area {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+    align-items: start;
+}
+.wheel-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.wheel-wrapper {
+    position: relative;
+    width: 400px;
+    height: 400px;
+}
+.wheel {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 8px solid #8B4513;
+    position: relative;
+    overflow: hidden;
+    transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
+    background: conic-gradient(
+        #ff0000 0deg 19.35deg,
+        #000 19.35deg 38.7deg,
+        #ff0000 38.7deg 58.05deg,
+        #000 58.05deg 77.4deg,
+        #ff0000 77.4deg 96.75deg,
+        #000 96.75deg 116.1deg,
+        #ff0000 116.1deg 135.45deg,
+        #000 135.45deg 154.8deg,
+        #ff0000 154.8deg 174.15deg,
+        #000 174.15deg 193.5deg,
+        #ff0000 193.5deg 212.85deg,
+        #000 212.85deg 232.2deg,
+        #ff0000 232.2deg 251.55deg,
+        #000 251.55deg 270.9deg,
+        #ff0000 270.9deg 290.25deg,
+        #000 290.25deg 309.6deg,
+        #ff0000 309.6deg 328.95deg,
+        #000 328.95deg 348.3deg,
+        #ff0000 348.3deg 367.65deg,
+        #008000 367.65deg 378.95deg,
+        #008000 378.95deg 390.25deg
+    );
+    box-shadow:
+        0 0 20px rgba(0,0,0,0.5),
+        inset 0 0 20px rgba(255,255,255,0.1);
+}
+.wheel-number {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 14px;
+    color: white;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    transform-origin: 50% 200px;
+}
+.number-red { background-color: #c41e3a; }
+.number-black { background-color: #000; }
+.number-green { background-color: #228b22; }
+.ball {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, #fff, #ccc);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
+    transition: all 0.1s ease;
+}
+.ball.spinning {
+    animation: ballSpin 4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+}
+@keyframes ballSpin {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(1440deg);
+    }
+}
+.wheel-pointer {
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 30px;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
+    z-index: 15;
+}
+.game-controls {
+    background: rgba(255,255,255,0.1);
+    border-radius: 15px;
+    padding: 30px;
+    backdrop-filter: blur(10px);
+}
+.balance-info {
+    margin-bottom: 30px;
+}
+.balance {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #ffd700;
+}
+.last-result {
+    background: rgba(0,0,0,0.3);
+    padding: 10px;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 1.1rem;
+}
+.betting-section {
+    margin-bottom: 30px;
+}
+.bet-input {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.bet-input label {
+    font-weight: bold;
+    min-width: 80px;
+}
+.bet-input input {
+    flex: 1;
+    padding: 8px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+.number-selection label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+.number-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+    margin-bottom: 20px;
+}
+.number-btn {
+    padding: 10px 5px;
+    border: none;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+.number-btn.red {
+    background-color: #c41e3a;
+    color: white;
+}
+.number-btn.black {
+    background-color: #333;
+    color: white;
+}
+.number-btn.green {
+    background-color: #228b22;
+    color: white;
+}
+.number-btn:hover {
+    transform: scale(1.1);
+}
+.number-btn.selected {
+    transform: scale(1.2);
+    box-shadow: 0 0 15px rgba(255,255,255,0.5);
+}
+.current-bet {
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #ffd700;
+}
+.action-buttons {
+    display: flex;
+    gap: 15px;
+}
+.btn-primary, .btn-secondary {
+    flex: 1;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.btn-primary {
+    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
+    color: white;
+}
+.btn-primary:hover:not(:disabled) {
+    background: linear-gradient(45deg, #ff5252, #ff7979);
+    transform: translateY(-2px);
+}
+.btn-primary:disabled {
+    background: #666;
+    cursor: not-allowed;
+    transform: none;
+}
+.btn-secondary {
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    color: white;
+}
+.btn-secondary:hover {
+    background: linear-gradient(45deg, #5a67d8, #6b46c1);
+    transform: translateY(-2px);
+}
+.game-stats {
+    display: flex;
+    justify-content: space-around;
+    background: rgba(255,255,255,0.1);
+    padding: 20px;
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+}
+.stat-item {
+    text-align: center;
+}
+.stat-item span:first-child {
+    display: block;
+    font-size: 0.9rem;
+    opacity: 0.8;
+    margin-bottom: 5px;
+}
+.stat-item span:last-child {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #ffd700;
+}
+.footer {
+    text-align: center;
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255,255,255,0.2);
+}
+.footer a {
+    color: #ffd700;
+    text-decoration: none;
+}
+.footer a:hover {
+    text-decoration: underline;
+}
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .game-area {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+    .wheel-wrapper {
+        width: 300px;
+        height: 300px;
+    }
+    .header h1 {
+        font-size: 2rem;
+    }
+    .number-grid {
+        grid-template-columns: repeat(5, 1fr);
+    }
+    .action-buttons {
+        flex-direction: column;
+    }
+}
+@media (max-width: 480px) {
+    .container {
+        padding: 15px;
+    }
+    .wheel-wrapper {
+        width: 250px;
+        height: 250px;
+    }
+    .number-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .game-stats {
+        flex-direction: column;
+        gap: 15px;
+    }
+}
+=== assets/js/roulette.js ===
+class RouletteGame {
+    constructor() {
+        this.balance = 1000;
+        this.currentBet = null;
+        this.betAmount = 10;
+        this.totalGames = 0;
+        this.winGames = 0;
+        this.isSpinning = false;
+        this.wheelNumbers = [
+            0, 32, 15, 19, 4, 21, 2, 25, 17, 34, 6, 27, 13, 36, 11, 30, 8, 23,
+            10, 5, 24, 16, 33, 1, 20, 14, 31, 9, 22, 18, 29, 7, 28, 12, 35, 3, 26
+        ];
+        this.redNumbers = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36];
+        this.blackNumbers = [2, 4, 6, 8, 10, 11, 13, 15, 17, 20, 22, 24, 26, 28, 29, 31, 33, 35];
+        this.init();
+    }
+    init() {
+        this.createWheelNumbers();
+        this.createNumberGrid();
+        this.bindEvents();
+        this.updateDisplay();
+    }
+    createWheelNumbers() {
+        const wheel = document.getElementById('wheel');
+        const angleStep = 360 / 37;
+        this.wheelNumbers.forEach((number, index) => {
+            const numberElement = document.createElement('div');
+            numberElement.className = 'wheel-number';
+            numberElement.textContent = number;
+            // 确定颜色
+            if (number === 0) {
+                numberElement.classList.add('number-green');
+            } else if (this.redNumbers.includes(number)) {
+                numberElement.classList.add('number-red');
+            } else {
+                numberElement.classList.add('number-black');
+            }
+            // 设置位置
+            const angle = index * angleStep;
+            numberElement.style.transform = `rotate(${angle}deg) translateY(-180px)`;
+            wheel.appendChild(numberElement);
+        });
+    }
+    createNumberGrid() {
+        const grid = document.getElementById('numberGrid');
+        for (let i = 0; i <= 36; i++) {
+            const button = document.createElement('button');
+            button.className = 'number-btn';
+            button.textContent = i;
+            button.dataset.number = i;
+            if (i === 0) {
+                button.classList.add('green');
+            } else if (this.redNumbers.includes(i)) {
+                button.classList.add('red');
+            } else {
+                button.classList.add('black');
+            }
+            button.addEventListener('click', () => this.selectNumber(i, button));
+            grid.appendChild(button);
+        }
+    }
+    selectNumber(number, button) {
+        // 清除之前的选择
+        document.querySelectorAll('.number-btn').forEach(btn => {
+            btn.classList.remove('selected');
+        });
+        // 选择新号码
+        button.classList.add('selected');
+        this.currentBet = number;
+        this.updateDisplay();
+    }
+    bindEvents() {
+        document.getElementById('spinButton').addEventListener('click', () => this.spin());
+        document.getElementById('resetButton').addEventListener('click', () => this.reset());
+        document.getElementById('clearBet').addEventListener('click', () => this.clearBet());
+        const betAmountInput = document.getElementById('betAmount');
+        betAmountInput.addEventListener('change', (e) => {
+            this.betAmount = Math.max(1, Math.min(1000, parseInt(e.target.value) || 10));
+            e.target.value = this.betAmount;
+        });
+    }
+    async spin() {
+        if (this.isSpinning || this.currentBet === null) {
+            this.showMessage('请先选择一个号码！');
+            return;
+        }
+        if (this.betAmount > this.balance) {
+            this.showMessage('余额不足！');
+            return;
+        }
+        this.isSpinning = true;
+        this.balance -= this.betAmount;
+        this.updateDisplay();
+        // 重置轮盘和球的动画
+        const wheel = document.getElementById('wheel');
+        const ball = document.getElementById('ball');
+        const spinButton = document.getElementById('spinButton');
+        wheel.style.transition = 'none';
+        ball.classList.remove('spinning');
+        // 强制重绘
+        wheel.offsetHeight;
+        // 随机结果
+        const winningNumber = Math.floor(Math.random() * 37);
+        const targetAngle = this.getTargetAngle(winningNumber);
+        // 设置最终旋转角度
+        wheel.style.transition = 'transform 4s cubic-bezier(0.23, 1, 0.32, 1)';
+        wheel.style.transform = `rotate(${targetAngle}deg)`;
+        // 开始球的旋转动画
+        setTimeout(() => {
+            ball.classList.add('spinning');
+        }, 100);
+        // 等待动画完成
+        await new Promise(resolve => setTimeout(resolve, 4000));
+        // 检查结果
+        this.checkResult(winningNumber);
+        this.totalGames++;
+        if (this.currentBet === winningNumber) {
+            this.winGames++;
+            const winnings = this.betAmount * 35; // 35倍赔率
+            this.balance += winnings;
+            this.showMessage(`🎉 恭喜！您赢了 ¥${winnings}！`);
+        } else {
+            this.showMessage(`💔 很遗憾，号码 ${winningNumber} 获胜。您输了 ¥${this.betAmount}。`);
+        }
+        this.updateDisplay();
+        this.isSpinning = false;
+        spinButton.disabled = false;
+        // 重置选择
+        this.clearBet();
+    }
+    getTargetAngle(winningNumber) {
+        const index = this.wheelNumbers.indexOf(winningNumber);
+        const angleStep = 360 / 37;
+        const baseAngle = index * angleStep;
+        // 轮盘逆时针旋转，我们需要让获胜号码转到指针位置
+        // 指针在12点钟位置，所以轮盘需要旋转到获胜号码在顶部
+        return 360 - baseAngle + (Math.random() * angleStep - angleStep/2);
+    }
+    checkResult(winningNumber) {
+        // 这里可以添加更复杂的游戏逻辑
+        // 比如红黑、大小、奇偶等投注
+    }
+    clearBet() {
+        this.currentBet = null;
+        document.querySelectorAll('.number-btn').forEach(btn => {
+            btn.classList.remove('selected');
+        });
+        this.updateDisplay();
+    }
+    reset() {
+        if (this.isSpinning) return;
+        this.balance = 1000;
+        this.totalGames = 0;
+        this.winGames = 0;
+        this.clearBet();
+        this.showMessage('游戏已重置！');
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        document.getElementById('balance').textContent = this.balance;
+        document.getElementById('currentBetDisplay').textContent =
+            this.currentBet !== null ? `${this.currentBet}号 (¥${this.betAmount})` : '无';
+        document.getElementById('totalGames').textContent = this.totalGames;
+        document.getElementById('winGames').textContent = this.winGames;
+        const winRate = this.totalGames > 0 ? ((this.winGames / this.totalGames) * 100).toFixed(1) : '0.0';
+        document.getElementById('winRate').textContent = `${winRate}%`;
+        const spinButton = document.getElementById('spinButton');
+        spinButton.disabled = this.isSpinning || this.currentBet === null || this.betAmount > this.balance;
+        spinButton.textContent = this.isSpinning ? '旋转中...' : '开始旋转';
+    }
+    showMessage(message) {
+        const lastResult = document.getElementById('lastResult');
+        lastResult.textContent = message;
+    }
+}
+// 游戏初始化
+document.addEventListener('DOMContentLoaded', () => {
+    new RouletteGame();
+});
+// 添加一些额外的功能
+document.addEventListener('keydown', (e) => {
+    if (e.code === 'Space') {
+        e.preventDefault();
+        const spinButton = document.getElementById('spinButton');
+        if (!spinButton.disabled) {
+            spinButton.click();
+        }
+    }
+});
+// 添加音效（如果需要的话）
+function playSound(type) {
+    // 这里可以添加音效
+    // const audio = new Audio(`assets/sounds/${type}.mp3`);
+    // audio.play().catch(() => {}); // 忽略播放错误
+}