shoe clicker game
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mainBox">
<h1>
Clicker Game
</h1>
<p id="moneycount">Money: </p>
<img onclick="addmoney()" id="currentShoe_" class="currentShoe" width="200" height="200"src="https://media-hosting.imagekit.io//ea1e049fbcf644d4/s-l1200-removebg-preview.png?Expires=1830903997&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=NweFsxKFChHxDifszLsX78ixa2tmIZQQ3DO98sDNInERjv8ikTpsUwcrVcsszGzN2O6eQ3DqLyJlyjZkvqtwjsN18hCZUhRghwfqQTmSJIm~qGaaRr9xJvcFooYIFWMqr-6jvOX2Dp7Sl0zJnP00zEFrWjXH1hcIWyAsGNUp~NCWLs5ilX-FacU1HESKGfYDy22Je84CEFzeRm0XwXy6FLTKYm2xk1D0rWoH0Qd5DrwA4nufjj3EcJsp6FAyNhZV69IuKS5FlJZA~PvQMpvcmXb005SiZtvUtFNUDJJs~C339KQ2BRWMMomBk~zrAmYXjVc-CwPSU9Xf3W5HKrJ8PQ__">
<p id="shoeClickCount">Your Shoe Makes $ per click</p>
<p id="currentShoeName">Current Shoe: </p>
</div>
<div class="invBox">
<img src="">
</div>
</body>
</html>
CSS
.currentShoe{
cursor: pointer;
}
.clickAnimation {
animation: animation 1s linear infinite;
}
@keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
JAVASCRIPT
var money = 0;
var moneyupgradelvl = 1;
function addmoney(){
document.getElementById("moneycount").innerHTML = "Money: $" + money;
money = money + moneyupgradelvl;
document.getElementById("currentShoe_").classList.add('clickAnimation');
setTimeout(resetClick, 100);
}
function resetClick(){
document.getElementById("currentShoe_").classList.remove('clickAnimation');
}
var currentShoe = {
shoes
}
var shoes = {
shoe1: {
shoeName: "Air Force 1",
cashPerClick: 1
}
};
function reset(){
document.getElementById("moneycount").innerHTML = "Money: $" + money;
money = money + moneyupgradelvl;
}
reset();
document.getElementById("shoeClickCount").innerHTML = "Your Shoe Makes $" + " per click";
