Как я могу избежать условий гонки, когда пользователи пытаются купить обновления деревьев в моей игре "Cookie Clicker"? ⇐ Javascript

[Anonymous]

Я построил самую основную игру co₂ Saver Game (все еще работа, не судите). Идея проста: пользователи экономят Co₂, зарабатывают обновления и растения деревьев. Тем не менее, есть небольшой сбой - когда пользователи пытаются купить обновление дерева, в то время как их сбережения CO₂ все еще обновляются на заднем плане, начинается хаос. Проблема заключается в том, что когда пользователи возвращаются после офлайн, значение LocalStorage для Co₂ не синхронизировано, и они могут в конечном итоге попытаться купить обновление, которое они не могут себе позволить.
Вот упрощенная версия:




Green Game (Beta)

.tree {
width: 50px;
height: 50px;
background-color: green;
border-radius: 50%;
margin-top: 20px;
}
.tree.upgraded {
width: 100px;
height: 100px;
background-color: #8B4513; /* Tree brown color when upgraded */
}



Welcome to the Green Game (Beta)
Collecting CO₂ data...
Current CO₂: 0kg
You can plant a tree with 100kg of CO₂ saved.

Plant a Tree
Upgrade Tree


class GreenGame {
constructor() {
// Retrieve saved data from localStorage or use defaults
this.co2Saved = parseInt(localStorage.getItem("co2Saved")) || 0; // Load CO₂ or default to 0
this.treeThreshold = 100; // CO₂ needed to plant a tree
this.treeUpgraded = localStorage.getItem("treeUpgraded") === "true"; // Load tree upgrade status

this.co2Output = document.getElementById("co2-output");
this.gameStatus = document.getElementById("game-status");
this.treeStatus = document.getElementById("tree-status");
this.treeElement = document.getElementById("tree");
this.plantTreeBtn = document.getElementById("plant-tree-btn");
this.upgradeTreeBtn = document.getElementById("upgrade-tree-btn");

// Reflect saved tree upgrade state
if (this.treeUpgraded) {
this.treeElement.classList.add("upgraded");
this.treeStatus.textContent = "Tree upgraded! Now it’s a mighty tree!";
this.upgradeTreeBtn.disabled = true; // Disable upgrade after upgrading
}
}

updateCO2() {
// Simulate receiving new CO₂ data (could be from an API)
setTimeout(() => {
const newCO2 = Math.floor(Math.random() * 20); // Random CO₂ value
this.co2Saved += newCO2;
this.co2Output.textContent = `Current CO₂: ${this.co2Saved}kg`;

if (this.co2Saved >= this.treeThreshold) {
this.treeStatus.textContent = "You can now plant a tree!";
this.plantTreeBtn.disabled = false; // Enable plant button
} else {
this.treeStatus.textContent = "You need more CO₂ to plant a tree!";
this.plantTreeBtn.disabled = true; // Disable plant button
}

this.gameStatus.textContent = `New CO₂ input: +${newCO2}kg`;

// Save updated CO₂ value to localStorage
localStorage.setItem("co2Saved", this.co2Saved);

// Recursively simulate data updates
this.updateCO2();
}, 3000); // Updates every 3 seconds
}

plantTree() {
if (this.co2Saved >= this.treeThreshold) {
this.treeElement.classList.remove("upgraded"); // Reset upgrade on new tree
this.treeElement.style.display = "block";
this.treeStatus.textContent = "You planted a tree!";
this.co2Saved -= this.treeThreshold; // Subtract the CO₂ used to plant the tree
this.co2Output.textContent = `Current CO₂: ${this.co2Saved}kg`;

this.upgradeTreeBtn.disabled = false; // Enable upgrade button
this.plantTreeBtn.disabled = true; // Disable plant button after planting

// Save updated CO₂ value to localStorage
localStorage.setItem("co2Saved", this.co2Saved);
}
}

upgradeTree() {
this.treeElement.classList.add("upgraded");
this.treeStatus.textContent = "Tree upgraded! Now it’s a mighty tree!";
this.upgradeTreeBtn.disabled = true; // Disable upgrade button after upgrading

// Save tree upgrade state to localStorage
localStorage.setItem("treeUpgraded", "true");
}
}

// Start the game
const game = new GreenGame();
game.updateCO2(); // Begin simulation

// Attach event listeners to buttons
document.getElementById("plant-tree-btn").addEventListener("click", () => game.plantTree());
document.getElementById("upgrade-tree-btn").addEventListener("click", () => game.upgradeTree());



< /code>
Проблема: < /p>

[*] Сэкша Co₂ обновляется каждые несколько секунд, но когда пользователь возвращается после того, как он оказался в автономном режиме, их значение Co₂ не синхронизировано. Устарел. < /p>
< /li>
< /ol>
Вопрос: < /p>

Какой лучший способ предотвратить условия гонки, когда пользователь не работает, и возвращается, чтобы найти их сбережения полностью из ударов?// Initial CO2 savings and tree planting state
let co2Saved = 10;
let treeCount = 0;

const plantTreeButton = document.getElementById('plant-tree');
const upgradeTreeButton = document.getElementById('upgrade-tree');

const updateCO2 = (newCO2Value) => {
co2Saved = newCO2Value;
console.log(`CO₂ Saved: ${co2Saved}kg`);
};

const plantTree = () => {
console.log('Planting tree...');
treeCount++;
console.log(`You have ${treeCount} trees now.`);
};

const upgradeTree = () => {
console.log('Upgrading tree...');
treeCount++;
console.log(`You have ${treeCount} trees now.`);
};

// Simulating multiple clicks with race condition
plantTreeButton.addEventListener('click', () => {
// Simulate async updates to CO2 savings and tree planting
setTimeout(() => {
updateCO2(co2Saved + 10); // Update CO2 after planting tree
plantTree();
}, Math.random() * 1000); // Random delay to simulate timing race
});

upgradeTreeButton.addEventListener('click', () => {
// Simulate async updates to CO2 savings and tree upgrading
setTimeout(() => {
updateCO2(co2Saved + 5); // Update CO2 after upgrading tree
upgradeTree();
}, Math.random() * 1000); // Random delay to simulate timing race
});
< /code>
Это то, что происходит: < /p>

Процесс 1 Проверяет баланс и видит 100 кг. < /p>
< /li>
также проверяет баланс и видит 100 кг. 50 кг. или процессы работают одновременно.

Эти потоки/процессы имеют общий ресурс - база данных, которая привлекает живую информацию Co₂. Но если вы сможете решить это, я посадим дерево (в игре, потому что это работа в процессе).
>

Подробнее здесь: https://stackoverflow.com/questions/795 ... n-my-cooki