Вопрос по коду. 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 шт):

Автор решения: Stanislav Volodarskiy
  1. Вы этого не можете видеть так как на вашей машине localStorage уже заполнен. Но новый пользователь вашего кода получит все нули в переменных clicks, multiClicks, price, autoclicks, autoclicksPrice, что нарушит логику кликера.

  2. Когда не хватает кликов, кнопки нажимаются но ничего не делают. Если так принято в кликерах, ок. Если нет, имеет смысл запрещать кнопки при нехватке средств.

  3. setInterval(setElementsTextContent); срабатывает 60 раз в секунду. Это не хорошо. Желательно обновлять надписи на кнопках лишь когда это необходимо.

  4. if (autoclicks > 0) { не нужен. От добавления нуля к переменной вреда не будет.

  5. Работу с localStorage можно упростить, если хранить все значения в виде JSON и читать/писать их в одну операцию. Заодно вы избавитесь от массы повторяющихся ключей при записи и чтении.

  6. 1 * multiClicks – лишено смысла.

  7. Все глобальные переменные можно переделать в локальные.

  8. Proggres -> Progress.

→ Ссылка