作业一 -- 文字闯关游戏

72 阅读1分钟
BOSS闯关游戏 body { font-family: Arial; max-width: 600px; margin: 20px auto } .status { padding: 10px; background: #f0f0f0; margin-bottom: 20px } button { padding: 8px 15px; margin-right: 10px } .log { margin-top: 20px; border-top: 1px solid #ccc; padding-top: 10px }

1

玩家血量: 10
BOSS血量: 15
<div class="actions">
    <button onclick="attack()">攻击</button>
    <button onclick="defend()">防御</button>
</div>

<div class="log" id="battleLog"></div>

<script>
    let currentLevel = 1;
    let playerHp = 10;
    let bossHp = 15;
    let isDefending = false;

    function updateStatus() {
        document.getElementById('level').textContent = currentLevel;
        document.getElementById('playerHp').textContent = playerHp;
        document.getElementById('bossHp').textContent = bossHp;
    }

    function bossAttack() {
        const baseDamage = 2 + currentLevel;
        const damage = isDefending ? 
            Math.floor(baseDamage * 0.5) : 
            baseDamage + Math.floor(Math.random() * 3);
        
        playerHp -= damage;
        addLog(`BOSS造成 ${damage} 点伤害!`);
        isDefending = false;
    }

    function checkGameOver() {
        if (playerHp <= 0) {
            addLog('游戏结束!你被BOSS击败了');
            document.querySelector('.actions').innerHTML = '';
            return true;
        }
        if (bossHp <= 0) {
            currentLevel++;
            bossHp = 15 + currentLevel * 5;
            addLog(`进入第 ${currentLevel} 关!新BOSS出现`);
            updateStatus();
            return true;
        }
        return false;
    }

    function attack() {
        const damage = 3 + Math.floor(Math.random() * 3);
        bossHp -= damage;
        addLog(`你对BOSS造成 ${damage} 点伤害`);
        updateStatus();
        if (!checkGameOver()) setTimeout(bossAttack, 100);
        checkGameOver();
    }

    function defend() {
        isDefending = true;
        addLog('你采取了防御姿态');
        setTimeout(bossAttack, 100);
    }

    function addLog(text) {
        const log = document.createElement('div');
        log.textContent = text;
        document.getElementById('battleLog').prepend(log);
    }
</script>

1.png

2.png