0

jQueryを使って、格闘ゲームの体力ゲージを表したいと思っています。

  1. 体力ゲージは「#box」で表現。CSSでwidthを100pxで設定。
  2. "#btn"をクリックすると"#box"の幅が20pxずつ縮小する。
  3. "#box"のwidthが残り40pxになるとゲージがCSSオレンジ色になる。
  4. "#box"のwidthが残り20pxになるとゲージがCSS赤色になる。
  5. "#box"のwidthが0pxになると画像("./img/finish.jpg")が現れる。

としたいです。

$("#btn").on("click",function(){
    $("#box").width("-=20");
});
#box{
   background-color: yellow;
 }
<div id="box"></div>
<img id="finish" src="./img/finish.jpg">

上段のjQueryの部分にif文(width>40pxであれば…のように)
を置いていけば良いのだと思っていますが、
具体的なコードが思いつかず困っています。
ご協力のほどどうぞ宜しくお願いします!

1
  • 過去の質問が解決した場合は、当該質問の回答左側にあるチェックマークをクリックして、質問を解決済みにしていただけませんか?
    – supa
    Commented 2019年10月20日 11:08

2 件の回答 2

0

体力を示す値を変数で持つことで問題が簡単になると思います。

var life = 100; // 初期値は100とする
// 画像は事前にcssで visibility: hidden; としておいてください

$("#btn").on("click",function(){
    life -= 20;
    if (life < 0) {
        life = 0;
    }
    $("#box").width(life);

    if (life <= 40 && life > 20) {
        $("#box").css('background-color', 'orange');
    } else if (life <= 20 && life >= 0) {
        $("#box").css('background-color', 'red');
    }

    if (life == 0) {
        // 画像表示
        $("#finish").css("visibility", "visible");
    }
});

画像の位置を確保しておく必要がなければdisplay: none/blockで切り替えてもかまいません。
体力値を幅に合わせて100としましたが、この状態を100%と考えて細かい計算結果を体力値に反映させることもできます。

0

質問文で書かれているとおり、 if 文を使用すれば以下のように書くことが出来ます。

$("#btn").on("click", function() {
  var box = $("#box"),
    boxWidth = box.width("-=20").width();

  if (boxWidth <= 0) {
    box.css("background-color", "transparent");
    $("#finish").css("display", "block");
  } else if (boxWidth <= 20) {
    box.css("background-color", "red");
  } else if (boxWidth <= 40) {
    box.css("background-color", "orange");
  }
});
#box {
  width: 100px;
  height: 1em;
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>
<img id="finish" src="https://placehold.jp/200x200/?text=./img/finish.jpg" style="display: none">
<button type="button" id="btn">攻撃</button>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。