用html，js和layui写一个简单的点击打怪小游戏

2023-12-28 14:47:00

介绍：

? ? 一个简单的打怪小游戏，点击开始游戏后，出现攻击按钮，击败怪物后可以选择继续下一关和结束游戏。

? ? 继续下一个怪兽的血量会增加5点，攻击按钮会随机变色。

效果图：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打怪</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<style>
/* 添加样式以中心布局两个游戏并增加一些间距 */
.game-container {
  text-align: center;
  margin: 5% auto;
}

.game-container > button {
  margin: 0 5px; /* 添加按钮间距 */
}

#result, #message {
  margin: 20px 0;
}

</style>
</head>
<body>
<!-- 在HTML中添加开始游戏按钮 -->
<div class="game-container">
  <h1>打怪小游戏</h1>
  <h2 id="monster">怪物 HP: <span id="monsterHp">10</span></h2>
  <button id="startGameButton" class="layui-btn layui-btn-primary">开始游戏</button>
  <button id="attackButton" class="layui-btn layui-btn-warm" style="display: none;">攻击怪物</button>
  <button id="nextLevelButton" class="layui-btn layui-btn-normal" style="display: none;">进入下一关</button>
  <button id="endGameButton" class="layui-btn layui-btn-danger" style="display: none;">结束游戏</button>
  <p id="message"></p>
</div>

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

js代码：

document.addEventListener('DOMContentLoaded', () => {
    const monsterHpElement = document.getElementById('monsterHp');
    const messageElement = document.getElementById('message');
    const startGameButton = document.getElementById('startGameButton');
    const nextLevelButton = document.getElementById('nextLevelButton');
    const endGameButton = document.getElementById('endGameButton');
    let initialHp = 10;
    let monsterHp;
    let level = 1;
    const hpIncrease = 5;
    const attackButton = document.getElementById('attackButton');

    function startGame() {
        monsterHp = initialHp;
        level = 1;
        monsterHpElement.innerText = monsterHp;
        messageElement.innerText = '怪物出现了！';
        resetAttackButtonColor();
        attackButton.style.display = 'inline-block';
        startGameButton.style.display = 'none';
    }

    function updateMonsterStatus() {
        if (monsterHp > 0) {
            monsterHp--;
            monsterHpElement.innerText = monsterHp;
            messageElement.innerText = `怪物受到伤害！还剩 ${monsterHp} 生命值。`;
        } else {
            nextLevelButton.style.display = 'inline-block';
            endGameButton.style.display = 'inline-block';
            attackButton.style.display = 'none';
            messageElement.innerText = '恭喜你，打败了怪物！选择下一步操作。';
        }
    }

    function levelUp() {
        level++;
        monsterHp = initialHp + hpIncrease * (level - 1);
        monsterHpElement.innerText = monsterHp;
        messageElement.innerText = `第 ${level} 关开始！怪物生命值为 ${monsterHp}。`;
        attackButton.style.display = 'inline-block';
        nextLevelButton.style.display = 'none';
        endGameButton.style.display = 'none';
        changeAttackButtonColor();
    }

    function endGame() {
        messageElement.innerText = '游戏结束，感谢您的玩耍！点击下方按钮可以重新开始。';
        attackButton.style.display = 'none';
        nextLevelButton.style.display = 'none';
        endGameButton.style.display = 'none';
        startGameButton.style.display = 'inline-block'; // 显示开始游戏按钮
    }

    function resetAttackButtonColor() {
        attackButton.className = 'layui-btn layui-btn-warm'; // 这里设置默认的按钮颜色样式
    }

    function changeAttackButtonColor() {
        // 定义一组可能的颜色
        const colors = ['layui-btn-primary', 'layui-btn-normal', 'layui-btn-warm', 'layui-btn-danger'];
        // 随机选择一个颜色
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        attackButton.className = `layui-btn ${randomColor}`; // 更新按钮的 class 以改变颜色
    }

    startGameButton.addEventListener('click', startGame);
    nextLevelButton.addEventListener('click', levelUp);
    endGameButton.addEventListener('click', endGame);
    attackButton.addEventListener('click', updateMonsterStatus);
});


document.addEventListener02('DOMContentLoaded', () => {
    const monsterHpElement = document.getElementById('monsterHp');
    const messageElement = document.getElementById('message');
    const startGameButton = document.getElementById('startGameButton');
    const nextLevelButton = document.getElementById('nextLevelButton');
    const endGameButton = document.getElementById('endGameButton');
    let initialHp = 10;
    let monsterHp;
    let level = 1;
    const hpIncrease = 5;
    const attackButton = document.getElementById('attackButton');

    function startGame() {
        monsterHp = initialHp;
        level = 1;
        monsterHpElement.innerText = monsterHp;
        messageElement.innerText = '怪物出现了！';
        attackButton.style.display = 'inline-block';
        startGameButton.style.display = 'none';
    }

    function updateMonsterStatus() {
        if (monsterHp > 0) {
            monsterHp--;
            monsterHpElement.innerText = monsterHp;
            messageElement.innerText = `怪物受到伤害！还剩 ${monsterHp} 生命值。`;
        } else {
            nextLevelButton.style.display = 'inline-block';
            endGameButton.style.display = 'inline-block';
            attackButton.style.display = 'none';
            messageElement.innerText = '恭喜你，打败了怪物！选择下一步操作。';
        }
    }

    function levelUp() {
        level++;
        monsterHp = initialHp + hpIncrease * (level - 1);
        monsterHpElement.innerText = monsterHp;
        messageElement.innerText = `第 ${level} 关开始！怪物生命值为 ${monsterHp}。`;
        attackButton.style.display = 'inline-block';
        nextLevelButton.style.display = 'none';
        endGameButton.style.display = 'none';
    }

    function endGame() {
        messageElement.innerText = '游戏结束，感谢您的玩耍！点击下方按钮可以重新开始。';
        attackButton.style.display = 'none';
        nextLevelButton.style.display = 'none';
        endGameButton.style.display = 'none';
        startGameButton.style.display = 'inline-block'; // 显示开始游戏按钮
    }

    startGameButton.addEventListener('click', startGame);
    nextLevelButton.addEventListener('click', levelUp);
    endGameButton.addEventListener('click', endGame);
    attackButton.addEventListener('click', updateMonsterStatus);
});

文章来源:https://blog.csdn.net/weixin_53607413/article/details/135265083
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。