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

Question

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

хочу создать игру типа сапера где будет поле 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() 

}

Серёга Седачев

131

10.07.2023

Похожие вопросы

Answer 1 · 2023-06-05 17:31:18

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

 function lose(){  

   tabs[random].style.backgroundColor = 'red';  

   alert('You lose!')

   setTimeout(()=>{

   location.reload() 

   }, 1000)

}

AA

Ayhan Armut

388

Лучший ответ

05.06.2023

Серёга Седачев Все равно так же( Сначала всплывает алерт а потом уже меняется стиль хотелось бы наоборот

Серёга Седачев Спасибо большое за ответ! Решил проблему вот этим кодом

 function lose(){   

   tabs[random].style.backgroundColor = 'red';   

   setTimeout(()=>{ 

   	alert('You lose!') 

   }, 100) 

   setTimeout(()=>{ 

    location.reload() 

   }, 100) 

}

Answer 2 · 2023-06-05 18:29:24

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

НК

Николай Колипов

71 426

05.06.2023

Answer 3 · 2023-06-08 12:27:48

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

Павел Дьяков

59 846

08.06.2023

Answer 4 · 2023-06-05 20:59:44

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

 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, узнай как делать модальные окна.

Леонид Хейфец

6 773

05.06.2023