59826


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"）が現れる。

としたいです。

[code]

    $("#btn").on("click",function(){
        $("#box").width("-=20");
    });
[/code]

[code]

    #box{
       background-color: yellow;
     }
[/code]

[code]

    <div id="box"></div>
    <img id="finish" src="./img/finish.jpg">
[/code]

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


CC BY-SA 4.0
2019-10-20T00:59:50.030
59817
2019-10-20T11:16:25.240
2019-10-20T11:11:36.657
32986
36258
question
javascript jquery
jQueryで要素の大きさ（width）に合わせて、色を変えたり、画像を表示したい！


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

[code]

    $("#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");
      }
    });
[/code]

[code]

    #box {
      width: 100px;
      height: 1em;
      background-color: yellow;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-10-20T11:11:12.027
59825
2019-10-20T11:11:12.027
32986
59817
answer


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

[code]

    var life = 100; // 初期値は100とする
    // 画像は事前にｃｓｓで 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");
        }
    });
    
[/code]

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


CC BY-SA 4.0
2019-10-20T11:16:25.240
59826
2019-10-20T11:16:25.240
9515
59817
answer