小飞侠编程-Python-sdfgfcgvhjkl

作者：王骏贤 更新时间：2025-12-07 18:09 浏览：25次 点赞：0次 热度：20

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双人合作打BOSS</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #111;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 20px;
            width: 100%;
            max-width: 800px;
        }
        
        h1 {
            color: #ff4757;
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(255, 71, 87, 0.7);
        }
        
        .game-container {
            position: relative;
            width: 800px;
            height: 500px;
            background-color: #222;
            border: 3px solid #333;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        
        #gameCanvas {
            display: block;
            background-color: #0a0a1a;
        }
        
        .ui-container {
            display: flex;
            justify-content: space-between;
            width: 800px;
            margin-bottom: 15px;
        }
        
        .player-stats {
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px 15px;
            border-radius: 8px;
            width: 48%;
            border: 2px solid;
        }
        
        .player1-stats {
            border-color: #3498db;
        }
        
        .player2-stats {
            border-color: #2ecc71;
        }
        
        .player-title {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 1.2rem;
        }
        
        .player1-title {
            color: #3498db;
        }
        
        .player2-title {
            color: #2ecc71;
        }
        
        .health-bar, .energy-bar {
            height: 20px;
            background-color: #333;
            border-radius: 10px;
            margin-bottom: 8px;
            overflow: hidden;
        }
        
        .health-fill {
            height: 100%;
            background-color: #e74c3c;
            border-radius: 10px;
            transition: width 0.3s;
        }
        
        .energy-fill {
            height: 100%;
            background-color: #f39c12;
            border-radius: 10px;
            transition: width 0.3s;
        }
        
        .lives {
            display: flex;
            margin-top: 5px;
        }
        
        .life {
            width: 20px;
            height: 20px;
            background-color: #e74c3c;
            margin-right: 5px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
        }
        
        .controls {
            width: 800px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        
        .controls h3 {
            color: #9b59b6;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .control-group {
            display: flex;
            justify-content: space-between;
        }
        
        .control-item {
            text-align: center;
        }
        
        .key {
            display: inline-block;
            padding: 5px 10px;
            background-color: #444;
            border-radius: 5px;
            margin: 0 3px;
            font-weight: bold;
            border-bottom: 3px solid #222;
        }
        
        .boss-info {
            width: 800px;
            background-color: rgba(139, 0, 0, 0.7);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 15px;
            border: 2px solid #8b0000;
        }
        
        .boss-name {
            color: #ff6348;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .boss-health {
            height: 25px;
            background-color: #333;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .boss-health-fill {
            height: 100%;
            background: linear-gradient(to right, #ff0000, #ff4500);
            border-radius: 12px;
            transition: width 0.5s;
        }
        
        .buttons {
            display: flex;
            gap: 15px;
        }
        
        button {
            padding: 12px 25px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
        }
        
        button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }
        
        #startBtn {
            background-color: #2ecc71;
        }
        
        #startBtn:hover {
            background-color: #27ae60;
        }
        
        #resetBtn {
            background-color: #e74c3c;
        }
        
        #resetBtn:hover {
            background-color: #c0392b;
        }
        
        .game-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.9);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            z-index: 10;
            display: none;
            border: 3px solid #ff4757;
            max-width: 80%;
        }
        
        .game-message h2 {
            color: #ff4757;
            margin-bottom: 15px;
            font-size: 2rem;
        }
        
        .game-message p {
            margin-bottom: 20px;
            font-size: 1.2rem;
            line-height: 1.5;
        }
        
        .instructions {
            width: 800px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 0.9rem;
            line-height: 1.5;
            color: #aaa;
        }
        
        .instructions h3 {
            color: #9b59b6;
            margin-bottom: 10px;
        }
        
        .skill-info {
            color: #f39c12;
            font-weight: bold;
            margin-top: 5px;
        }
        
        @media (max-width: 850px) {
            .game-container, .ui-container, .controls, .boss-info, .instructions {
                width: 95%;
            }
            
            .game-container {
                height: 400px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>双人合作打BOSS</h1>
        <p>合作击败三个BOSS，使用技能，互相救援！</p>
    </header>
    
    <div class="ui-container">
        <div class="player-stats player1-stats">
            <div class="player-title player1-title">玩家1 (蓝色)</div>
            <div class="health-bar">
                <div id="player1Health" class="health-fill" style="width: 100%"></div>
            </div>
            <div>能量条:</div>
            <div class="energy-bar">
                <div id="player1Energy" class="energy-fill" style="width: 0%"></div>
            </div>
            <div class="lives">
                <div class="life">❤️</div>
                <div class="life">❤️</div>
                <div class="life">❤️</div>
            </div>
            <div class="skill-info">按E释放技能</div>
        </div>
        
        <div class="player-stats player2-stats">
            <div class="player-title player2-title">玩家2 (绿色)</div>
            <div class="health-bar">
                <div id="player2Health" class="health-fill" style="width: 100%"></div>
            </div>
            <div>能量条:</div>
            <div class="energy-bar">
                <div id="player2Energy" class="energy-fill" style="width: 0%"></div>
            </div>
            <div class="lives">
                <div class="life">❤️</div>
                <div class="life">❤️</div>
                <div class="life">❤️</div>
            </div>
            <div class="skill-info">按/键释放技能</div>
        </div>
    </div>
    
    <div class="boss-info">
        <div class="boss-name" id="bossName">BOSS 1: 巨眼魔</div>
        <div class="boss-health">
            <div id="bossHealth" class="boss-health-fill" style="width: 100%"></div>
        </div>
        <div id="bossPhase" style="margin-top: 5px;">第一阶段：追踪弹幕</div>
    </div>
    
    <div class="game-container">
        <canvas id="gameCanvas" width="800" height="500"></canvas>
        
        <div id="gameMessage" class="game-message">
            <h2 id="messageTitle">游戏开始！</h2>
            <p id="messageText">击败所有三个BOSS取得胜利！</p>
            <button id="startBtn">开始游戏</button>
        </div>
    </div>
    
    <div class="controls">
        <h3>控制说明</h3>
        <div class="control-group">
            <div class="control-item">
                <div class="player-title player1-title">玩家1</div>
                <p>移动: <span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span></p>
                <p>射击: <span class="key">空格</span></p>
                <p>技能: <span class="key">E</span></p>
                <p>救援: 靠近倒地玩家按<span class="key">F</span></p>
            </div>
            
            <div class="control-item">
                <div class="player-title player2-title">玩家2</div>
                <p>移动: <span class="key">↑</span><span class="key">↓</span><span class="key">←</span><span class="key">→</span></p>
                <p>射击: <span class="key">回车</span></p>
                <p>技能: <span class="key">/</span></p>
                <p>救援: 靠近倒地玩家按<span class="key">.</span></p>
            </div>
        </div>
    </div>
    
    <div class="buttons">
        <button id="resetBtn">重新开始</button>
    </div>
    
    <div class="instructions">
        <h3>游戏规则</h3>
        <p>1. 每个玩家有3条命，被BOSS击中会失去生命值，生命值归零会倒地</p>
        <p>2. 倒地玩家可以被另一名玩家救援（靠近按救援键）</p>
        <p>3. 攻击BOSS会积累能量，能量满后可以释放强力技能</p>
        <p>4. 击败当前BOSS后会出现下一个更强的BOSS</p>
        <p>5. 三个BOSS全部击败即可获胜，所有玩家生命耗尽则游戏失败</p>
    </div>