So, I have a clicker game that I am making, and it seems that I may have done something wrong, so the animation for the loader is Spinning, which is being done using the css, but when I use javascript to move the blocks around, it is not working, nothing is moving. Please help me figure out what is going on. Thanks!
<center>
<head>
<title>RapidClicker</title>
</head>
<body onLoad="kickStart()">
<div class="preloader" id="preloader">
<div class="blocks" id="blocks">
<div class="block" id="block"></div>
<div class="block" id="block"></div>
<div class="block" id="block"></div>
</div>
<h4 id="loadingText">Loading</h4>
</div>
<div>
<h1 id="amount"> 0 </h1>
<button class="main" onClick="clicked()">Click Me!</button><br><br>
<button onClick="upgrade2()">Increase Earnings +1<p id="upCost2">100</p></button><br><br>
<button onClick="upgrade()">Double Earnings<p id="upCost1">200</p></button><br><br>
<button onClick="upgrade3()">Increase Earnings +4<p id="upCost3">500</p></button><br><br>
<button onClick="upgrade4()">Auto Clicker<p id="upCost4">1000</p></button><br><br>
</div>
<div>
<b>
<p>Statistics</p><br><br>
<p>Clicks</p>
<p id="clickamount">0</p><br>
<p>Upgrades</p>
<p id="upgradeamount">0</p><br>
<p>Money Earned</p>
<p id="moneyamount">0</p><br>
<p>Ticks</p>
<p id="ticks">0</p>
</b>
</div>
<div>
<p> Settings </p>
<br>
<button onClick="rel()">Reset</button><br><br>
<button onClick="resetmoney()">Set money to 0</button><br><br>
<p>2023 - ClickerMe by GroupSSalt<br></p>
<h2> Version </h2>
<h1 id="version">2</h1>
</div>
<br>
<audio controls autoplay>
<source src="audio/Track1.mp3" type="audio/ogg">
</audio>
<script>
"use strict";
var money = 0;
var upgradeCost1 = 200;
var clicks = 0;
var statAdd = 1;
var upgrades = 0;
var moneyEarned = 0;
var moneyAdd = 1;
var times2 = 2;
var add1 = 1;
var upgradeCost2 = 100;
var upgradeCost3 = 500;
var add4 = 4;
var upgradeCost4 = 1000;
var ticksamt = 0;
var autoAdd = 1;
var version = "2";
var clicksOutput = document.getElementById('clickamount');
var upgradesOutput = document.getElementById('upgradeamount');
var moneyEarnedOutput = document.getElementById('moneyamount');
var amount = document.getElementById('amount');
var upCost1 = document.getElementById('upCost1');
var versionDisplay = document.getElementById('version');
var upCost2 = document.getElementById('upCost2');
var upCost3 = document.getElementById('upCost3');
var upCost4 = document.getElementById('upCost4');
var autoUpCost = document.getElemenyById('autoUpCost');
var ticks = document.getElemenyById('ticks');
function clicked() {
money += moneyAdd;
clicks += statAdd;
moneyEarned += moneyAdd;
amount.innerHTML = money;
clicksOutput.innerHTML = clicks;
moneyEarnedOutput.innerHTML = moneyEarned;
setInterval(tickspersec, 1);
}
function upgrade() {
if (money >= upgradeCost1) {
money -= upgradeCost1;
upgradeCost1 *= times2;
moneyAdd *= times2;
upgrades += statAdd;
upgradesOutput.innerHTML = upgrades;
amount.innerHTML = money;
upCost1.innerHTML = upgradeCost1;
}
}
function upgrade2() {
if (money >= upgradeCost2) {
money -= upgradeCost2;
upgradeCost2 *= times2;
moneyAdd += add1;
upgrades += statAdd;
upgradesOutput.innerHTML = upgrades;
amount.innerHTML = money;
upCost2.innerHTML = upgradeCost2;
}
}
function upgrade3() {
if (money >= upgradeCost3) {
money -= upgradeCost3;
upgradeCost3 *= times2;
moneyAdd += add4;
upgrades += statAdd;
upgradesOutput.innerHTML = upgrades;
amount.innerHTML = money;
upCost3.innerHTML = upgradeCost3;
}
}
function upgrade4() {
if (money >= upgradeCost4) {
money -= upgradeCost4;
upgradeCost4 *= times2;
upgrades += statAdd;
autoAdd += add1;
upgradesOutput.innerHTML = upgrades;
amount.innerHTML = money;
upCost4.innerHTML = upgradeCost4;
setInterval(upgrade4function, 5000);
}
}
function upgrade4function() {
money += autoAdd;
clicks += statAdd;
moneyEarned += moneyAdd;
upgradesOutput.innerHTML = upgrades;
amount.innerHTML = money;
clicksOutput.innerHTML = clicks;
upCost4.innerHTML = upgradeCost4;
moneyEarnedOutput.innerHTML = moneyEarned;
}
function rel() {
location.reload();
}
function resetmoney() {
money = 0;
amount.innerHTML = money;
}
function kickStart() {
versionDisplay.innerHTML = version;
}
function tickspersec() {
ticksamt += add1;
ticks.innerHTML = ticksamt;
}
document.onkeydown = function (e) {
return false;
};
// Loading
let preload = function () => {
const blocks = document.querySelectorAll('.preloader .block .block');
let interval = 0;
blocks.forEach((block, i) => {
setTimeout(() => {
animate(block, i);
}, interval);
interval += 500;
});
function animate(block, index) {
let position = index;
setInterval(() => {
switch (position) {
case 0:
block.style.top = "40px";
position = 3;
break;
case 1:
block.style.left = "40px";
position = 0;
break;
case 2:
block.style.top = "0px";
position = 1;
break;
case 3:
block.style.left = "0px";
position = 2;
break;
}
}, 1500);
}
}
preload();
</script>
<style>
body {
background-image: url('Halloween-bkgrnd.png');
background-attachment: fixed;
background-size: 100% 100%;
margin: 0;
padding: 0;
}
div {
border: 3px solid white;
width: 300px;
}
input {
border: 3px solid white;
background-color: transparent;
}
h1 {
color: white;
}
h2 {
color: white;
}
h3 {
color: white;
}
h4 {
color: white;
}
h5 {
color: white;
}
h6 {
color: white;
}
p {
color: white;
}
a {
border: 2px solid white;
color: white;
background-color: transparent;
width: 50%;
}
button {
border: 3px solid white;
color: white;
width: 250px;
background-color: transparent;
}
.preloader {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
width: 100vw;
height: 100vh;
background-color: black;
border: 0px solid black;
transition: all 0.5s ease-out;
}
.preloader .loadingText {
color: white;
font-size: 70px;
font-weight: 500;
}
.preloader .blocks {
position: relative;
width: 78px;
height: 78px;
border-radius: 5px;
border: 0px solid black;
animation: rotate 5s ease-in-out infinite;
}
.preloader .blocks .block {
position: absolute;
border-radius: 5px;
width: 20px;
height: 20px;
border-color: orange;
background-color: orange;
}
.preloader .blocks .block:nth-child(1) {
top: 0;
left: 40px;
}
.preloader .blocks .block:nth-child(2) {
top: 0;
left: 0;
}
.preloader .blocks .block:nth-child(3) {
top: 40px;
left: 0;
}
@keyframes rotate {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
</style>
Feel free to change around the code in order to help me with my problem.
here i fixed it for you.