个人中心
gpt4 book ai didi

javascript - 我如何创建一个 3 嵌套的耐力条，它将从最后一个重新生成到第一个

转载 作者：行者123 更新时间：2023-11-28 17:29:13 26 4
gpt4 key购买 nike

好的，我已经创建了一个耐力容器，其中包含三个耐力条，当您单击攻击按钮时，一些耐力会从第一个耐力条中取出。但是，如果你一直点击第一个耐力条直到它耗尽为 0，它就会开始耗尽第二个耐力条，依此类推。现在，这就是它打算发生的方式，但我无法让它以这种方式运行。这是 jsfiddle为此，每当我多次单击攻击按钮时，耐力条就会滞后，一旦耐力条完成，它仍会耗尽耐力条并再次 self 再生。您必须尝试使用​​ jsfiddle 才能理解我在说什么。

HTML

<body>
<div id="container">
<div class="hBar"> <div class="health"></div></div><!--hbar -->
<div class="sBar">
<div class="s3">
<div class="s2">
<div class="s1">

</div><!--s1 -->
</div><!--s2 -->
</div><!--s3 -->
</div><!--sBar -->
<div class="attack">attack</div>
</div><!--container -->
</body>

CSS

*{ margin:0px; padding:0px;}
.hBar{width:400px; height:40px; border:1px solid grey; margin-bottom:20px;}
.health{background:green;width:100%; height:100%;}
.sBar{ width:400px; height:40px; border:1px solid grey; margin-bottom:20px;}
.s3{ width:100%; height:100%; background:red;}
.s2{width:100%; height:100%; background:orange;}
.s1{width:100%; height:100%; background:yellow;}
#container{background:white; width:80%; padding:10px; margin:auto;}
body{background:#CCC;}
.attack{ border-radius:90px; border:black solid 1px; height:75px; width:75px; text-align:center; line-height:75px;}
.attack:hover{cursor:pointer;}

Javascript

$(document).ready(function () {


    // one , two, and three variables are collecting the stamina bars
    var one = $('.s1');
    var two = $('.s2');
    var three = $('.s3');
    var oneWidth = one.width();
    var twoWidth = two.width();
    var threeWidth = three.width();
    var stam = $('.sBar').width();
    var damage;
    var subtractHealth;
    var num;

    $('.attack').click(function () {


        // timer is supposed to be the variable for a setInterval function
        let timer;
        // damage is supposed to take away the stamina
        damage = 100;

        // This function is supposed to stop the interval and the animation done on the 
        // stamina bars
        function stopAnimate() {
            clearInterval(timer);
            one.stop();
            two.stop();
            three.stop();

        }


        // if the  first and the second stamina bar is below 0, then add subtract the width to .s3 
        if (oneWidth <= 0 && twoWidth <= 0) {
            subtractHealth = $('.s3').width() - damage;

            three.animate({
                'width': subtractHealth
            }, 'fast');

            // if the first stamina bar is less than 0, the subtract the width of .s2    
        } else if (oneWidth <= 0) {


            subtractHealth = $('.s2').width() - damage;

            two.animate({
                'width': subtractHealth
            }, 'fast');

            // if the first stamina bar is not below 0 then run the content in this 
        } else {



            subtractHealth = $('.s1').width() - damage;

            one.animate({
                'width': subtractHealth
            }, 'fast');


        }



// regenerates all the three stamina bars with the animate method
        function regenerate(stam1, stam2, stam3) {




            stam1.animate({
                'width': stam
            }, 1000, function () {

                if (stam1.width() == stam) {


                    stam2.animate({
                        'width': stam
                    }, 1000, function () {

                        if (stam2.width() == stam) {


                            stam3.animate({
                                'width': stam
                            }, 1000)

                        }// if stam2


                    });//stam2.animate


                }//if stam.width()


            })//stam1.animate

            setTimeout(stopAnimate(), 5000); //end function


        }; //end regenerate 

        // run setInterval and assign the method to timer
        timer = setInterval(regenerate(one, two, three), 1000);




    }); //end click 

}); //end ready

最佳答案

我不是 100% 确定我有你想要的效果，但如果没有，我认为你应该能够修改这段代码以获得你想要的结果。如果您需要更多帮助，请发表评论，我很乐意看看我能做些什么。

  var staminaMax = 1000;
  var staminaCurrent = staminaMax;
  var staminaHealInterval;
  var staminaTick = 100;
  var staminHealPerTick = 10;

  var $sBar3 = $(".sBar .sBarStatus.s3");
  var $sBar2 = $(".sBar .sBarStatus.s2");
  var $sBar1 = $(".sBar .sBarStatus.s1");

  var healStamina = function() {
    staminaCurrent = Math.min(staminaCurrent + staminHealPerTick, staminaMax);
    var rawPct = staminaCurrent / staminaMax;

    var s1Pct = (function() {
      if (rawPct <= (2 / 3)) { return 0; }
      return (rawPct - (2 / 3)) / (1 / 3);
    })();

    var s2Pct = (function() {
      if (rawPct <= (1 / 3)) { return 0; }
      if (rawPct >= (2 / 3)) { return 1; }
      return (rawPct - (1 / 3)) / (1 / 3);
    })();

    var s3Pct = (function() {
      if (rawPct >= (1 / 3)) { return 1; }
      return (rawPct - (0 / 3)) / (1 / 3);
    })();

    $sBar3.css("width", 100 * s3Pct + "%");
    $sBar2.css("width", 100 * s2Pct + "%");
    $sBar1.css("width", 100 * s1Pct + "%");

    if (staminaCurrent >= staminaMax) {
      clearInterval(staminaHealInterval);
      staminaHealInterval = null;
    }
  };

  var dingStamina = function(amount) {
    staminaCurrent = Math.max(staminaCurrent - amount, 0);
    if (!staminaHealInterval) {
      staminaHealInterval = setInterval(healStamina, staminaTick);
    }
  }

  $('.attack').click(function() {
    dingStamina(100);
  });
* {
  margin: 0px;
  padding: 0px;
}
.hBar {
  width: 400px;
  height: 10px;
  border: 1px solid grey;
  margin-bottom: 20px;
}
.health {
  background: green;
  width: 100%;
  height: 100%;
}
.sBar {
  width: 400px;
  height: 10px;
  border: 1px solid grey;
  margin-bottom: 20px;
  position: relative;
}
.sBar .sBarStatus {
  position: absolute;
  width: 100%;
  height: 100%;
}
.s3 {
  background: red;
}
.s2 {
  background: orange;
}
.s1 {
  background: yellow;
}
#container {
  background: white;
  width: 80%;
  padding: 10px;
  margin: auto;
}
body {
  background: #CCC;
}
.attack {
  border-radius: 90px;
  border: black solid 1px;
  height: 75px;
  width: 75px;
  text-align: center;
  line-height: 75px;
}
.attack:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="hBar">
    <div class="health"></div>
  </div>

  <div class="sBar">
    <div class="sBarStatus s3"></div>
    <div class="sBarStatus s2"></div>
    <div class="sBarStatus s1"></div>
  </div>

  <div class="attack">attack</div>
</div>

关于javascript - 我如何创建一个 3 嵌套的耐力条，它将从最后一个重新生成到第一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37646418/

26 4 0
文章推荐： html - 如何使用 HTML 为输入元素创建子标签
文章推荐： html - 如何更改 Bootstrap 导航栏中的链接背景颜色
文章推荐： javascript - 如何动态设置div为多行两列
文章推荐： jquery - 更改背景图像 css
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com