javascript - Why are there several alerts popping up at the same time? -
i'm trying make donut clicker game, supposed similar cookie clicker. when select item shop, confirm supposed pop confirm want buy item. i've made clicking easier in code below. (you might want make code full screen) question is, why confirm pop ups appear multiple times in row? in code, there one confirm when click item, don't know causes it.
$(document).ready(function() { tacoclick(); }); function tacoclick() { //hide items $(".item").hide(); //defining store items var clickbonus1 = { price: 6, amount: 25, }; var clickbonus2 = { price: 75, amount: 10, }; var clickbonus5 = { price: 150, amount: 5, }; var autoclick = { price: 500, amount: 1, }; var autobonus1 = { price: 700, amount: 10, }; var autobonus2 = { price: 1000, amount: 10, }; var autobonus5 = { price: 1200, amount: 5, }; var laser = { price: 2500, amount: 1, }; var battery = { price: 1500, amount: 666, }; var energypotion = { price: 1500, amount: 20, }; var key = { price: 500000, amount: 1, }; //defining player var player = { clicks: 0, money: 5, energy: 100, items: ["none"], clickamount: 1, energylost: 0.5, waittime: 600000, }; //clicking! yay :) $("#donut").click(function() { //adding num clicks, money, , taking away energy player.clicks += player.clickamount; player.energy -= player.energylost; player.money += player.clickamount / 10; //showing player status on status bar document.getelementbyid("clicknum").innerhtml = player.clicks; document.getelementbyid("playerenergy").innerhtml = math.floor(player.energy); document.getelementbyid("money").innerhtml = math.floor(player.money); //tired mode if(player.energy < 1 && player.energy > -1) { alert("you ran out of energy! you'll have wait ten more minutes until can play again!"); $("body").fadeout(); window.settimeout(function revive() { $("body").fadein(); player.energy = 100; }, player.waittime); } //the items! now, gets tricky... if(player.money > 6) { $("#clickbonus1").show(); $("#clickbonus1").click(function() { var confirmbuy = confirm("do want buy item $50?"); if(confirmbuy) { if(player.money > 6) { player.clickamount += 1; player.money -=2; document.getelementbyid("money").innerhtml = math.floor(player.money); } else { alert("you don't have enough money!"); } } }); } }); }* { font-family: arial; font-weight: bold; } #donut { height: 500px; width: 500px; /*background-color: grey;*/ border-radius: 500px; } #donut:hover { cursor: pointer; width: 505px; height: 505px; transition: ease 0.3s; } body { /*border: 1px solid black;*/ width: 960px; text-align: center; margin-left: 480px; margin-top: 200px; } .item:hover { cursor: pointer; background-color: #eaffea; transition: ease 0.5s; }<!doctype html> <html> <head> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <meta charset="utf-8"> <title>js bin</title> <script> </script> <style> </style> </head> <body> <div id="statusbarwrapper"> <div id="clicknumwrapper">total clicks: <span id="clicknum">0</span></div> <div id="deviceswrapper">items: <span id="devices">none</span></div> <div id="energywrapper">energy: <span id="playerenergy">100</span></div> <div id="moneywrapper">money: $<span id="money">5</span></div> </div> <div id="tacowrapper"> <img id="donut" src="http://cliparts.co/cliparts/ltd/jrj/ltdjrjkpc.png"/> </div> <div id="shopwrapper"> <ul id="shop"> <div class="item" id="clickbonus1">click bonus (+1 donut / click) <br/> price: $50</div> <div class="item" id="clickbonus2">click bonus (+2 donut / click) <br/> price: $75</div> <div class="item" id="clickbonus5">click bonus (+5 donut / click) <br/> price: $150</div> <div class="item" id="autoclick">auto click (automatically +1 / second) <br/> price: 500</div> <div class="item" id="autobonus1">auto click bonus (+1 donut / second) <br/> price: $700</div> <div class="item" id="autobonus2">auto click bonus (+2 donut / second) <br/> price: $1000</div> <div class="item" id="autobonus5">auto click bonus (+5 donut / click) <br/> price: $1200</div> <div class="item" id="laser">laser (+50 donut / second) <br/> price: $2500</div> <li class="item" id="battery">battery (powers laser 2 minutes) <br/> price: $1500</div> <div class="item" id="energypotion">energy potion (shortens waiting time 30 seconds) <br/> price: $2500</div> <div class="item" id="key">??????</div> </ul> </div> </body> </html>
the code use refactoring, said, think know might happening. binding click handler #donut. every time #donut clicked, handler called. handler binds click handler #clickbonus1 every time called. if #donut click handler called multiple times, multiple handlers applied #clickbonus1, called when #clickbonus1 clicked, causing multiple alerts.
Comments
Post a Comment