【HTML/CSS/JS】シンプルなライフゲージ(体力ゲージ)

最近、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要素の解説が多く、自分の好みの見た目にできなかったので、自作してみました。

拙い出来ではありますが、だれかの役に立てば幸いです。

コメント

タイトルとURLをコピーしました