Blokowanie funkcji po wykonaniu

Witam.
Na wstępie od razu chcę powiedzieć ,że jestem nowy. JS uczę się od nie dawna więc proszę aby nie krytykować ponieważ kod może wyglądać słabo ale lepiej nie potrafię na dzień dzisiejszy.
Chcę stworzyć GRĘ W KUBKI ogólnie się udało wszystko fajnie działa ,po kliknięciu start, kubeczki się obniżają i zasłaniają kulkę (którą musimy znaleźć) i zamieniają się miejscami, następnie po kliknięciu w dany kubeczek przykładowo trzeci to w tym samym momencie rozpoczyna sie losowanie między liczbą 1 a 3, jeśli komputer wylosuje również 3 to mamy zwycięstwo. I w tym momencie pojawia sie problem ... ponieważ mimo pokazania wyniku możemy nadal klikać w kubeczki i bawić się w najlepsze, wybierać inny kubek a PC losuje numer itd itd. Pytanie co zrobić aby po pokazaniu wyniku zablokować tą funkcję abym nie mógł klikać w kubeczki, aby jedynie miejsce gdzie mogę kliknąć to przycisk RESET który wrzuci piłeczkę znowu pod środkowy kubek i będę znowu mógł nacisnąć start itd.

const btn = document.querySelector('button')
const text = document.querySelector('div.text')
const ball = document.querySelector('div.ball img')
const boxes = [...document.querySelectorAll('div.box')]
const board = ['1', '2', '3']
let win = 0
let lose = 0

function pick() {
    document.querySelector('div.kubek1').classList.add('up')
    document.querySelector('div.kubek2').classList.add('up')
    document.querySelector('div.kubek3').classList.add('up')
    const now = this.dataset.now
    const pc = Math.floor(Math.random() * 3)
    // console.log(now)
    // console.log(board[pc])
    const pccc = board[pc]

    if (pccc == 1) {
        ball.style.left = '15%'
    } else if (pccc == 2) {
        ball.style.left = '48%'
    } else {
        ball.style.left = "80%"
    }
    if (now == pccc) {
        console.log('WYGRAŁEŚ')
        text.textContent = 'WYGRAŁEŚ'
        text.style.color = 'blue'
        win++
    } else {
        console.log('PRZEGRAŁEŚ')
        text.textContent = 'PRZEGRAŁEŚ'
        text.style.color = 'red'
        lose++
    }
    btn.textContent = 'RESET'
}

function buttonclick() {
    btn.textContent = 'START'
    text.textContent = ''
    ball.style.left = '48%'
    document.querySelector('div.kubek1').classList.remove('up')
    document.querySelector('div.kubek2').classList.remove('up')
    document.querySelector('div.kubek3').classList.remove('up')
    document.querySelector('div.kubek1').classList.toggle('down')
    document.querySelector('div.kubek1').classList.toggle('action1')
    document.querySelector('div.kubek2').classList.toggle('down')
    document.querySelector('div.kubek3').classList.toggle('down')
    document.querySelector('div.kubek3').classList.toggle('action3')
}


btn.addEventListener('click', function () {
    btn.addEventListener('click', buttonclick)
    boxes.forEach(box => box.addEventListener('click', pick))
})

Skoro i tak uzywasz zmiennych globalnych to:

if (gameIsActive)

stivens napisał(a):

Skoro i tak uzywasz zmiennych globalnych to:

if (gameIsActive)

Chodzi o to aby ustawić
let gameIsActive = true
a następnie po podawaniu wyniku zmienic go na gameIsActive = false ?

Jak wyżej, zrób sobie dodatkową zmienną typu boolowskiego i przestawiaj ją, gdy gra się kończy/rozpoczyna. Wykonanie funkcji możesz wtedy uciąć jedną prostą linijką if (!gameIsActive) return;.

To tego zauważyłem coś dziwnego w kodzie, po wygenerowaniu pc, które jest liczbą, używasz tego, żeby sobie wybrać stringa z tablicy. Powstaje niebezpieczna sytuacja w kodzie, bo dochodzi do porównań typu '1' == 1, co działa tylko dlatego, że podwójne porównanie ma pokręconą logikę, która sprowadza obie wartości do stringów. Generalnie to jest mało bezpieczne, lepiej używać === i zdecydować się na jeden typ.

Wszytko działa dziękuje za pomoc. Tworzyłem już wcześniej dodatkową zmienną lecz w złym miejscu dawałem IF ale udało się mi do tego dojść. I zdecydowałem sie na typ number w tablicy :) będzie bezpieczniej. Jeszcze raz dzięki :D