分享创作 游戏内血条等 progress 进度条精讲

2238138900 · 2020年10月11日 · 最后由 halhalhal 回复于 2020年10月26日 · 344 次阅读

前言

  • 学习本文内容要用到的语言知识
    • 中文(看得懂本文)
    • html
    • css
    • javascript

正文

在很多游戏都需要有战斗系统,而战斗系统纯文字看起来似乎有些许单调,经过无数作者绞尽脑汁的苦想后,就诞生出了加进度条这一设想😉 就是上面这个东西,它奇丑无比,所以我们需要用css给它美化,而且它没有绑定你的血量等相关变量,这时还需要我们的JavaScript来实现

css美化

直接先上代码

<style>
    progress{
        width:50%;
        height:12px;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-bar{
        /*进度条背景样式*/
        background:white;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-value{
        /*进度条进度样式*/
        background:red;
        border-radius:5px 5px 5px 5px;
    }
</style>

这里用了两个伪类,一个是进度条进度的样式,一个是进度条背景的样式,“#hp”,hp是进度条的id名

利用JavaScript绑定变量到进度条

=:MD.hp=30;MD.hpmax=100;
//初始化血量,血量上限
=:setInterval(function(){document.getElementById("hp").value=MD.hp;document.getElementById("hp").max=MD.hpmax;document.getElementById("hptxt").innerHTML=MD.hp+"/"+MD.hpmax;},100);

这里利用document.getElementById('idname').value与document.getElementById('idname').max将变量绑定到进度条

完整例子

[|]
<progress value="0" max="100" id="hp"></progress><span id="hptxt"></span>
<style>
    progress{
        width:50%;
        height:12px;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-bar{
        /*进度条背景样式*/
        background:white;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-value{
        /*进度条进度样式*/
        background:red;
        border-radius:5px 5px 5px 5px;
    }
</style>
=:MD.hp=30;MD.hpmax=100;

=:setInterval(function(){
document.getElementById("hp").value=MD.hp;
document.getElementById("hp").max=MD.hpmax;
document.getElementById("hptxt").innerHTML=MD.hp+"/"+MD.hpmax;
},100);
等:99999 | &nbsp

最后附上演示

知识拓展(css样式做到兼容各种浏览器)

在上面的css代码中,你也许细心的发现了有“-webkit-”这个东西

这是什么呢,这是浏览器的内核识别码,webkit是谷歌浏览器的,下面我列出了css浏览器的识别码

识别码 对应浏览器
-webkit- 谷歌浏览器
-moz- 火狐浏览器
-ms- IE浏览器
-o- 欧朋浏览器

都在上面了,如果你想让玩家更舒服的玩你的游戏,可以像那个webkit一样写几个其他浏览器的 css代码,把webkit改成moz,ms,o这些

讲完了🇨🇳

共收到 1 条回复

谢谢,这个好多了

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册