javascript - Trying to get my Game Loop right -
i trying first simple game.
my question is: why game loop not working? if see code, tried put game code inside if. idea is: "if game on false, execute game, else (when humanhungerbar reaches 0) game over".
can me here? lot
<!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 click factory, 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 = parseint(lumbershirtprice.innerhtml); var b = parseint(mycash.innerhtml); if (a > b) { negatefx.play(); } else { mycash.innerhtml -= lumbershirtprice.innerhtml; console.log("you bought 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 = 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 = parseint(mycash.innerhtml); if (a >= burgerprice){ if(barwidth < 92) { barwidth += 10; mycash.innerhtml -=burgerprice; } else if (barwidth == 1) { gameover = true; console.log("bar 1"); } else { negatefx.play(); } } else { negatefx.play(); } } } else { document.getelementbyid("screen").style.display = 'none'; } } </script> </body> </html>
so have written script executes 1 time. goes beginning end, , stops. want write script repeats on , on until game ends. here's super brief example of how might in javascript:
while (!gameover) { // game code } but wait!!!
so code inside while loop keep on happening on , on until gameover variable true. if try use code, game freeze! why? because browser executing code inside while loop fast possibly can. if you'd game run @ frame-per-second rate, want use javascript timeout. try this:
setinterval(function() { // game code }, 1000/60); that absolutely bare minimum you'll need technical "game loop". however, not recommended approach starting create browser-based game. try doing research , checking out things this , this.
Comments
Post a Comment