最近、HTML + CSS + JavaScript を使ってAndroidアプリ制作にチャレンジしています。
その過程で、シンプルですが体力ゲージを作成したので、ブログに掲載します。
完成したライフゲージ（体力ゲージ）
出来上がったライフゲージはこんな感じです。結構単純です・・・
動作確認用に、増加ボタン（＋）、減少ボタン（－）を設置しましたので押してみてください。
+
–
ソースコード
コードはこんな感じです。
こんなのでよければご自由にご利用ください。
HTML
<div id="life-frame"> <div id="life-bar"></div> <div id="life-mark"></div> </div> <div id="btns-wrap"> <div id="increase-btn" onclick="alterLife( 10 )">+</div> <div id="decrease-btn" onclick="alterLife( -10 )">-</div> </div>
CSS
#life-frame {
margin: 0 auto;
width: 80%;
background-color: rgba(10, 0, 50, 0.6);
display: flex;
padding: 3px 3px;
}
#life-bar {
height: 3px;
background-color: rgb(0, 255, 255);
transition: 300ms
}
#life-mark {
width: 3px;
height: 3px;
border-radius: 3px;
background-color: rgb(255, 255, 255);
filter: saturate(500%);
box-shadow: 0 0 5px 3px rgb(200, 255, 255),
0 0 7px 7px rgb(100, 255, 255);
}
#btns-wrap {
width: 100px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
#increase-btn,#decrease-btn {
margin-top: 10px;
width: 30px;
height: 30px;
border-radius: 5px;
color: white;
background-color: dodgerblue;
text-align: center;
line-height: 30px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
user-select: none;
}
#increase-btn:active,#decrease-btn:active {
transform: translate(2px,2px);
box-shadow: none;
}
JavaScript
const lifeBar = document.getElementById('life-bar') // ライフバー
const lifeMark = document.getElementById('life-mark') // ライフの光部分
const increaseBtn = document.getElementById('increase-btn') // + ボタン
const decreaseBtn = document.getElementById('decrease-btn') // - ボタン
let life = 100 // ライフ初期値
lifeBar.style.width = "100%" // ライフ初期幅
// *** ライフ変更処理 ***
function alterLife( value ){
// lifeの値を算出する
life += value
if ( life <= 0 ){
// 算出の結果 0 以下になった場合
life = 0
// 0.3秒後に光部分を非表示にする
setTimeout(function(){
lifeMark.style.visibility = 'hidden'
}, 300)
} else {
// 算出の結果 100 を超過した場合
if ( life > 100 ) {
life = 100
}
// 光部分を表示する
lifeMark.style.visibility = 'visible'
}
// スタイル(幅)を更新する
lifeBar.style.width = life + "%"
}
まとめ
ライフ（体力）ゲージをHTML/CSS/JSで作成している記事を調べたのですが、meter要素やprogress要素の解説が多く、自分の好みの見た目にできなかったので、自作してみました。
拙い出来ではありますが、だれかの役に立てば幸いです。
コメント