分享创作 游戏内血条等 progress 进度条精讲
前言
- 学习本文内容要用到的语言知识
- 中文(看得懂本文)
- 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 |  
最后附上演示
知识拓展(css样式做到兼容各种浏览器)
在上面的css代码中,你也许细心的发现了有“-webkit-”这个东西
这是什么呢,这是浏览器的内核识别码,webkit是谷歌浏览器的,下面我列出了css浏览器的识别码
识别码 | 对应浏览器 |
---|---|
-webkit- | 谷歌浏览器 |
-moz- | 火狐浏览器 |
-ms- | IE浏览器 |
-o- | 欧朋浏览器 |
都在上面了,如果你想让玩家更舒服的玩你的游戏,可以像那个webkit一样写几个其他浏览器的 css代码,把webkit改成moz,ms,o这些
讲完了🇨🇳