試圖讓我的遊戲環路正確

-4

我的問題是：爲什麼我的遊戲循環不工作？如果你看到代碼，我試圖把所有的遊戲代碼放在一個if中。這個想法是：「如果遊戲結束是錯誤的，執行遊戲，否則（當我的人類飢餓條到達0時）遊戲結束」。

你能幫我嗎？非常感謝

<!doctype html> 
<html> 
    <head> 
    <style> 
    body { 
    -webkit-user-select: none; 
    } 

    #screen { 
    position: relative; 
    left: 480px; 
    top: 30px; 
    border: 2px solid black; 
    height: 500px; 
    width: 400px; 
    display: block; 
    } 

    #myCash { 
    position: relative; 
    width: 90px; 
    height: 40px; 
    top: 7px; 
    left: 5px; 
    border: 5px solid lightgreen; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 40px; 
    color: green; 
    font-weight: bolder; 
    font-size: 20px; 
    } 

    #humanHunger { 
    position: relative; 
    width: 90px; 
    height: 90px; 
    top: 20px; 
    left: 280px; 
    border: 1px solid black; 
    } 

    #humanHungerContainer { 
    position: relative; 
    width: 100%; 
    height: 20px; 
    top: 20px; 
    border: 1px solid black; 
    background-color: red; 
    } 

    #humanHungerBar { 
    position: absolute; 
    width: 76%; 
    height: 18px; 
    border: 1px solid green; 
    background-color: green; 
    } 

    #moneyMaker { 
    position: relative; 
    width: 300px; 
    height: 450px; 
    top: -850px; 
    left: 100px; 
    border: 3px solid green; 
    background-image: url("moneyMakerBackground.png"); 
    } 

    #jobInstructions { 
    position: absolute; 
    width: 250px; 
    height: 50px; 
    border: 3px solid orange; 
    top: 20px; 
    left: 22px; 
    background-color: lightgreen; 
    text-align: center; 
    } 

    #workingHours { 
    position: absolute; 
    width: 250px; 
    height: 50px; 
    border: 3px solid orange; 
    top: 90px; 
    left: 22px; 
    background-color: lightgreen; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 50px; 
    } 

    #workCounter { 
    position: absolute; 
    width: 60px; 
    height: 50px; 
    border: 3px solid orange; 
    top: 250px; 
    left: 22px; 
    background-color: lightgreen; 
    text-align: center; 
    } 

    #clickingArea { 
    position: absolute; 
    width: 250px; 
    height: 50px; 
    border: 3px solid orange; 
    top: 170px; 
    left: 22px; 
    background-color: lightgreen; 
    filter: saturate(100%); 
    } 

    #clickingArea:hover { 
    filter: saturate(190%); 
    } 

    #dollar { 
    position: relative; 
    left: 80px; 
    top: 5px; 
    } 

    #nakedHuman { 
    position: absolute; 
    top: 25px; 
    left: 120px; 
    } 

    #clothesScreen { 
    position:relative; 
    top: -400px; 
    left: 900px; 
    border: 2px solid black; 
    width: 300px; 
    height: 400px; 
    overflow: auto; 
    } 

    #lumberShirt { 
    position: absolute; 
    top: 165px; 
    left: 120px; 
    display:none; 
    } 

    #coffeeStainedTShirt { 
    position: absolute; 
    top: 165px; 
    left: 120px; 
    display:none; 
    } 

    #regularJeans { 
    position: absolute; 
    top: 328px; 
    left: 145px; 
    display:none; 
    } 

    #lumberShirtMiniContainer { 
    position: relative; 
    top: 10px; 
    left: 10px; 
    } 

    #coffeeStainedTShirtMiniContainer { 
    position: relative; 
    top: 30px; 
    left: 10px; 
    } 

    #regularJeansMiniContainer { 
    position: relative; 
    top: 60px; 
    left: 20px; 
    } 

    #burgerMiniContainer { 
    position: relative; 
    top: 90px; 
    left: 10px; 
    } 

    #lumberShirtPrice { 
    position: absolute; 
    top: 20px; 
    left: 100px; 
    border: 3px solid orange; 
    width: 50px; 
    height: 20px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 20px; 
    background-color: orange; 
    } 

    #buyButtonLumber { 
    position: absolute; 
    top: 60px; 
    left: 100px; 
    border: 3px solid lightgreen; 
    width: 30px; 
    height: 15px; 
    } 

    #buyButtonCoffee { 
    position: absolute; 
    top: 60px; 
    left: 100px; 
    border: 3px solid lightgreen; 
    width: 30px; 
    height: 15px; 
    } 

    #buyButtonRegularJeans { 
    position: absolute; 
    top: 60px; 
    left: 100px; 
    border: 3px solid lightgreen; 
    width: 30px; 
    height: 15px; 
    } 

    #buyButtonBurger { 
    position: absolute; 
    top: 60px; 
    left: 100px; 
    border: 3px solid lightgreen; 
    width: 30px; 
    height: 15px; 
    } 
    </style> 
    </head> 
    <body> 
     <div id="screen"> 
      <img id="nakedHuman" src="nakedHuman2.png" width="139.46" height="450"> 
      <img id="lumberShirt" src="lumberShirt.png" width="139.46" height="158.51"> 
      <img id="coffeeStainedTShirt" src="coffeeStainedTShirt.png" width="139.46" height="158.51"> 
      <img id="regularJeans" src="regularJeans.png" width="89" height="152.72"> 
      <div id="myCash"></div> 
      <div id="humanHunger"> 
       <div id="humanHungerContainer"> 
        <div id="humanHungerBar"></div> 
       </div> 
      </div> 
     </div> 
     <div id="clothesScreen"> 
      <div id="lumberShirtMiniContainer"> 
       <img id="lumberShirtMini" src="lumberShirt.png" width="70.38" height="80"> 
       <div id="lumberShirtPrice"></div> 
       <div id="buyButtonLumber">Buy</div> 
      </div> 
      <div id="coffeeStainedTShirtMiniContainer"> 
       <img id="coffeeStainedTShirtMini" src="coffeeStainedTShirt.png" width="70.38" height="80"> 
       <div id="buyButtonCoffee">Buy</div> 
      </div> 
      <div id="regularJeansMiniContainer"> 
       <img id="regularJeansMini" src="regularJeans.png" width="46.62" height="80"> 
       <div id="buyButtonRegularJeans">Buy</div> 
      </div> 
      <div id="burgerMiniContainer"> 
       <img id="burger" src="burger.png" width="94.11" height="80"> 
       <div id="buyButtonBurger">Buy</div> 
      </div> 
     </div> 
     <div id="moneyMaker"> 
      <div id="jobInstructions">You work on a click factory, so get to clickin'!!</div> 
      <div id="workingHours"></div> 
      <div id="clickingArea"><img src="dollar.png" id="dollar" width="82.55" height="42"></div> 
      <div id="workCounter"></div> 
     </div> 
    <script> 
    window.onload = function() { 
     var gameOver = false; 
     if (!gameOver) { 
     var lumberShirtPrice = document.getElementById("lumberShirtPrice"); 
     lumberShirtPrice.innerHTML = 7; 


     var myCash = document.getElementById("myCash"); 
     myCash.innerHTML = 45; 

     var buyButtonLumber = document.getElementById("buyButtonLumber"); 
     buyButtonLumber.addEventListener("click", substractItemPriceFromMyCash); 
     var negateFX = new Audio('negate1.wav'); 

     function substractItemPriceFromMyCash() { 
      var a = parseInt(lumberShirtPrice.innerHTML); 
      var b = parseInt(myCash.innerHTML); 
      if (a > b) { 
       negateFX.play(); 
      } 
      else { 
       myCash.innerHTML -= lumberShirtPrice.innerHTML; 
       console.log("you bought the lumber shirt"); 
      } 
     } 

     var workingHoursScreen = document.getElementById("workingHours"); 
     workingHoursScreen.innerHTML = 0; 
     var workCounter = document.getElementById("workCounter"); 
     workCounter.innerHTML = 0; 
     var allowedToWork = false; 
     var workingHoursChronometer = setInterval(incrementWorkingHoursChronometer, 1000); 
     function incrementWorkingHoursChronometer() { 
      var a = parseInt(workingHoursScreen.innerHTML); 
      if(a < 10) { 
       workingHoursScreen.innerHTML++; 
      } 
      else if (a == 10) { 
       workingHoursScreen.innerHTML = 0; 
       workCounter.innerHTML++;  
      } 
      var b = parseInt(workCounter.innerHTML); 
      if (b == 4) { 
      workCounter.innerHTML = 0; 
      } 
      if (b % 2 == 0) { 
      allowedToWork = true; 
      } 
      else if (b % 2 == 1) { 
      allowedToWork = false; 
      } 
     } 



     var coinFX = new Audio('coin1.wav'); 
     var clickingAreaBox = document.getElementById("clickingArea"); 
     clickingAreaBox.addEventListener("click", giveMeMoney); 

     function giveMeMoney() { 
      if(allowedToWork) { 
       myCash.innerHTML++; 
       coinFX.play(); 
      } 
      else { 
       negateFX.play(); 
      } 
     } 

     var humanHungerBar = document.getElementById("humanHungerBar"); 
     var barWidth = 76; 
     humanHungerBar.style.width = barWidth + '%'; 
     var humanHungerBarDecrement = setInterval (decreaseHumanHungerBar, 700); 
     function decreaseHumanHungerBar() { 
      if (barWidth > 0) { 
       humanHungerBar.style.width = barWidth + '%'; 
       barWidth--; 
      } 
     } 

     var buyButtonBurger = document.getElementById("buyButtonBurger"); 
     var burgerPrice = 15; 
     buyButtonBurger.addEventListener("click", buyBurgerRestoreLifeAndDecreaseMoney); 
     function buyBurgerRestoreLifeAndDecreaseMoney() { 
      var a = parseInt(myCash.innerHTML); 
      if (a >= burgerPrice){ 
       if(barWidth < 92) { 
        barWidth += 10; 
        myCash.innerHTML -=burgerPrice; 
       } 
       else if (barWidth == 1) { 
       gameOver = true; 
       console.log("bar is 1"); 
       } 
       else { 
        negateFX.play(); 
       } 
      } 
      else { 
      negateFX.play(); 
      } 
     } 
     } 
     else { 
     document.getElementById("screen").style.display = 'none'; 
     } 
    } 
    </script> 
    </body> 
</html>

來源

2016-11-10 KikePeris

與您的問題分享您的代碼 – Timo

嗨！歡迎來到StackOverflow。 – jdmdevdotnet

你沒有遊戲循環。你在onload處理程序中只有一次調用if語句。 – david

所以你寫了一個執行一次的腳本。它從頭到尾，然後停下來。所以你想要做的是寫一個反覆重複的腳本，直到遊戲結束。因此，這裏是一個如何做到這一點在JavaScript超級簡單的例子：

while (!gameOver) { 
    // do game code 
}

別急！

因此，while循環內的代碼會一直髮生，直到gameOver變量爲true。但是如果您嘗試使用該代碼，您的遊戲可能會凍結！爲什麼？因爲瀏覽器正在儘可能快地執行while循環內的代碼。但是如果你希望你的遊戲以每秒一幀的速度運行，你可能想要使用JavaScript超時。因此，嘗試這樣的事情：

setInterval(function() { 
    // do game code 
}, 1000/60);

這是絕對最低限度，你需要的技術「遊戲圈」。但是，這並不是真正推薦開始創建基於瀏覽器的遊戲的方法。嘗試做一些研究和檢查出如this和this。

來源

2016-11-10 21:19:06

感謝您給我一個有用的答案！ – KikePeris

試圖讓我的遊戲環路正確

回答

相關問題