JavaScript
jQuery
js
game
初心者

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

はじめに

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

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

利用するHTMLタグ

・meter : 体力ゲージ表示に便利
 ゲージ.png

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

・HTML

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

利用するJavaScript

・setTimeout  ・・1回限りの時間処理
・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>

以上