正在跳转到智能五子棋...
} :root { --primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --primary-solid: #667eea; --secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); --danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%); --bg-primary: #0f0f23; --bg-secondary: #1a1a2e; --bg-tertiary: #16213e; --bg-card: rgba(255, 255, 255, 0.05); --bg-glass: rgba(255, 255, 255, 0.1); --text-primary: #ffffff; --text-secondary: #b8b8d1; --text-muted: #8b8ba7; --board-bg: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%); --board-line: #2d3436; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2); --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.25); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="light"] { --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --bg-card: rgba(255, 255, 255, 0.8); --bg-glass: rgba(255, 255, 255, 0.6); --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --board-line: #374151; } html, body { width: 100%; min-height: 100vh; overflow-x: hidden; } body { background: var(--bg-primary); font-family: 'Inter', 'Noto Sans SC', sans-serif; color: var(--text-primary); line-height: 1.6; transition: var(--transition); position: relative; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%); pointer-events: none; z-index: -1; } .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--bg-glass); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; background: var(--primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .header-controls { display: flex; gap: 1rem; align-items: center; } .theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--bg-card); backdrop-filter: blur(20px); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: var(--transition); box-shadow: var(--shadow-sm); } .theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .main-container { min-height: 100vh; padding: 6rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .game-layout { display: grid; grid-template-columns: 300px auto 300px; gap: 2rem; width: 100%; max-width: 1200px; align-items: start; } @media (max-width: 1024px) { .game-layout { grid-template-columns: 1fr; gap: 1rem; justify-items: center; } .main-container { padding: 5rem 0.5rem 0.5rem; gap: 0.5rem; } } /* 手机端优化 */ @media (max-width: 768px) { .header { padding: 0.5rem 0.75rem; min-height: auto; flex-wrap: wrap; gap: 0.5rem; } .logo { font-size: 1.1rem; } .header-controls { gap: 0.5rem; flex-wrap: wrap; } .theme-toggle { width: 36px; height: 36px; font-size: 1rem; } .game-layout { display: flex; flex-direction: column; width: 100%; max-width: 100vw; padding: 0; gap: 0; } .main-container { padding: 3.5rem 0 0; gap: 0; } } .stats-panel { background: var(--bg-card); backdrop-filter: blur(20px); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.1); width: 100%; max-width: 300px; } @media (max-width: 768px) { .stats-panel { padding: 1rem; border-radius: var(--radius-md); margin: 0.5rem; max-width: calc(100vw - 1rem); } } .user-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .user-section label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-primary); } .user-section input { width: 100%; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-md); background: var(--bg-glass); color: var(--text-primary); font-size: 1rem; margin-bottom: 0.75rem; transition: var(--transition); } .user-section input:focus { outline: none; border-color: var(--primary-solid); box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); } .user-section input::placeholder { color: var(--text-muted); } .btn-small { padding: 0.5rem 1rem; font-size: 0.9rem; width: 100%; } .current-player-stats { margin-bottom: 1.5rem; } .current-player-stats h4 { margin-bottom: 1rem; color: var(--text-primary); font-size: 1.1rem; } .leaderboard { margin-bottom: 1rem; } .leaderboard h4 { margin-bottom: 1rem; color: var(--text-primary); font-size: 1.1rem; } .leaderboard-list { display: flex; flex-direction: column; gap: 0.5rem; } .leaderboard-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-glass); border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition); } .leaderboard-item:hover { background: rgba(255, 255, 255, 0.1); } .leaderboard-rank { font-weight: 700; color: var(--primary-solid); min-width: 30px; } .leaderboard-name { flex: 1; margin-left: 0.5rem; color: var(--text-primary); font-weight: 500; } .leaderboard-stats { font-size: 0.9rem; color: var(--text-secondary); } .data-notice { text-align: center; padding: 1rem; background: rgba(255, 193, 7, 0.1); border-radius: var(--radius-md); border: 1px solid rgba(255, 193, 7, 0.3); } .data-notice small { color: var(--text-secondary); font-size: 0.85rem; } /* 登录注册界面样式 */ .auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 15, 35, 0.95); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; z-index: 2000; } .auth-modal { background: var(--bg-card); backdrop-filter: blur(20px); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-xl); border: 1px solid rgba(255, 255, 255, 0.1); width: 90%; max-width: 400px; animation: authModalIn 0.3s ease-out; } @keyframes authModalIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .auth-modal h2 { text-align: center; margin-bottom: 1.5rem; background: var(--primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-input { width: 100%; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-md); background: var(--bg-glass); color: var(--text-primary); font-size: 1rem; transition: var(--transition); } .auth-input:focus { outline: none; border-color: var(--primary-solid); box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); } .auth-input::placeholder { color: var(--text-muted); } .auth-buttons { display: flex; gap: 1rem; margin-top: 1rem; } .auth-switch { text-align: center; margin-top: 1rem; color: var(--text-secondary); } .auth-switch button { background: none; border: none; color: var(--primary-solid); cursor: pointer; text-decoration: underline; font-size: inherit; } .user-info { display: flex; align-items: center; gap: 1rem; background: var(--bg-glass); padding: 0.75rem 1rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1rem; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; } .user-details { flex: 1; } .user-name { font-weight: 600; color: var(--text-primary); } .logout-btn { padding: 0.5rem 1rem; font-size: 0.9rem; background: var(--danger); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } .logout-btn:hover { opacity: 0.8; } .game-board-section { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .control-panel { background: var(--bg-card); backdrop-filter: blur(20px); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 2rem; min-width: 320px; max-width: 400px; } .control-section { display: flex; flex-direction: column; gap: 1rem; } .control-section h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .radio-group { display: flex; gap: 1rem; flex-wrap: wrap; } .radio-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: var(--radius-md); background: var(--bg-glass); border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition); font-size: 0.9rem; } .radio-option:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .radio-option input[type="radio"] { margin: 0; width: 16px; height: 16px; } .slider-container { display: flex; flex-direction: column; gap: 0.5rem; } .slider-wrapper { display: flex; align-items: center; gap: 1rem; } input[type="range"] { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.2); border-radius: 3px; outline: none; transition: var(--transition); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--primary-solid); border-radius: 50%; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-sm); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--primary-solid); border-radius: 50%; cursor: pointer; border: none; box-shadow: var(--shadow-sm); } .difficulty-value { min-width: 20px; text-align: center; font-weight: 600; color: var(--primary-solid); } .btn { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; color: white; text-transform: uppercase; letter-spacing: 0.5px; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn-primary { background: var(--primary); box-shadow: var(--shadow-md); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-success { background: var(--success); box-shadow: var(--shadow-md); } .btn-success:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } .game-status { background: var(--bg-card); backdrop-filter: blur(20px); border-radius: var(--radius-lg); padding: 1rem 1.5rem; box-shadow: var(--shadow-md); border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; } .status-text { font-size: 1.1rem; font-weight: 600; background: var(--primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .status-subtitle { font-size: 0.9rem; color: var(--text-secondary); } @media (max-width: 768px) { .game-status { padding: 0.75rem 1rem; margin: 0.5rem; border-radius: var(--radius-md); } .status-text { font-size: 1rem; } .status-subtitle { font-size: 0.8rem; } } .board-container { position: relative; width: min(85vw, 500px); aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); transition: var(--transition); background: var(--board-bg); border: 2px solid rgba(255, 255, 255, 0.1); } .board-container:hover { transform: translateY(-2px); box-shadow: 0 15px 60px rgba(0, 0, 0, 0.25); } @media (max-width: 768px) { .board-container { width: calc(100vw - 1rem); max-width: 400px; margin: 0.5rem; border-radius: var(--radius-md); } .board-container:hover { transform: none; } } .game-canvas { width: 100%; height: 100%; cursor: pointer; transition: var(--transition); border-radius: var(--radius-xl); } .win-overlay { position: absolute; inset: 0; background: rgba(15, 15, 35, 0.95); backdrop-filter: blur(20px); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border-radius: var(--radius-xl); animation: winAnimation 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; } .win-text { font-size: clamp(2rem, 6vw, 4rem); font-weight: 700; background: var(--primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; line-height: 1.2; } .win-subtitle { font-size: 1.2rem; color: var(--text-secondary); text-align: center; } @keyframes winAnimation { 0% { opacity: 0; transform: scale(0.8) rotate(-5deg); } 50% { transform: scale(1.05) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .stat-item { background: var(--bg-glass); padding: 1rem; border-radius: var(--radius-md); text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); } .stat-value { font-size: 1.5rem; font-weight: 700; background: var(--primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.25rem; } .description-card { background: var(--bg-card); backdrop-filter: blur(20px); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.1); max-width: 600px; margin: 2rem auto; text-align: center; } .description-card h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; background: var(--primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .description-card p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem; } .feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .feature-item { background: var(--bg-glass); padding: 1rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); text-align: left; } .feature-icon { font-size: 1.5rem; margin-bottom: 0.5rem; } .feature-title { font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary); } .feature-desc { font-size: 0.9rem; color: var(--text-secondary); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } .animate-fade-in-scale { animation: fadeInScale 0.4s ease-out forwards; } .animate-pulse { animation: pulse 2s infinite; } /* 响应式设计 */ @media (max-width: 768px) { .header { padding: 1rem; } .main-container { padding: 5rem 1rem 1rem; } .control-panel, .stats-panel { min-width: 0; max-width: 100%; } .radio-group { flex-direction: column; gap: 0.5rem; } .stats-grid { grid-template-columns: 1fr; } .feature-list { grid-template-columns: 1fr; } } @media (max-width: 480px) { .logo { font-size: 1.2rem; } .btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; } .win-text { font-size: 2rem; } } /* 滚动条样式 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--primary-solid); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #5a67d8; }

登录账号

还没有账号？

🏆 游戏统计

设置完毕后点击"开始游戏"
选择游戏模式和难度

🎮 游戏模式

⚫⚪ 执子选择

🧠 AI难度

3
难度越高，AI思考时间越长

🎮 游戏特色

体验最先进的五子棋AI对战系统，享受策略与智慧的完美结合！支持多用户对战，所有数据安全存储在您的浏览器本地。

🧠
智能AI
采用Minimax算法，提供5个难度等级
👥
多用户支持
支持多个玩家名称，独立统计战绩
🏆
排行榜系统
实时排行榜，展示最强玩家
💾
本地存储
数据存储在浏览器缓存，安全可靠
🎨
精美界面
现代化设计，支持深色/浅色主题
📱
响应式
完美适配手机、平板、电脑
💡 数据说明: 所有游戏数据（玩家统计、排行榜等）均存储在您的浏览器本地缓存中， 不会上传到服务器。清除浏览器数据会导致游戏记录丢失，请注意备份重要数据。