Play Again Button

[RyanCLuis]

What's the problem you're trying to solve?

whenever i try write any code in js to make my playAgainBttn, my game just doesn't work. Im trying to get it so my button is hidden, then my game is over and displays, and when you click it, it restarts the game.

Post any code you think might be relevant (one fenced block per file)

let board = []
let rows = 8
let columns = 8
let minds = 8
// this will tell us the loction of the minds ex. 2-4, 0-1, etc
let mindsLocation = []
let tilesClicked = 0
// this is to tell us when the flag button is toggled 
let headEn = false
let gameOver = false

    renderBoard()

// we are setting specific locations for now, until the end to where we can randomize them!
function setMinds() {

    // mindsLocation.push("2-2", "2-4", "0-0", "5-6", "3-4", "1-1")

    let mindsLeft = minds;
    while (mindsLeft > 0) { 
        let r = Math.floor(Math.random() * rows);
        let c = Math.floor(Math.random() * columns);
        let id = r.toString() + "-" + c.toString();

        if (!mindsLocation.includes(id)) {
            mindsLocation.push(id);
            mindsLeft -= 1;
        }
    }
}

function renderBoard() {
    document.getElementById("mind-count").innerText = minds
    document.getElementById("head").addEventListener("click", setHead)
    setMinds()
    // populate my tiles using a for loop
    for (let r = 0;r < rows; r++) {
        let row = []
        for (let c = 0; c < columns; c++) {
            // making a div tag in HTML
            let tile = document.createElement("div")
            tile.id = `${r}-${c}`
            tile.addEventListener("click", tileClicked)
            document.getElementById("tiles").append(tile)
            row.push(tile)
        }
        board.push(row)
    }
    // console.log(board)
}

function setHead() {
    if (headEn) {
        headEn = false
        document.getElementById("head").style.backgroundColor = "#ff83ff"
    } 
    else {
        headEn = true
        document.getElementById("head").style.backgroundColor = "green"
    }
}

function tileClicked() {
    // this statement will happen === true then the rest wont happen
    if (gameOver || this.classList.contains("tile-clicked")) {
        return
    }

    let tile = this
    // this is to place the "flag" on the tiles
    if (headEn) {
        if (tile.innerText === "") {
            tile.innerText = "🥴"
        } 
        else if (tile.innerText === "🥴") {
            tile.innerText = ""
        }
        // putting return so i dont hit a mind when I set a head
        return
    }
// this is if you hit the mine
    if (mindsLocation.includes(tile.id)) {
        gameOver = true
        revealMinds()
        return
    }
// this is if we dont hit a mind, itll tell us how many are nearby
    let divCoord = tile.id.split("-") // spliting "0-0" to [0,0]
    let r = parseInt(divCoord[0])
    let c = parseInt(divCoord[1])
    checkMinds(r, c)
}

function revealMinds() {
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < columns; c++) {
            let tile = board[r][c]
            if (mindsLocation.includes(tile.id)) {
                tile.innerText = "🧠"
                tile.style.backgroundColor = "red"
            }
        }
    }
}

function checkMinds(r, c) {
    if (r < 0 || r >= rows || c < 0 || c >+ columns) {
        return
    }
    // if this line is true, it will not do the code below
    if (board[r][c].classList.contains("tile-clicked")) {
        return
    }

    board[r][c].classList.add("tile-clicked")
    tilesClicked += 1

    let mindsFound = 0

    // checking the top 3 divs
    mindsFound += checkTile(r-1, c-1) // this is top left
    mindsFound += checkTile(r-1, c) // this is top 
    mindsFound += checkTile(r-1, c+1) // this is top right

    // checking left and right
    mindsFound += checkTile(r, c-1) // this is left
    mindsFound += checkTile(r, c+1) // this is right

    // this is bottom
    mindsFound += checkTile(r+1, c-1) // this is bottom left
    mindsFound += checkTile(r+1, c) // this is bottom 
    mindsFound += checkTile(r+1, c+1) // this is bottom right

    // this is to add the "hint" to the tile if no minds are there and are nearby
    if (mindsFound > 0) {
        board[r][c].innerText = mindsFound
        board[r][c].classList.add(`m${mindsFound}`)
    }

    // setting up recursion(aka "flood effect")
    else {
        board[r][c].innerText = ""

        // top 3
        checkMinds(r-1, c-1) // top left
        checkMinds(r-1, c) // top 
        checkMinds(r-1, c+1) // top right

        // checking left and right
        checkMinds(r, c-1) // left
        checkMinds(r, c+1) // right

        // check bottom
        checkMinds(r+1, c-1) // bottom left
        checkMinds(r+1, c) // bottom 
        checkMinds(r+1, c+1) // bottom right
    }

    // changes minds to text when all minds are "cleared"
    if (tilesClicked === rows * columns - minds) {
        document.getElementById("mind-count").innerText = "You saved you're mind!"
        gameOver = true
    }
}

function checkTile(r, c) {
    if (r < 0 || r >= rows || c < 0 || c >+ columns) {
        return 0
    }
    if (mindsLocation.includes(`${r}-${c}`)) {
        return 1
    }
    return 0
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

no error message, like i said when i add an eventListener or try and style my playAgainBttn my board doesn't display

What is your best guess as to the source of the problem?

no idea....

What things have you already tried to solve the problem?

ive tried writing my playAgainBttn in every function, stating it first below my var etc...

Paste a link to your repository here

https://github.com/RyanCLuis/Minesweeper

[nayaba]

I'm sorry, I'm having a hard time even finding where we've cached the play again button element. Could you point me to a line of code, or paste it in a comment?

[RyanCLuis]

the code i posted doesnt have anything in it. This is the code that works and doesnt have the play again element. im trying to figure out where i would add it all

[nayaba]

So are you just looking for general guidance on how to create a play again button?

[RyanCLuis]

yes, i was looking from the connect4 lecture and i was adding an event listener and made my game not work, so i am confused on how to add it and not break my game, as well as hide it while the game is going

[nayaba]

I would start out doing two things - First, caching the play again button element and adding an event listener to it with a test function that just console.logs. That way you'll know your button is working.

Next you'll need to re-factor your code some. You don't have an init function that starts gameplay and calls all the other functions. That is ideally the function you'd actually want to call on your play again event listener, so I'd work on creating that function, again, by re-factoring the code that already exists.

[RyanCLuis]

okay i added it and the button works...... but what i get now is the renderboard like this so now i should have a init() function so the game knows to basically "refresh the page"

[RyanCLuis]

and if i write the init() function where in the code should i write it? i mean does it matter if im just calling for it in the general scope?

[nayaba]

Nice work so far - it does not matter where in the code you write it, so long as you're invoking it once outside of the event listener to start the game, and then again within the even listener to re-start the game.

[RyanCLuis]

okay so i called the init function and my button doesnt work... :(

[RyanCLuis]

let board = []
let rows = 8
let columns = 8
let minds = 8
// this will tell us the loction of the minds ex. 2-4, 0-1, etc
let mindsLocation = []
let tilesClicked = 0
// this is to tell us when the flag button is toggled 
let headEn = false
let gameOver = false
const playAgainButton = document.getElementById('playAgain')
playAgainButton.addEventListener('click', init)

    renderBoard()
    init()

// we are setting specific locations for now, until the end to where we can randomize them!
function setMinds() {

    // mindsLocation.push("2-2", "2-4", "0-0", "5-6", "3-4", "1-1")

    let mindsLeft = minds;
    while (mindsLeft > 0) { 
        let r = Math.floor(Math.random() * rows);
        let c = Math.floor(Math.random() * columns);
        let id = r.toString() + "-" + c.toString();

        if (!mindsLocation.includes(id)) {
            mindsLocation.push(id);
            mindsLeft -= 1;
        }
    }
}

function renderBoard() {
    document.getElementById("mind-count").innerText = minds
    document.getElementById("head").addEventListener("click", setHead)
    setMinds()
    // populate my tiles using a for loop
    for (let r = 0;r < rows; r++) {
        let row = []
        for (let c = 0; c < columns; c++) {
            // making a div tag in HTML
            let tile = document.createElement("div")
            tile.id = `${r}-${c}`
            tile.addEventListener("click", tileClicked)
            document.getElementById("tiles").append(tile)
            row.push(tile)
        }
        board.push(row)
    }
    // console.log(board)
}

function setHead() {
    if (headEn) {
        headEn = false
        document.getElementById("head").style.backgroundColor = "#ff83ff"
    } 
    else {
        headEn = true
        document.getElementById("head").style.backgroundColor = "green"
    }
}

function tileClicked() {
    // this statement will happen === true then the rest wont happen
    if (gameOver || this.classList.contains("tile-clicked")) {
        return
    }

    let tile = this
    // this is to place the "flag" on the tiles
    if (headEn) {
        if (tile.innerText === "") {
            tile.innerText = "🥴"
        } 
        else if (tile.innerText === "🥴") {
            tile.innerText = ""
        }
        // putting return so i dont hit a mind when I set a head
        return
    }
// this is if you hit the mine
    if (mindsLocation.includes(tile.id)) {
        gameOver = true
        revealMinds()
        return
    }
// this is if we dont hit a mind, itll tell us how many are nearby
    let divCoord = tile.id.split("-") // spliting "0-0" to [0,0]
    let r = parseInt(divCoord[0])
    let c = parseInt(divCoord[1])
    checkMinds(r, c)
}

function revealMinds() {
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < columns; c++) {
            let tile = board[r][c]
            if (mindsLocation.includes(tile.id)) {
                tile.innerText = "🧠"
                tile.style.backgroundColor = "red"
            }
        }
    }
}

function checkMinds(r, c) {
    if (r < 0 || r >= rows || c < 0 || c >+ columns) {
        return
    }
    // if this line is true, it will not do the code below
    if (board[r][c].classList.contains("tile-clicked")) {
        return
    }

    board[r][c].classList.add("tile-clicked")
    tilesClicked += 1

    let mindsFound = 0

    // checking the top 3 divs
    mindsFound += checkTile(r-1, c-1) // this is top left
    mindsFound += checkTile(r-1, c) // this is top 
    mindsFound += checkTile(r-1, c+1) // this is top right

    // checking left and right
    mindsFound += checkTile(r, c-1) // this is left
    mindsFound += checkTile(r, c+1) // this is right

    // this is bottom
    mindsFound += checkTile(r+1, c-1) // this is bottom left
    mindsFound += checkTile(r+1, c) // this is bottom 
    mindsFound += checkTile(r+1, c+1) // this is bottom right

    // this is to add the "hint" to the tile if no minds are there and are nearby
    if (mindsFound > 0) {
        board[r][c].innerText = mindsFound
        board[r][c].classList.add(`m${mindsFound}`)
    }

    // setting up recursion(aka "flood effect")
    else {
        board[r][c].innerText = ""

        // top 3
        checkMinds(r-1, c-1) // top left
        checkMinds(r-1, c) // top 
        checkMinds(r-1, c+1) // top right

        // checking left and right
        checkMinds(r, c-1) // left
        checkMinds(r, c+1) // right

        // check bottom
        checkMinds(r+1, c-1) // bottom left
        checkMinds(r+1, c) // bottom 
        checkMinds(r+1, c+1) // bottom right
    }

    // changes minds to text when all minds are "cleared"
    if (tilesClicked === rows * columns - minds) {
        document.getElementById("mind-count").innerText = "You saved you're mind!"
        gameOver = true
    }
}

function checkTile(r, c) {
    if (r < 0 || r >= rows || c < 0 || c >+ columns) {
        return 0
    }
    if (mindsLocation.includes(`${r}-${c}`)) {
        return 1
    }
    return 0
}

function init() {
    let board = []
    let rows = 8
    let columns = 8
    let minds = 8
// this will tell us the loction of the minds ex. 2-4, 0-1, etc
    let mindsLocation = []
    let tilesClicked = 0
// this is to tell us when the flag button is toggled 
    let headEn = false
    let gameOver = false
    let mindsLeft = minds;
    while (mindsLeft > 0) { 
        let r = Math.floor(Math.random() * rows);
        let c = Math.floor(Math.random() * columns);
        let id = r.toString() + "-" + c.toString();

        if (!mindsLocation.includes(id)) {
            mindsLocation.push(id);
            mindsLeft -= 1;
        }
    }
    // renderBoard()
}

[nayaba]

The button doesn't work, or the init function doesn't work - is the init function being invoked at all when you click on the play again button?

[RyanCLuis]

the button doesnt work at all.

[RyanCLuis]

okay i think i got it, i have to create an additional functions to clearBoard and to reset the tiles and minds counts etc! thanks @nayaba