Настройка local-storage для игры крестики-нолики
Делаю крестики-нолики, после игры появляется кнопка с предложением начать игру заново(она делает перезагрузку страницы),надо сделать,чтобы функция startGame не вызывалась(если в хранилище есть имена),что бы имена игроков из promptа сохранялись, и так же их количество их очков сохранялось, данные в локал сторейдж я получаю,а вот как дальше делать не знаю,прошу дать какие-то советы или подсказки как это реализовать.Спасибо.Тут максимум 3800 символов, поэтому скину только функцию начала игры, и основную функцию которая срабатывает при клике на каждую ячейку.
function startGame() {
firstPlayer = prompt("Введите имя 1ого игрока");
secondPlayer = prompt("Введите имя 2ого игрока");
localStorage.setItem("firstName", firstPlayer);
localStorage.setItem("secondName", secondPlayer);
document.querySelector("#first_gamer_id").innerText = `${firstPlayer} X`;
document.querySelector("#second_gamer_id").innerText = `${secondPlayer} O`;
nowMove.innerHTML = `<h2>${firstPlayer} X</h2>`;
} function cellClick() {
if (isCrossMove) {
this.innerHTML = "<div class='cross'></div>";
nowMove.innerHTML = `<h2>${secondPlayer} O</h2>`;
dataArrCross.push(parseInt(this.getAttribute("position")));
if (checkWin(dataArrCross, winArr)) {
showEndGameWindow(firstPlayer, firstCount, i++);
localStorage.setItem("firstCount", i);
}
} else {
this.innerHTML = "<div class='circle'></div>";
nowMove.innerHTML = `<h2>${firstPlayer} X</h2>`;
dataArrCircle.push(parseInt(this.getAttribute("position")));
if (checkWin(dataArrCircle, winArr)) {
showEndGameWindow(secondPlayer, secondCount, j++);
localStorage.setItem("secondCount", j);
}
}
if (
checkTie(dataArrCircle, dataArrCross) &&
!checkWin(dataArrCircle, winArr) &&
!checkWin(dataArrCross, winArr)
) {
showEndGameWindow("TIE", tieCount, t++);
localStorage.setItem("tieCount", t);
}
isCrossMove = !isCrossMove;
} На вопросы как сделать можно сказать лишь "учи язык". Люди приводят конкретный случай, пример кода и рассказывают предысторию, однако все это не надо. Вопрос надо стараться ставить так: "Как сохранить данные в localStorage"? И на простом примере понимаешь. А после натягиваешь на свою модель. Зачем тебе перезагружать страницу? Можно же просто очистить холст или удалить картинки, сбросить переменные очков... А если все так нужно так, то что типа такого:
if (localStorage.getItem('record')) {
//Выполняем код
} Если уже есть обозначенная переменная рекорда(В игру уже играли и предположительно перезагрузили страницу с целью начать новую игру), она равна true, то выполняем код.
Или наоборот, ставить проверку !== undefined
Для реализации сохранения и восстановления данных из локального хранилища (local storage) при перезагрузке страницы, вам необходимо выполнить следующие шаги:
1. Проверьте, есть ли значения в локальном хранилище при загрузке страницы:
```javascript
window.addEventListener('DOMContentLoaded', () => {
// Проверяем наличие имен игроков в локальном хранилище
if (localStorage.getItem('firstName') && localStorage.getItem('secondName')) {
// Если имена есть, получаем их значения
firstPlayer = localStorage.getItem('firstName');
secondPlayer = localStorage.getItem('secondName');
} else {
// Если имена отсутствуют, запрашиваем их снова
firstPlayer = prompt("Введите имя 1-го игрока");
secondPlayer = prompt("Введите имя 2-го игрока");
localStorage.setItem('firstName', firstPlayer);
localStorage.setItem('secondName', secondPlayer);
}
// Здесь можно продолжить остальную инициализацию игры, используя полученные имена игроков.
});
```
2. При сохранении результатов игры в локальное хранилище, вы можете обновить соответствующие значения счетчиков:
```javascript
if (checkWin(dataArrCross, winArr)) {
showEndGameWindow(firstPlayer, firstCount, i++);
localStorage.setItem('firstCount', i);
}
// ...
if (checkWin(dataArrCircle, winArr)) {
showEndGameWindow(secondPlayer, secondCount, j++);
localStorage.setItem('secondCount', j);
}
// ...
if (checkTie(dataArrCircle, dataArrCross) && !checkWin(dataArrCircle, winArr) && !checkWin(dataArrCross, winArr)) {
showEndGameWindow('TIE', tieCount, t++);
localStorage.setItem('tieCount', t);
}
```
3. Для восстановления счетчиков из локального хранилища, можно использовать следующий код:
```javascript
window.addEventListener('DOMContentLoaded', () => {
// Проверяем наличие счетчиков в локальном хранилище
if (localStorage.getItem('firstCount')) {
// Если счетчик первого игрока есть, получаем его значение
firstCount = parseInt(localStorage.getItem('firstCount'));
}
if (localStorage.getItem('secondCount')) {
// Если счетчик второго игрока есть, получаем его значение
secondCount = parseInt(localStorage.getItem('secondCount'));
}
if (localStorage.getItem('tieCount')) {
// Если счетчик ничьих есть, получаем его значение
tieCount = parseInt(localStorage.getItem('tieCount'));
}
// Здесь можно продолжить остальную инициализацию игры, используя восстановленные счетчики.
});
```
Теперь, при перезагрузке страницы, значения имен игроков и счетчиков будут сохраняться и восстанавливаться из локального хранилища.
Ты можешь сохранить всю конфигурацию игры, всю модель целиком. У тебя должна быть игровая модель со всеми очками, именами и так далее. Вот и сохрани её в localStorage.
Зачем перезагружать страницу, чтобы начать новую игру? Как-то слишком заморочно. Начни новую игру в коде. Выполни какой-нибудь startGame, очистку и так далее.
букаф английскех многа я не понимать