用html+js+css实现的战略小游戏

发布于:2025-05-10 ⋅ 阅读:(18) ⋅ 点赞:(0)

效果图:

兄弟们,话不多说,直接上代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="朝鲜战争战略游戏 - 选择阵营,指挥部队,赢得胜利">
    <title>朝鲜战争战略游戏</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

</head>
<body>
    <div id="loading-screen" class="loading-screen" aria-live="polite">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <p id="loading-text">正在准备战场...</p>
        </div>
    </div>

    <!-- 阵营选择界面 -->
    <section id="faction-selection" class="faction-selection" aria-label="阵营选择">
        <h2>Pick your Faction</h2>
        <div class="faction-buttons">
            <button class="faction-button us" data-faction="us" aria-label="选择美国阵营">
                <img src="images/us.png" alt="美国国旗" class="faction-flag">
                <span class="faction-name">US</span>
            </button>
            <button class="faction-button rok" data-faction="rok" aria-label="选择韩国阵营">
                <img src="images/rok.png" alt="韩国国旗" class="faction-flag">
                <span class="faction-name">ROK</span>
            </button>
            <button class="faction-button dprk" data-faction="dprk" aria-label="选择朝鲜阵营">
                <img src="images/dprk.png" alt="朝鲜国旗" class="faction-flag">
                <span class="faction-name">DPRK</span>
            </button>
            <button class="faction-button pla" data-faction="pla" aria-label="选择中国阵营">
                <img src="images/pla.png" alt="中国国旗" class="faction-flag">
                <span class="faction-name">PLA</span>
            </button>
        </div>
    </section>

    <!-- 游戏主界面 -->
    <main id="game-interface" class="game-interface" style="display: none;">
        
        <div id="top-bar" class="top-bar">
            <div class="resource-info">
            </div>
            <div class="turn-info">
                <span>Round: <span id="current-turn">1</span></span>
                <span id="action-points-display">Action Points: -/-</span>
                <span>Faction: <span id="current-faction">-</span></span>
            </div>
            <div class="game-controls-top">
                <button id="pause-button" class="pixel-button top-button" aria-label="暂停">
                    ❚❚
                </button>
                 <button id="dev-mode-toggle" class="pixel-button top-button dev-button" style="font-size: 10px;">Dev</button>
            </div>
        </div>

        <!--包裹地图和侧边栏的容器 -->
        <div class="main-content-area">
            <div id="map-container" class="map-container">
            </div>

            <aside id="sidebar" class="sidebar">
                <div id="selected-unit-info">
                    Select a unit
                </div>
            </aside>
        </div>

        <div id="action-buttons-corner" class="action-buttons-corner">
            <img id="selected-unit-icon" src="images/placeholder.png" alt="选中单位" style="display: none;"> 
            <button id="move-button" class="pixel-button action-button" aria-label="移动单位">
            </button>
            <button id="attack-button" class="pixel-button action-button" aria-label="攻击敌人">
            </button>
            <button id="capture-button" class="pixel-button action-button" aria-label="占领地点">
            </button>
        </div>

        <div id="end-turn-button-corner" class="end-turn-button-corner">
            <button id="end-turn-button" class="pixel-button end-turn-button" aria-label="结束当前回合">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="32px" height="32px">
                    <path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z"/>
                </svg>
            </button>
        </div>

    </main>

    <script src="script.js"></script>
</body>
</html> 


网站公告

今日签到

点亮在社区的每一天
去签到