jQueryでゲームによくある体力ゲージを作成してみた。

はじめに

現状、ゲーム制作をしていて、体力ゲージの作り方が見つからなかったので、
考えて、以下のやり方で作成した。

同じ悩みを抱えている初心者エンジニアの役に立つことを願って書き込む。

##利用するHTMLタグ
・meter　： 体力ゲージ表示に便利
　

参考リンク
https://developer.mozilla.org/ja/docs/HTML/Element/meter

・HTML

<meter max="100" low="20" high="40" value="100"></meter>

利用するJavaScript

・setTimeout　　・・１回限りの時間処理
・clearTimeout ・・時間処理を止める

参考リンク
JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン

利用するjQuery

・valメソッド

参考リンク
　http://semooh.jp/jquery/api/attributes/val/val/

・HTML

<meter class="test" max="100" low="20" high="40" value="100"></meter>

・JavaScript / jQuery

<script>
    var count = 0;
    var countup = function(){
      console.log(count++);
      var power = setTimeout(countup, 1000);
      $(".test").val(power); //体力回復 jQuery部分
      if(count > 100){　
        clearTimeout(power);　//clearTimeoutで時間処理STOP
      }
    }
    countup();
   </script>

以上