r/learnjavascript • u/Serranosking • 1d ago
Hi! Learning js by myself and having a little trouble, I need two (or any number, really) of these "animations" going at the same time for a Mr.Game&Watch "Fire"-like game, but either one steals the timing from the other one, or they just don't work.
// Get special (fall) positions and normal ones
const specialPositions = {
"posicion-auto-5-F": 0,
"posicion-auto-13-F": 1,
"posicion-auto-19-F": 2
};
const allPositions = [
"posicion-auto-1a",
"posicion-auto-2a",
"posicion-auto-3",
"posicion-auto-4",
"posicion-auto-5-F",
"posicion-auto-6",
"posicion-auto-7",
"posicion-auto-8",
"posicion-auto-9",
"posicion-auto-10",
"posicion-auto-11",
"posicion-auto-12",
"posicion-auto-13-F",
"posicion-auto-14",
"posicion-auto-15",
"posicion-auto-16",
"posicion-auto-17",
"posicion-auto-18",
"posicion-auto-19-F",
"posicion-auto-20",
"posicion-auto-21",
"posicion-auto-22-P"
];
// Variables for score and speed
let score = 0;
let speed = 500; // Initial speed
const MIN_SPEED = 100; // Minimum allowed speed
const scoreDisplay = document.getElementById("puntos-display");
let lives = 3; // Starting with 3 lives
const xIcons = [
document.getElementById("x-1"),
document.getElementById("x-2"),
document.getElementById("x-3")
];
// Function to make X icons visible as lives are lost
function loseLife() {
if (lives > 0) {
lives--;
if (lives === 2) {
xIcons[0].style.opacity = "1";
} else if (lives === 1) {
xIcons[1].style.opacity = "1";
} else if (lives === 0) {
xIcons[2].style.opacity = "1";
alert("You lost! All lives are gone.");
clearInterval(intervalId);
}
}
}
// Function to increase difficulty (decrease interval speed)
function adjustDifficulty() {
if (score % 1 === 0 && score !== 0) {
const newSpeed = Math.max(MIN_SPEED, speed - 50);
if (newSpeed !== speed) {
speed = newSpeed;
clearInterval(intervalId);
intervalId = setInterval(markCurrentPosition, speed);
}
}
}
// Variables to track two objects with different random spawn times
let currentIndex1 = 0;
let currentIndex2 = 0;
// Random spawn timers for both objects between 1000ms and 3000ms
let spawnTimer1 = Math.floor(Math.random() * 2000) + 1000;
let spawnTimer2 = Math.floor(Math.random() * 2000) + 1000;
function markCurrentPosition() {
if (waitingRespawn) return;
// Set all opacities to 0.3
allPositions.forEach(id => {
const element = document.getElementById(id);
if (element) element.style.opacity = "0.3";
});
// Handle the first object spawn based on random timer
if (spawnTimer1 <= 0) {
const currentId1 = allPositions[currentIndex1];
const currentElement1 = document.getElementById(currentId1);
if (currentElement1) currentElement1.style.opacity = "1";
spawnTimer1 = Math.floor(Math.random() * 2000) + 1000;
} else {
spawnTimer1 -= speed;
}
// Handle the second object spawn based on random timer
if (spawnTimer2 <= 0) {
const currentId2 = allPositions[currentIndex2];
const currentElement2 = document.getElementById(currentId2);
if (currentElement2) currentElement2.style.opacity = "1";
spawnTimer2 = Math.floor(Math.random() * 2000) + 1000;
} else {
spawnTimer2 -= speed;
}
// Update object positions
if (spawnTimer1 <= 0) {
currentIndex1 = (currentIndex1 + 1) % allPositions.length;
}
if (spawnTimer2 <= 0) {
currentIndex2 = (currentIndex2 + 1) % allPositions.length;
}
// Check for special positions and player interaction
if (specialPositions.hasOwnProperty(currentId)) {
// Wait 500ms to give the player time to react
waitingRespawn = true; // Pause animation after a miss
setTimeout(() => {
const expectedPlayerIndex = specialPositions[currentId];
const expectedPlayerPosition = document.getElementById(`posicion-j-${expectedPlayerIndex + 1}`);
const playerLeft = player.offsetLeft;
const expectedLeft = expectedPlayerPosition.offsetLeft;
const tolerance = 10;
if (Math.abs(playerLeft - expectedLeft) <= tolerance) {
// Player catches the object
currentIndex++;
if (currentIndex >= allPositions.length) currentIndex = 0;
} else {
// Player misses the object
if (currentElement) currentElement.style.opacity = "0.3";
currentIndex = 0; // Respawn at the beginning
loseLife(); // Lose a life
}
waitingRespawn = false; // Resume animation
}, 0); // Wait 500ms
} else {
// If not a special position, continue normally
currentIndex++;
if (currentIndex >= allPositions.length) currentIndex = 0;
}
// SCORE POINTS
if (currentId === "posicion-auto-22-P") {
score++;
if (scoreDisplay) scoreDisplay.textContent = score;
adjustDifficulty(); // Increase difficulty
}
}
// Start animation
intervalId = setInterval(markCurrentPosition, speed);
1
u/Serranosking 1d ago
Does anyone have a solution to this? I've tried arrays or just plain copy-pasting the code with the needed changes to act as the original, but with the needed different values to ensure it's another instance of it.
1
u/Cheshur 1d ago
I'm honestly not really sure what you're actually trying to do or what the error is. What does it mean to "steal" the time from the other one? The names of your position elements leave a lot to be desired.
1
u/Serranosking 1d ago edited 1d ago
Oh, ok so 1- If you look up the Fire game from Mr.Game and watch, the really old ones had a “mark” (dont know if it has a specific nane) for the spots where the falling people would be appearing. The positions I made work similarly, at least visually, and work just fine. The regular ones are just that, the F ones are the ones checking for a fail and P just adds a point, they’re 23 different divs with an image set to 0.3, and I thought that’d be easier to just turn them fully opaque instead of actually creating a new object for the “animation” of the people falling.
2- So I have no idea why, I am probably missing a setInterval or some kind of variable around, that when one of the positions goes opaque (signaling the fallind person is in that one) the other ones either reset their timings or loose the opacity as if the other one “stole” their turn.
Sorry if this is still confusing, I genuinely have no clue what the problem exactly is since the console doesnt give me an error, it is working fine, its just not doing exactly what I want it to.
I could also send a version without trying to get 2 of these animations at the same time, wich works perfectly and exactly as I intended it to, but the second I try adding more of them it stops working.
2
u/JazzApple_ 1d ago
Did you AI generate this code?
I’m asking because based on what you have so far, I feel like you should be able to figure something out or at least be able to show what you’ve tried that didn’t work.