井字棋科技风-人机对战edit icon

创建者：
用户fkxIv10d
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
BUG反馈
index.html
style.css
app.js
index.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 粒子庆祝层 -->
    <div class="particles-container" id="particlesContainer"></div>

    <div class="container">
        <!-- 顶部工具栏 -->
        <div class="toolbar">
            <h1 class="title" id="title">井 字 棋</h1>
            <div class="toolbar-actions">
                <!-- 主题切换 -->
                <button class="icon-btn" id="themeBtn" title="切换主题">
                    <span id="themeIcon">◐</span>
                </button>
                <!-- 音效开关 -->
                <button class="icon-btn" id="soundBtn" title="音效开关">
                    <span id="soundIcon">♪</span>
                </button>
                <!-- 游戏历史 -->
                <button class="icon-btn" id="historyBtn" title="游戏历史">
                    ▤
                </button>
            </div>
        </div>

        <!-- 模式选择 -->
        <div class="mode-selector" id="modeSelector">
            <button class="mode-btn active" data-mode="pvp">👥 双人对战</button>
            <button class="mode-btn" data-mode="pve">🤖 人机对战</button>
        </div>

        <!-- 难度选择（仅人机模式） -->
        <div class="difficulty-selector" id="difficultySelector">
            <button class="diff-btn" data-diff="easy">😊 简单</button>
            <button class="diff-btn active" data-diff="medium">🤔 中等</button>
            <button class="diff-btn" data-diff="hard">😈 困难</button>
        </div>

        <!-- 得分板 -->
        <div class="scoreboard">
            <div class="player-score" id="playerX-score">
                <span class="symbol">X</span>
                <span class="player-label">玩家</span>
                <span class="score-value" id="scoreX">0</span>
            </div>
            <div class="draw-score">
                <span>平局</span>
                <span class="score-value" id="scoreDraw">0</span>
            </div>
            <div class="player-score" id="playerO-score">
                <span class="symbol">O</span>
                <span class="player-label">玩家</span>
                <span class="score-value" id="scoreO">0</span>
            </div>
        </div>

        <!-- 计时器和回合信息 -->
        <div class="info-bar">
            <div class="timer" id="timer">⏱️ 00:00</div>
            <div class="turn-indicator" id="turnIndicator">
                <span class="turn-symbol">X</span> 的回合
            </div>
            <div class="move-count">第 <span id="moveCount">1</span> 步</div>
        </div>

        <!-- 游戏棋盘 -->
        <div class="board" id="board">
            <span class="corner-deco top-right"></span>
            <span class="corner-deco bottom-left"></span>
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>

        <!-- 状态消息 -->
        <div class="message" id="message"></div>

        <!-- 控制按钮 -->
        <div class="controls">
            <button class="btn btn-undo" id="undoBtn" title="悔棋 (Ctrl+Z)">↩ 悔棋</button>
            <button class="btn btn-restart" id="restartBtn">🔄 重新开始</button>
            <button class="btn btn-reset" id="resetBtn">🗑 重置比分</button>
        </div>
    </div>

    <!-- 游戏历史侧面板 -->
    <div class="history-panel" id="historyPanel">
        <div class="history-header">
            <h3>📋 游戏历史</h3>
            <button class="close-btn" id="closeHistory">✕</button>
        </div>
        <div class="history-list" id="historyList"></div>
        <div class="history-footer">
            <button class="btn btn-clear-history" id="clearHistory">清空历史</button>
        </div>
    </div>
    <div class="overlay" id="overlay"></div>

    <script src="app.js"></script>
</body>
</html>
编辑器加载中
预览
控制台