2406_85104305 2024-05-18 14:43 采纳率: 0%
浏览 5

如何用js html csa jquery做一个打怪游戏(语言-javascript)

用html js css jquery做一个打怪游戏
要能累积经验，怪还能反击。还能随机刷新
属性面板显示在屏幕上，打一个获得多少经验有提示消息，等级随者经验的获得而提升，要有攻击按钮还要有角色升级按钮

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-18 14:43
    关注

    引自免费微信小程序：皆我百晓生

    为了创建这个简单的打怪游戏，我们可以分为几个部分：HTML结构、CSS样式、JavaScript逻辑以及jQuery交互。我会逐步展示这些部分的代码，并解释它们的作用。

    1. 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="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="game-screen">
        <div id="character-panel">
            <h2>角色信息</h2>
            <p>等级：<span id="level">1</span></p>
            <p>经验：<span id="experience">0/10</span></p>
        </div>
        <div id="monster-box">
            <div id="monster-image"></div>
            <button id="attack-button">攻击</button>
            <button id="upgrade-button">升级</button>
        </div>
        <div id="message-box">
            <p id="message"></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
    1. CSS 样式 (style.css)：
    body {
    font-family: Arial, sans-serif;
}

#game-screen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 400px;
    width: 100%;
    background-color: #f0f0f0;
}

#character-panel, #monster-box {
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#monster-image {
    width: 150px;
    height: 150px;
    background-image: url('monster.png');
    background-size: cover;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    cursor: pointer;
}
    1. JavaScript 逻辑 (script.js)：
    let level = 1;
let experience = 0;
const maxExperienceForNextLevel = 10;

function updateUI() {
    document.getElementById('level').innerText = level;
    document.getElementById('experience').innerText = `${experience}/${maxExperienceForNextLevel * level}`;
}

document.getElementById('attack-button').addEventListener('click', attack);
document.getElementById('upgrade-button').addEventListener('click', upgrade);

function attack() {
    const monsterHealth = Math.floor(Math.random() * 10) + 1;
    if (monsterHealth > 0) {
        monsterHealth -= 1;
        experience += 1;
        checkWin();
        showMessage(`打败了怪物，获得 ${experience} 经验`);
    } else {
        showMessage('已经击败过此怪物');
    }
}

function upgrade() {
    if (experience >= maxExperienceForNextLevel * level) {
        level++;
        experience %= maxExperienceForNextLevel * level;
        maxExperienceForNextLevel *= 2;
        updateUI();
        showMessage('角色升级了！');
    } else {
        showMessage('经验值不足，无法升级');
    }
}

function checkWin() {
    if (experience >= maxExperienceForNextLevel * level) {
        experience = maxExperienceForNextLevel * level - 1;
        maxExperienceForNextLevel *= 2;
        updateUI();
    }
}

function showMessage(message) {
    document.getElementById('message').innerText = message;
    setTimeout(() => {
        document.getElementById('message').innerText = '';
    }, 2000);
}

updateUI();

    这个代码实现了一个简单的打怪游戏。玩家通过点击攻击按钮与怪物战斗，每次击败怪物都会获得一定的经验，当经验积累到一定程度时可以升级。游戏会根据角色等级随机刷新怪物的健康值。同时，还会显示一条消息提示玩家当前状态和战斗结果。注意，你需要准备一个名为monster.png的图片文件放在同一目录下作为怪物图像背景。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 5月18日

悬赏问题

  • ¥50 VS2019,xamarin框架串口调试报错Java.Lang.SecurityException: Exception of type
  • ¥20 QT如何判断QLineF线鼠标划过事件
  • ¥15 关于#phpstorm#的问题：phpstorm编辑工具 光标选中了就会自动复制到粘贴板上 这样我之前复制的内容就失效了
  • ¥15 pychram安装jupyter插件
  • ¥60 悬赏破解越狱iphone4s中360保险箱密码遗忘
  • ¥20 ARKts悬浮窗和快捷方式问题
  • ¥15 linux中nginx服务器提示not found on accelerator，如何解决？(语言-php|操作系统-linux)
  • ¥15 comparecluster没有办法kegg
  • ¥15 远程访问linux主机超时
  • ¥15 odoo17存货管理优势于中国国内该行业传统ERP或MES的详细解读和举例