$(document).ready(function() {
tacoClick();
});
function tacoClick() {
//hide the items
$(".item").hide();
//defining some 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 the 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, and taking away energy
player.clicks += player.clickAmount;
player.energy -= player.energyLost;
player.money += player.clickAmount / 10;
//showing player status on the 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 to wait ten more minutes until you can play again!");
$("body").fadeOut();
window.setTimeout(function revive() {
$("body").fadeIn();
player.energy = 100;
}, player.waitTime);
}
//the items! now, it gets really tricky...
if(player.money > 6) {
$("#clickBonus1").show();
$("#clickBonus1").click(function() {
var confirmBuy = confirm("Do you want to buy this item for $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 for 2 minutes) <br/> Price: $1500</div>
<div class="item" id="energyPotion">Energy Potion (shortens waiting time by 30 seconds) <br/> Price: $2500</div>
<div class="item" id="key">??????</div>
</ul>
</div>
</body>
</html>
