sei-ec-remote / project-1-issues

Open new issues here
1 stars 2 forks source link

Game not loading when going live #225

Closed irishjack490 closed 9 months ago

irishjack490 commented 9 months ago

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

My game loads partially when going live, there is an illegal return statement error message in the console, when I change it, the game will not load. If I leave the illegal return statement, the page will load but the board does not show the boxes and nothing will happen if I click on it

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


 //Variables 
let board = [];
const rows = 5;
const columns = 5; 
const numberOfMines = 5;
let minesLocation = [];
let boxesClicked = 0;

let gameOver = false;

window.onload = function(){
    startGame();
}
function setMines () { 
let minesRemaining = 0;
while(minesRemaining < numberOfMines){
const row = Math.floor(Math.random () * rows);
const column = Math.floor(Math.random ()* columns);
       let id = row.toString + "-" + column.toString; 
 if (!minesLocation.includes(id)){
    minesLocation.push(id);
    minesRemaining =+ 1;
    }

  }

}

//Create board with rows and columns
 function startGame() {
  setMines();
    //create div tags using JS
    for (let i = 0; i < rows; i++){
    let row = [];
      for (let j = 0; j < columns; j++){
        let box = document.createElement("div");
        box.id = i.toString() + "-" + j.toString();
        box.addEventListener('click', boxClicked);
        document.getElementById("board").append(box);
        row.push(box);   
    }
    board.push(row);
  } 
 console.log(board);
}

function boxClicked() {

 if (minesLocation.includes(box.id)) {
    gameOver = true;
    revealMines();
    return;
 }

}

function revealMines(){
    for (let i = 0; i < rows; i++){
        for (let j = 0; j < columns; j++){
            let box = board[i][j];
            if (minesLocation.includes(box.id)){
                box.innerText = "💣";
                box.style.backgroundColor = "yellow";
            } else {
               if (!board[i][j].isOpen){
                revealCell(i,j);
               }
            }
        }
    }
}
function revealCell (){
  const box = document.querySelectorAll('clicked-box');
  board[i][j].isOpen = true; 

  const adjacentMines = countAdjacentMines (i,j);
  if (adjacentMines > 0){
    box.textContent = adjacentMines;
    box.classList.add('number');
    box.classList.add('opened');
  } else 
  box.classList.add('opened');
  const neighbors = getNeighbors(i, j);

  for (const neighbor of neighbors){
    const { i: neighborRow, j: neighborColumn } = neighbor; 
    if(!board[neighborRow][neighborColumn].isOpen){
      revealCell(neighborRow,neighborColumn);
    }

  }

}
function countAdjacentMines(i, j){
  const neighbors = getNeighbors (i, j);
  let count = 0;

  for (const neighbor of neighbors){
    const { i: neighborRow, j: neighborColumn } = neighbor; 
    if(!board.includes(box.id)){
      count++;
    }
  }
  return count;
}
function getNeighbors(i,j){
  const neighbors = [];
  for (let i = i - 1; i <= i + 1; i++){
    for(let j = j -1; j <= j +1 ; j++){
      neighbors.push(i,j);

    }

  }

}
return neighbors;

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

There is an Uncaught SyntaxError: Illegal return statement for last line of the code but if I change it the game will no longer load. If I leave it, game will load partially without the cells and the functionality it needs.

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

The return statement, but it if I make any changes, the game will no longer load

What things have you already tried to solve the problem?

I have looked for solutions on the Internet, so far here is what I have I have tried re-starting VS code, I have set the Ip to local in VS code settings, I have added live property inside settings.JSON

Paste a link to your repository here

https://github.com/irishjack490/Project-1---Browser-Based-Game

nayaba commented 9 months ago

The issue is coming from your function setMines() {}. Try commenting it out, and starting it again from scratch, being sure to check your browser/console at each step to isolate what the exact problem is. My best guess is that your while loop is creating an infinite loop and you'll need to investigate why (also change minesRemaining = +1 to minesRemaining += 1 - this will not solve your problem but it's better syntax)

irishjack490 commented 9 months ago

Thanks so much for the response, I will try that

irishjack490 commented 9 months ago

The suggestion worked. Thanks a bunch for the direction. I commented everything out starting at the set mines function. The boxes returned. I corrected the typo. I revised the boxClicked() and the countAdjacentMines() functions. I noticed I was trying to work with i,j instead of the id coordinates I set up initially when setting up div tags. The game works now. Thanks for the advice. Now I'll be working on making sure player can't click on any other boxes if game is over and want to add a button to play again.