Witam. Jestem nowy w świecie programowania.
W ramach ćwiczeń stworzyłem prostą grę kółko i krzyżyk.
Gra działa jak należy, jednak problem polega na tym, że duplikują mi się eventy (zauważyłem to w firefox dla developerów).
const gameBoard = [...document.querySelectorAll(".field")];
const desc = document.querySelector(".description");
const span = document.querySelector(".winDisplay");
const fields = ["", "", "", "", "", "", "", "", ""];
let counter = 0;
let gameOver = false;
resetGame = function (btn) {
counter = 0;
gameOver = false;
span.innerText = "";
btn.remove();
gameBoard.forEach(item => {
if (item.firstChild) {
item.firstChild.remove();
}
});
fields.forEach((field, index) => fields.splice(index, 1, ""));
init();
};
reset = function () {
gameOver = true;
const btn = document.createElement("button");
btn.innerText = "resetuj";
desc.appendChild(btn);
btn.addEventListener("click", () => resetGame(btn));
};
computerWin = function () {
span.innerText = "Niestety, Przegrałeś!";
reset();
};
playerWin = function () {
span.innerText = "Udało się! Wygrałeś!";
reset();
};
draw = function () {
span.innerText = "Remis!";
reset();
};
checkWin = figure => {
if (
(fields[0] === figure && fields[1] === figure && fields[2] === figure) ||
(fields[0] === figure && fields[4] === figure && fields[8] === figure) ||
(fields[0] === figure && fields[3] === figure && fields[6] === figure) ||
(fields[1] === figure && fields[4] === figure && fields[7] === figure) ||
(fields[2] === figure && fields[5] === figure && fields[8] === figure) ||
(fields[3] === figure && fields[4] === figure && fields[5] === figure) ||
(fields[6] === figure && fields[7] === figure && fields[8] === figure) ||
(fields[6] === figure && fields[4] === figure && fields[2] === figure)
) {
if (figure === "cross") computerWin();
else playerWin();
} else if (counter === 9) draw();
};
computerTurn = () => {
if (counter === 9) return;
const crossContainer = document.createElement("div");
const crossElement = document.createElement("div");
crossElement.classList.add("cross");
crossContainer.classList.add("crossContainer");
crossContainer.appendChild(crossElement);
const crossIndex = Math.floor(Math.random() * fields.length);
if (fields[crossIndex]) {
computerTurn();
return;
}
const div = document.querySelector(`.field:nth-child(${crossIndex + 1})`);
div.appendChild(crossContainer);
fields[crossIndex] = "cross";
const cross = "cross";
counter++;
checkWin(cross);
};
pointCircle = (event, index) => {
const circleElement = document.createElement("div");
circleElement.classList.add("circle");
circleElement.setAttribute("draggable", "false");
event.target.appendChild(circleElement);
fields[index] = "circle";
counter++;
const circle = "circle";
checkWin(circle);
computerTurn();
};
init = () => {
gameBoard.forEach((field, index) =>
field.addEventListener("click", function handler(event) {
if (field.childElementCount || gameOver) {
field.removeEventListener("click", handler);
return;
}
pointCircle(event, index);
})
);
};
init();
Inna sprawa czy takie umieszczanie removeEventListenera jest poprawne?
Całość na codepen: https://codepen.io/MarekZet/pen/MWwjwpQ
- events.jpg (116 KB) - ściągnięć: 85
