介绍：
一个简单的打怪小游戏，点击开始游戏后，出现攻击按钮，击败怪物后可以选择继续下一关和结束游戏。
继续下一个怪兽的血量会增加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); });
