Cześć.
Znam już całkiem nieźle Css, od kilku tygodni uczę się JS. Postanowiłem, że w ramach dodatkowej nauki napiszę grę podobną do Candy Crush Saga. Na razie wrzuciłem do dużego diva wrap 25 małych divów - kwadratów. W momencie pojawienia się, każdy z nich dostaje losowy kolor. Jeśli obok siebie (w poziomie) znajdują się 3 divy tej samej barwy, zadziała addEventListener, który po kliknięciu zmieni barwę wszystkich 25 kwadratów na różowy. Chciałbym teraz sprawić, żeby nie wszystkie kwadraty zmieniały kolor, tylko te trzy, które włączyły addEventListenera (3 kwadraty tego samego koloru leżące obok siebie w poziomie). Nie wiem jak to zrobić. Liczę na podpowiedź i konstruktywną krytykę mojego dotychczasowego kodu - zdaję sobie sprawę, że znaczną jego część pewnie można napisać prościej. Chciałbym, żeby ten temat był dla mnie dużym krokiem w nauce JS, dzięki Waszej pomocy mógłbym rozwiązywać kolejne napotykane problemy. Z góry dziękuję i pozdrawiam.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "wrap"></div>
<script src="app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 80vh;
height: 80vh;
border: solid gray 5px;
margin: 50px auto;
}
.candy {
width: 20%;
height: 20%;
float: left;
border: 1px black solid;
}
body {
height: 100vh;
width: 100vw;
}
const candy = document.querySelector('.candy');
const wrap = document.querySelector('.wrap');
let candyNumber = 1;
const start = () => {
const candyColors = ['red', 'blue', 'green'];
function createCandy() {
const createDiv = document.createElement('div');
document.querySelector('.wrap').appendChild(createDiv);
const randomCandy = Math.floor(Math.random() * candyColors.length);
createDiv.style.backgroundColor = candyColors[randomCandy];
createDiv.classList.add('candy', candyNumber, "div" + candyNumber, candyColors[randomCandy]);
}
for (i=0; i<25; i++) {
createCandy();
candyNumber++;
}
}
start();
function a() {
let x = 1;
let y = 3;
let z = 2;
for (i = 0; i < 22; i++) {
x++;
y++;
z++;
if (document.querySelector('.div' + z).classList.contains("red") && document.querySelector('.div' + y).classList.contains("red") && document.querySelector('.div' + x).classList.contains("red") || document.querySelector('.div1').classList.contains("red") && document.querySelector('.div2').classList.contains("red") && document.querySelector('.div3').classList.contains("red") || document.querySelector('.div' + z).classList.contains("green") && document.querySelector('.div' + y).classList.contains("green") && document.querySelector('.div' + x).classList.contains("green") || document.querySelector('.div1').classList.contains("green") && document.querySelector('.div2').classList.contains("green") && document.querySelector('.div3').classList.contains("green") || document.querySelector('.div' + z).classList.contains("blue") && document.querySelector('.div' + y).classList.contains("blue") && document.querySelector('.div' + x).classList.contains("blue") || document.querySelector('.div1').classList.contains("blue") && document.querySelector('.div2').classList.contains("blue") && document.querySelector('.div3').classList.contains("blue")) {
const allCandy = document.querySelectorAll('.candy');
allCandy.forEach((nazwa) => {
nazwa.style.backgroundColor = "pink";
})
}
}
}
document.querySelector('.wrap').addEventListener('click', a);