Помогите с кодом js

Question

Помогите с кодом js

Bedro Уу Ученик (131), закрыт 10 месяцев назад

хочу создать игру типа сапера где будет поле 3 на 3 и в случайной ячейке поля будет бомба, по нажатию на которую игрок проигрывает. Скрипт весь написал но хочу узнать как сделать чтобы после нажатия на бомбу ячейка становилась красной? вот мой код но он работает не так как надо

 let a1 = document.getElementById('tab1'); 
let a2 = document.getElementById('tab2'); 
let a3 = document.getElementById('tab3'); 
let b1 = document.getElementById('tab4'); 
let b2 = document.getElementById('tab5'); 
let b3 = document.getElementById('tab6'); 
let c1 = document.getElementById('tab7'); 
let c2 = document.getElementById('tab8'); 
let c3 = document.getElementById('tab9'); 
let tabs = []; 
 
tabs = [ 
	a1, a2, a3, 
	b1, b2. b3, 
	c1, c2, c3, 
] 
 
let random = Math.round(Math.random() * 7); 
tabs[random].addEventListener('click', lose); 
 
function lose(){ 
	tabs[random].style.backgroundColor = 'red'; 
	alert('You lose!') 
	location.reload() 
}

Answer 1

Добрый день, код работает неправильно, потому что та же самая функция, что меняет стиль клетки, ещё и сразу же перезагружает страницу. Может, перезагрузку обернуть в timeout?

 function lose(){  
   tabs[random].style.backgroundColor = 'red';  
   alert('You lose!')
   setTimeout(()=>{
   location.reload() 
   }, 1000)
}

Answer 2

Решением твоей проблемы будет выкинуть нафиг свой alert со всплывающим сообщением, и вместо этого выводить информацию иначе. Да тут даже выводить ничего не надо. Обычный грустный смайлик, а также демонстрация всех бомб на карте. Подобные всплывающие окна будут только раздражать игроков.
А если тебе захочется увеличить поле, ты будешь ещё добавлять getElementById? Почитай про Open-Closed принцип проектирования. Добавь какой-нибудь цикл и не парься.
У тебя изначально должна быть адекватная игровая модель, которой в коде не видно. В данном случае это набор ячеек, за которыми стоит информация, является ли ячейка бомбой. Для упрощения программирования можно даже использовать двумерный массив, так как в данном случае более наглядно и проще определять соседние клетки.

Answer 3

У тебя код написан слишком брутально, его нужно исправить в некоторых местах. Во-первых: у тебя тонна кода для каждой ячейки. Добавляй им не разные классы, а один и делай примерно так:

 const tabs = document.querySectorAll('tab');

И ты уже получил свой массив с каждой клеткой. А обращаться к ячейке можешь по индексу:

 let random = Math.floor(Math.random() * 9);
tabs[random].addEventListener('click', lose);

И все! Мы заменили твою писанину 3 строчками! И html у тебя не пестрит разнообразными классами!
И финальная функция

 tabs[random].style.background = 'red';
alert('Поражение');

У тебя срабатывает перезагрузка страницы сразу же, я ее убрал отсюда. Придумай что то получше alert, узнай как делать модальные окна.

Answer 4

https://codepen.io/norbert123/pen/GRwgwOq написал на коленке игрушку с одной миной в случайном положении