随机奥特曼大战怪兽的游戏，随机奥特曼大战怪兽，一场全靠运气的光之对决

这是为您生成的一个“奥特曼大战怪兽”游戏的HTML文件，它是一款简单的回合制对战游戏，您可以通过点击按钮来攻击怪兽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">奥特曼大战怪兽 · 回合制</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
        }
        body {
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(145deg, #0b0f1c, #1a1f2e);
            font-family: 'Segoe UI', 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }
        .game-container {
            background: rgba(10, 20, 30, 0.8);
            backdrop-filter: blur(8px);
            border: 2px solid #3e5b7e;
            border-radius: 42px;
            padding: 24px 30px 32px;
            box-shadow: 0 0 40px rgba(0, 180, 255, 0.3), inset 0 0 20px rgba(0, 200, 255, 0.2);
            max-width: 900px;
            width: 100%;
        }
        h1 {
            text-align: center;
            margin: 0 0 12px 0;
            font-size: 2.4rem;
            letter-spacing: 6px;
            color: #b3e9ff;
            text-shadow: 0 0 10px #00a6ff, 0 0 20px #0055ff, 0 0 30px #0022aa;
            font-weight: 800;
            word-break: break-word;
        }
        .arena {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin: 10px 0 20px;
            position: relative;
        }
        .fighter {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.1s ease;
        }
        .fighter.attack-shake {
            animation: shake 0.3s ease;
        }
        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-12px); }
            50% { transform: translateX(12px); }
            75% { transform: translateX(-6px); }
            100% { transform: translateX(0); }
        }
        .fighter .sprite {
            font-size: 6rem;
            line-height: 1;
            filter: drop-shadow(0 0 12px currentColor);
            transition: all 0.2s;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .fighter .name {
            font-size: 1.6rem;
            font-weight: bold;
            letter-spacing: 2px;
            margin-top: 4px;
            text-shadow: 0 0 8px currentColor;
        }
        .ultraman .sprite {
            color: #ff4655;
            text-shadow: 0 0 20px #ff3b3b, 0 0 40px #a50000;
        }
        .ultraman .name {
            color: #ff7a7a;
        }
        .monster .sprite {
            color: #b886ff;
            text-shadow: 0 0 20px #a155ff, 0 0 40px #4a00a3;
        }
        .monster .name {
            color: #d9a8ff;
        }
        .hp-bar-bg {
            width: 100%;
            max-width: 190px;
            height: 16px;
            background: #1e2a3a;
            border-radius: 20px;
            margin: 10px 0 4px;
            border: 1px solid #3b5c7a;
            overflow: hidden;
            box-shadow: inset 0 2px 6px #00000080;
        }
        .hp-fill {
            height: 100%;
            width: 100%;
            border-radius: 20px;
            transition: width 0.3s ease;
        }
        .ultraman .hp-fill {
            background: linear-gradient(90deg, #ff3a3a, #ff7a2f);
            box-shadow: 0 0 12px #ff5e5e;
        }
        .monster .hp-fill {
            background: linear-gradient(90deg, #af5fff, #6f2dff);
            box-shadow: 0 0 12px #b77aff;
        }
        .hp-text {
            font-size: 0.9rem;
            color: #b8d4ff;
            letter-spacing: 1px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .versus {
            font-size: 2.8rem;
            font-weight: 900;
            color: #ffe484;
            text-shadow: 0 0 20px #ffaa00, 0 0 40px #ff6600;
            padding: 0 8px;
            animation: pulse 1.5s infinite alternate;
        }
        @keyframes pulse {
            from { opacity: 0.7; transform: scale(0.96); }
            to { opacity: 1; transform: scale(1.08); }
        }
        .log-panel {
            background: #0b131f;
            border: 2px solid #2f4b6e;
            border-radius: 30px;
            padding: 16px 18px;
            min-height: 92px;
            max-height: 110px;
            overflow-y: auto;
            margin: 20px 0 18px;
            color: #b7d9ff;
            font-size: 1rem;
            font-weight: 500;
            box-shadow: inset 0 0 25px #00000066, 0 0 18px #003c66;
            scrollbar-width: thin;
            scrollbar-color: #2f6f9f #0b131f;
        }
        .log-panel p {
            margin: 6px 0;
            padding-left: 10px;
            border-left: 4px solid #2f8fff;
            line-height: 1.4;
            animation: fadeIn 0.3s;
        }
        .log-panel p:last-child {
            border-left-color: #ffd966;
            color: #fff5cc;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px;
            margin-top: 12px;
        }
        .btn {
            background: #102433;
            border: 2px solid #3a6d9c;
            color: #ccedff;
            padding: 14px 32px;
            font-size: 1.3rem;
            font-weight: bold;
            border-radius: 60px;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.15s;
            box-shadow: 0 0 16px #00448888, inset 0 0 8px #0055aa;
            text-shadow: 0 0 12px #0099ff;
            flex: 0 1 auto;
            min-width: 170px;
        }
        .btn:active {
            transform: scale(0.94);
            background: #1b3a55;
            box-shadow: 0 0 26px #0099ff, inset 0 0 16px #00a6ff;
        }
        .btn:disabled {
            opacity: 0.45;
            transform: scale(0.96);
            cursor: not-allowed;
            box-shadow: 0 0 6px #222;
            border-color: #3b4f61;
            text-shadow: none;
        }
        .btn-attack {
            background: #3b0e0e;
            border-color: #ff5555;
            color: #ffe0e0;
            text-shadow: 0 0 16px #ff3b3b;
            box-shadow: 0 0 24px #ff3a3a66, inset 0 0 12px #ff0000;
        }
        .btn-attack:active {
            background: #721111;
        }
        .reset-btn {
            background: #1d2a38;
            border-color: #8f9eb0;
            color: #d9e6ff;
            font-size: 1.1rem;
            padding: 14px 24px;
            min-width: 120px;
            box-shadow: 0 0 12px #88888844;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            color: #5f7f9c;
            font-size: 0.9rem;
            padding: 0 6px;
        }
        .turn-indicator {
            font-weight: bold;
            color: #ffd966;
            text-shadow: 0 0 8px #ffaa00;
            letter-spacing: 1px;
        }
        /* 响应式 */
        @media (max-width: 650px) {
            .game-container { padding: 16px; }
            h1 { font-size: 1.8rem; letter-spacing: 2px; }
            .fighter .sprite { font-size: 4rem; min-height: 80px; }
            .fighter .name { font-size: 1.2rem; }
            .versus { font-size: 2rem; }
            .btn { padding: 10px 16px; font-size: 1rem; min-width: 130px; }
            .log-panel { font-size: 0.9rem; padding: 12px; }
        }
    </style>
</head>
<body>
<div class="game-container">
    <h1>⚡ 奥特曼 大战 怪兽 ⚡</h1>
    <div class="arena">
        <!-- 奥特曼 -->
        <div class="fighter ultraman" id="ultramanFighter">
            <div class="sprite" id="ultramanSprite">🦸‍♂️</div>
            <div class="name">奥特曼</div>
            <div class="hp-bar-bg">
                <div class="hp-fill" id="ultramanHpFill" style="width: 100%"></div>
            </div>
            <div class="hp-text" id="ultramanHpText">HP 100 / 100</div>
        </div>
        <div class="versus">VS</div>
        <!-- 怪兽 -->
        <div class="fighter monster" id="monsterFighter">
            <div class="sprite" id="monsterSprite">👹</div>
            <div class="name">怪兽</div>
            <div class="hp-bar-bg">
                <div class="hp-fill" id="monsterHpFill" style="width: 100%"></div>
            </div>
            <div class="hp-text" id="monsterHpText">HP 100 / 100</div>
        </div>
    </div>
    <!-- 战斗日志 -->
    <div class="log-panel" id="logPanel">
        <p>⚔️ 战斗开始！奥特曼 vs 怪兽</p>
        <p>💡 点击【奥特曼攻击】发起进攻</p>
    </div>
    <!-- 操作按钮 -->
    <div class="controls">
        <button class="btn btn-attack" id="attackBtn" autofocus>⚡ 奥特曼攻击</button>
        <button class="btn reset-btn" id="resetBtn">🔄 重新开始</button>
    </div>
    <div class="footer">
        <span class="turn-indicator" id="turnIndicator">▶ 你的回合</span>
        <span>✨ 光之战士</span>
    </div>
</div>
<script>
    (function() {
        // ---------- 游戏状态 ----------
        const MAX_HP = 100;
        let ultramanHP = MAX_HP;
        let monsterHP = MAX_HP;
        let gameOver = false;
        // 控制回合, 防止连点 (玩家回合后短暂锁定)
        let playerTurnLock = false;   // 是否允许攻击 (true 表示可以攻击)
        let monsterTurnTimeout = null;
        // DOM 元素
        const ultramanHpFill = document.getElementById('ultramanHpFill');
        const ultramanHpText = document.getElementById('ultramanHpText');
        const monsterHpFill = document.getElementById('monsterHpFill');
        const monsterHpText = document.getElementById('monsterHpText');
        const logPanel = document.getElementById('logPanel');
        const attackBtn = document.getElementById('attackBtn');
        const resetBtn = document.getElementById('resetBtn');
        const turnIndicator = document.getElementById('turnIndicator');
        const ultramanFighter = document.getElementById('ultramanFighter');
        const monsterFighter = document.getElementById('monsterFighter');
        const ultramanSprite = document.getElementById('ultramanSprite');
        const monsterSprite = document.getElementById('monsterSprite');
        // ---------- 工具函数 ----------
        function addLog(message) {
            const p = document.createElement('p');
            p.textContent = message;
            logPanel.appendChild(p);
            // 自动滚动到底部
            logPanel.scrollTop = logPanel.scrollHeight;
            // 如果日志太多，保留最近20条，避免占用内存
            if (logPanel.children.length > 20) {
                logPanel.removeChild(logPanel.children[0]);
            }
        }
        // 更新血条和文字
        function updateHealthBars() {
            // 奥特曼
            const ultramanPercent = Math.max(0, (ultramanHP / MAX_HP) * 100);
            ultramanHpFill.style.width = ultramanPercent + '%';
            ultramanHpText.textContent = `HP ${ultramanHP} / ${MAX_HP}`;
            // 怪兽
            const monsterPercent = Math.max(0, (monsterHP / MAX_HP) * 100);
            monsterHpFill.style.width = monsterPercent + '%';
            monsterHpText.textContent = `HP ${monsterHP} / ${MAX_HP}`;
            // 如果怪兽死亡，也可以视觉上隐晦一点，但逻辑会在攻击后处理
        }
        // 检查游戏结束, 返回 true 如果游戏已结束
        function checkGameOver() {
            if (ultramanHP <= 0) {
                ultramanHP = 0;   // 防止负数显示
                updateHealthBars();
                addLog('💀 奥特曼倒下了... 怪兽毁灭了城市。');
                gameOver = true;
                attackBtn.disabled = true;
                turnIndicator.textContent = '⛔ 游戏结束 · 怪兽胜利';
                return true;
            }
            if (monsterHP <= 0) {
                monsterHP = 0;
                updateHealthBars();
                addLog('🎉 怪兽被消灭了！奥特曼守护了地球！');
                gameOver = true;
                attackBtn.disabled = true;
                turnIndicator.textContent = '🏆 游戏结束 · 奥特曼胜利';
                return true;
            }
            return false;
        }
        // 重置所有状态
        function resetGame() {
            // 清除怪物回合的计时器
            if (monsterTurnTimeout) {
                clearTimeout(monsterTurnTimeout);
                monsterTurnTimeout = null;
            }
            ultramanHP = MAX_HP;
            monsterHP = MAX_HP;
            gameOver = false;
            playerTurnLock = false;   // 允许攻击
            updateHealthBars();
            // 启用攻击按钮
            attackBtn.disabled = false;
            turnIndicator.textContent = '▶ 你的回合';
            // 清空日志
            logPanel.innerHTML = '';
            addLog('⚔️ 战斗开始！奥特曼 vs 怪兽');
            addLog('💡 点击【奥特曼攻击】发起进攻');
            // 移除任何闪烁效果
            ultramanFighter.classList.remove('attack-shake');
            monsterFighter.classList.remove('attack-shake');
            // 恢复表情符号（如果之前改变了）
            ultramanSprite.textContent = '🦸‍♂️';
            monsterSprite.textContent = '👹';
        }
        // 震动特效 (对某个fighter容器)
        function shakeElement(element) {
            element.classList.add('attack-shake');
            setTimeout(() => {
                element.classList.remove('attack-shake');
            }, 300);
        }
        // ---------- 玩家攻击 ----------
        function playerAttack() {
            // 各种条件检查：游戏结束 或者 玩家回合锁定 或者 怪物 HP 为 0
            if (gameOver) return;
            if (playerTurnLock) return;   // 正在怪物回合 / 动画中
            if (monsterHP <= 0) return;   // 已经死了 (但逻辑上gameOver应该为true)
            if (ultramanHP <= 0) return;
            // 锁定玩家回合，防止连点
            playerTurnLock = true;
            attackBtn.disabled = true;
            turnIndicator.textContent = '⏳ 怪兽反击中...';
            // 1. 奥特曼攻击怪兽
            const damage = Math.floor(Math.random() * 15) + 12; // 12~26 伤害
            monsterHP = Math.max(0, monsterHP - damage);
            updateHealthBars();
            // 震动怪兽
            shakeElement(monsterFighter);
            // 动态改变怪兽表情
            if (monsterHP > 0) {
                monsterSprite.textContent = '😡';
                setTimeout(() => {
                    if (monsterHP > 0 && !gameOver) monsterSprite.textContent = '👹';
                }, 500);
            } else {
                monsterSprite.textContent = '💀';
            }
            addLog(`🦸‍♂️ 奥特曼发出斯派修姆光线！造成 ${damage} 点伤害`);
            // 检查怪兽是否死亡
            if (monsterHP <= 0) {
                // 游戏结束 - 奥特曼胜利
                checkGameOver();  // 这会设置gameOver和按钮状态
                playerTurnLock = false;  // 解锁但游戏已经结束
                // 确保按钮状态正确 (checkGameOver已禁用)
                if (monsterHP <= 0) {
                    monsterSprite.textContent = '💀';
                }
                return;
            }
            // 如果怪兽没死, 怪兽反击 (加一点延迟，有点动画感)
            if (monsterTurnTimeout) clearTimeout(monsterTurnTimeout);
            monsterTurnTimeout = setTimeout(() => {
                monsterTurnTimeout = null;
                // 再次检查游戏是否因为某些原因结束 (比如应该不会)
                if (gameOver || ultramanHP <= 0) {
                    playerTurnLock = false;
                    return;
                }
                // 2. 怪兽反击
                const monsterDamage = Math.floor(Math.random() * 16) + 10; // 10~25伤害
                ultramanHP = Math.max(0, ultramanHP - monsterDamage);
                updateHealthBars();
                // 震动奥特曼
                shakeElement(ultramanFighter);
                // 奥特曼表情变化
                if (ultramanHP > 0) {
                    ultramanSprite.textContent = '😵';
                    setTimeout(() => {
                        if (ultramanHP > 0 && !gameOver) ultramanSprite.textContent = '🦸‍♂️';
                    }, 500);
                } else {
                    ultramanSprite.textContent = '💔';
                }
                addLog(`👹 怪兽发动凶恶攻击！造成 ${monsterDamage} 点伤害`);
                // 检查奥特曼是否死亡
                if (ultramanHP <= 0) {
                    // 游戏结束 - 怪兽胜利
                    ultramanSprite.textContent = '💔';
                    checkGameOver();  // 设置gameOver和禁用按钮
                    playerTurnLock = false;  // 游戏结束解除锁定但按钮已禁
                    turnIndicator.textContent = '⛔ 游戏结束 · 怪兽胜利';
                    return;
                }
                // 没结束：解锁玩家回合
                playerTurnLock = false;
                if (!gameOver) {
                    attackBtn.disabled = false;
                    turnIndicator.textContent = '▶ 你的回合';
                }
                // 如果怪兽hp归零(极端情况 不会发生)
                if (monsterHP <= 0) {
                    checkGameOver();
                }
            }, 400); // 稍微延迟，让玩家看到第一击
        }
        // ---------- 事件绑定 ----------
        attackBtn.addEventListener('click', playerAttack);
        resetBtn.addEventListener('click', function() {
            resetGame();
        });
        // 初始化血条
        updateHealthBars();
        // 额外：当游戏结束或者重置时清理计时器 (reset已处理)
        // 防止页面卸载时有未执行的定时器
        window.addEventListener('beforeunload', function() {
            if (monsterTurnTimeout) {
                clearTimeout(monsterTurnTimeout);
                monsterTurnTimeout = null;
            }
        });
        // 初始时如果怪兽表情被更改，恢复一下 (以防刷新)
        // 允许按下回车攻击? 为了趣味可以添加，但非必须
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !attackBtn.disabled && !gameOver && !playerTurnLock) {
                e.preventDefault();
                playerAttack();
            }
        });
        // 简单启动日志
        console.log('奥特曼大战怪兽 已启动！');
    })();
</script>
</body>
</html>

游戏机制与体验

您将扮演奥特曼,与怪兽进行一场回合制的较量，游戏的核心是简单的伤害计算与回合交替，但通过视觉和文字反馈带来了不错的沉浸感。

• 战斗流程：游戏采用回合制，您点击“奥特曼攻击”按钮后，奥特曼会先对怪兽造成随机伤害，如果怪兽未被击败，它会立即进行反击，双方的生命值（HP）会实时更新在血条上。
• 交互与反馈：每次攻击都会在日志面板显示具体伤害数值，攻击时，被击中的一方会有震动动画，并且表情符号也会暂时改变（奥特曼受伤时会变成😵），让战斗过程更生动。
• 游戏状态：界面底部会清晰显示当前是“你的回合”还是“怪兽反击中”，当一方生命值归零时，游戏会结束并显示胜利者，您可以随时点击“重新开始”按钮开始新一局。