Question

当我获得足够的积分后购买了ant按钮时，应该减少总cookie /积分的费用，然后将费用更新为更多。我也希望设置setinterval，但是如果我可以正确更新价格，那将是一个很大的帮助

我尝试弄乱格式，但是没有任何工作。

HTML代码：

<title> Basic Clicker</title>

           <body>
               <style>
                  div,
                  a {
                      text-align: center;
                  }

                </style>
             <span id="cookies">0</span>
             <br />
             <span id="rebirths">0</span>
             <br />
             <button onclick="cookieClick()">Click Me!</button>
             <br />
             Cost: 10mp <button id="BigClickBtn" 
onclick="Bigclick()">BigClick</button>
                <br />
                Cost: <span id="antCost">10</span> <button 
onclick="buyAnt()" id="antCostBtn" >Buy Ant</button>
                <br />

JavaScript：

var cookies = window.parent.loadAsNumber("cookies");
document.getElementById('cookies').innerHTML = cookies;

function cookieClick() {
    cookies = cookies + Strength;
    document.getElementById("cookies").innerHTML = cookies;
    checkCursor()
    window.parent.saveDefault("cookies", cookies);
    }


var ants = 0;
var antInterval;

function buyAnt() {
  var antCost = Math.floor(10 * Math.pow(1.1, ants));
    if (cookies >= antCost) {
       cookies = cookies - antCost;
        ants = ants +1;
       document.getElementById("cookies").innerHTML = cookies;
       document.getElementById("antCost").innerHTML = antCost;
       document.getElementById("ants").innerHTML = ants;
    }
    var nextCost1 = Math.floor(10 * Math.pow(1.1, ants));
    document.getElementById("antCost").innerHTML = nextCost1;


}

 ///clearInterval(antInterval);

 //if (turtleChecked && TurtleCexp < TurtleMexp) {
   //turtleInterval = setInterval(function () { 
  // turtleXpUp(turtleChecked); }, 200);
  // cookies = cookies + 1;
  // document.getElementById("cookies").innerHTML = cookies;
 // }

工作功能：（不确定为什么能工作，但蚂蚁不工作）

var rebirths = 0;
var HitPoints = 0;
var ManaPoints = 0;
var SkillPoints = window.parent.loadAsNumber("SkillPoints");
document.getElementById('SkillPoints').innerHTML = SkillPoints;
var Strength = 1;

function buyRebirth() {
    var rebirthCost = Math.floor(10 * Math.pow(1.1, rebirths));
   if (cookies >= rebirthCost && rebirths < 1) {
        cookies = 0;
        HitPoints = HitPoints + 10;
       ManaPoints = ManaPoints + 10;
        SkillPoints = SkillPoints + 1;
        rebirths = rebirths + 1;
        document.getElementById("rebirths").innerHTML = rebirths;
        document.getElementById("cookies").innerHTML = cookies;
        document.getElementById("HitPoints").innerHTML = HitPoints;
        document.getElementById("ManaPoints").innerHTML = ManaPoints;
        document.getElementById("rebirthCost").innerHTML = rebirthCost;
        document.getElementById("SkillPoints").innerHTML = SkillPoints;
    }
    if (cookies >= rebirthCost)
        if (rebirths >= 1) {
            cookies = 0;
           rebirths = rebirths + 1;
           SkillPoints = SkillPoints + 1;
         document.getElementById('cookies').innerHTML = cookies;
        document.getElementById("rebirthCost").innerHTML = rebirthCost;
        document.getElementById("rebirths").innerHTML = rebirths;
        document.getElementById("SkillPoints").innerHTML = SkillPoints;


    }
var nextCost5 = Math.floor(10 * Math.pow(1.1, rebirths));
document.getElementById('rebirthCost').innerHTML = nextCost5;

window.parent.saveDefault("cookies", cookies);         

window.parent.saveDefault("SkillPoints", SkillPoints);

}

我希望您在以10的价格购买Ant按钮后将价格从10更改为下一个价格，并将cookie设为cookie-antCost。但是我买按钮后的实际结果是价格保持在10，并且没有更新。我真的很困惑，因为我认为我对如何制造可购买的东西不屑一顾。最下面的部分是我尝试设定一个固定的时间间隔，当您购买该东西时，您的cookie量开始每秒增加1。忽略乌龟的东西。如果有人可以给我一个有效的setinterval id，请多谢。

Answer 1

我已经在代码中直接添加了注释。这似乎运作良好：）

<html>
  <title> Basic Clicker</title>

  <body>
    <style>
      div,
      a {
          text-align: center;
      }

    </style>
    <p>
      Ants: <span id="ants">0</span>
    </p>
    <p>
      Cookies: <span id="cookies">0</span>
    </p>
    <p>
      Rebirths: <span id="rebirths">0</span>
    </p>
    <p>
      <button onclick="cookieClick()">Cookie click</button>
    </p>
    <p>
      Cost: <span id="antCost">10</span>
      <button onclick="buyAnt()" id="antCostBtn" >Buy Ant</button>
    </p>
  </body>
</html>

<script>
  // It is a good practice to define variables for all HTML objects
  // you will need to reference in your code to keep all references
  // at one place
  const cookiesHTML = document.getElementById("cookies")
  const antCostHTML = document.getElementById("antCost")
  const antsHTML = document.getElementById("ants")

  // Also it is a good practice to declare all variables used
  // within a particular block of code in advace (incl. initial values)
  // to make your code more readable
  let strength = 5
  let cookies = 0
  let ants = 0
  // It is better to memorize also the antCost globally
  let antCost = Math.floor(10 * Math.pow(1.1, ants))

  // Here you initialize any values previously set into your HTML
  // elements on the screen
  cookiesHTML.innerHTML = cookies
  antCostHTML.innerHTML = antCost
  antsHTML.innerHTML = ants

  // This function is called when a "Cookie click" button is clicked
  function cookieClick() {
    console.log("cookieClick")
    cookies = cookies + strength
    cookiesHTML.innerHTML = cookies
  }

  // This function is called when an Ant is bought
  function buyAnt() {
    console.log("buyAnt")
    // The following line is not needed as we have initialized  the antCost at the beginning
    // let antCost = Math.floor(10 * Math.pow(1.1, ants));
    if (cookies >= antCost) {
      setCookies(cookies - antCost)
      // cookies = cookies - antCost
      ants = ants +1

      // cookiesHTML.innerHTML = cookies
      antCostHTML.innerHTML = antCost
      antsHTML.innerHTML = ants
    }
    antCost = Math.floor(10 * Math.pow(1.1, ants))
    antCostHTML.innerHTML = antCost
  }

  // Typically it is better to create a separate function for setting a value
  // when such setting needs to perform multiple actions.
  // This setter will update your variable value in Javascript
  // also also will handle update of the HTML element for you.
  // I give this as an example for this one variable, you should
  // however use it for all variables in your case.
  function setCookies(value) {
    cookies = value
    cookiesHTML.innerHTML = value
  }
</script>

尝试制作一个可以正常更新价格的有效升级按钮

1 个答案: