Вопрос по коду. Js. Кликер игра
Я новичок в js. Можете пожалуйста оценить код javascript, дать советы по коду чтобы в будущем делать все првильно и все было более-менее оптимизировано и без всякого хлама. Это простая игра кликер, где есть магазин с автокликами и мультикликами.
const addClickButton = document.querySelector('.click-button');
const labelClicks = document.querySelector('.clicks');
const upgradeButton = document.querySelector('.upgrade-button');
const multiClicksLabel = document.querySelector('.multi-clicks');
const buyAutoclicksButton = document.querySelector('.buy-autoclick');
const labelAutoClicks = document.querySelector('.autoclicks-label');
let clicks = 0;
let multiClicks = 1;
let price = 100;
let autoclicks = 0;
let autoclicksPrice = 50;
function resetAll() {
localStorage.setItem('clicks', 0);
localStorage.setItem('multiClicks', 1);
localStorage.setItem('upgradePrice', 100);
localStorage.setItem('autoClicks', 0);
localStorage.setItem('buyAutoClicksPrice', 50);
}
function loadProggres() {
clicks = Number(localStorage.getItem('clicks'));
multiClicks = Number(localStorage.getItem('multiClicks'));
price = Number(localStorage.getItem('upgradePrice'));
autoclicks = Number(localStorage.getItem('autoClicks'));
autoclicksPrice = Number(localStorage.getItem('buyAutoClicksPrice'));
}
function saveProggres() {
localStorage.setItem('clicks', clicks);
localStorage.setItem('multiClicks', multiClicks);
localStorage.setItem('upgradePrice', price);
localStorage.setItem('autoClicks', autoclicks);
localStorage.setItem('buyAutoClicksPrice', autoclicksPrice);
}
function setElementsTextContent() {
labelClicks.textContent = clicks;
upgradeButton.textContent = `UPGRADE! Price: ${price}`;
multiClicksLabel.textContent = `Multi Clicks: ${multiClicks}`;
labelAutoClicks.textContent = `Autoclicks: ${autoclicks}`;
buyAutoclicksButton.textContent = `AUTOCLICK! Price: ${autoclicksPrice}`;
}
function doAutoClick() {
if (autoclicks > 0) {
clicks += autoclicks;
}
}
function click() {
clicks += 1 * multiClicks;
};
function upgradeButtonClicks() {
if (clicks >= price) {
clicks -= price;
multiClicks += 1;
price = Math.floor(price * 1.5);
}
}
function buyAutoClick() {
if (clicks >= autoclicksPrice) {
clicks -= autoclicksPrice;
autoclicks += 1;
autoclicksPrice = Math.floor(autoclicksPrice * 1.2);
}
}
addClickButton.addEventListener('click', click);
upgradeButton.addEventListener('click', upgradeButtonClicks);
buyAutoclicksButton.addEventListener('click', buyAutoClick);
window.addEventListener('beforeunload', saveProggres);
window.addEventListener('DOMContentLoaded', loadProggres);
setInterval(doAutoClick, 1000);
setInterval(setElementsTextContent);
.clicks {
text-align: center;
font-size: 25px;
font-weight: 600;
}
.click-button {
display: block;
margin: 0 auto;
width: 70px;
height: 50px;
font-weight: 600;
}
.upgrade-button {
width: 100px;
height: 50px;
}
<p class="clicks">0</p>
<button class="click-button">CLICK!</button>
<button class="upgrade-button">UPGRADE! Price: 100</button>
<p class="multi-clicks"></p>
<button class="buy-autoclick">AUTOCLICK! Price: 50</button>
<p class="autoclicks-label"></p>
Ответы (1 шт):
Вы этого не можете видеть так как на вашей машине
localStorageуже заполнен. Но новый пользователь вашего кода получит все нули в переменныхclicks,multiClicks,price,autoclicks,autoclicksPrice, что нарушит логику кликера.Когда не хватает кликов, кнопки нажимаются но ничего не делают. Если так принято в кликерах, ок. Если нет, имеет смысл запрещать кнопки при нехватке средств.
setInterval(setElementsTextContent);срабатывает 60 раз в секунду. Это не хорошо. Желательно обновлять надписи на кнопках лишь когда это необходимо.if (autoclicks > 0) {не нужен. От добавления нуля к переменной вреда не будет.Работу с
localStorageможно упростить, если хранить все значения в видеJSONи читать/писать их в одну операцию. Заодно вы избавитесь от массы повторяющихся ключей при записи и чтении.1 * multiClicks– лишено смысла.Все глобальные переменные можно переделать в локальные.
Proggres->Progress.