Is there a way to put these images in an array?

Question

Im a student and currently working on a project, I am definitely a beginner and am struggling with this project as I am not that familiar with arrays. My HTML, CSS, and Javascript is all listed. Basically what I want to do is somehow keep my click function working and then incorporate the code I have commented out so that it recognizes its at the bottom of each array and stop but I have no idea how to do that. Any input would be much appreciated!!

let currentPlayer = "deer";
let column1 = [0, 0, 0, 0, 0, 0, 0];
let column2 = [0, 0, 0, 0, 0, 0, 0];
let column3 = [0, 0, 0, 0, 0, 0, 0];
let column4 = [0, 0, 0, 0, 0, 0, 0];
let column5 = [0, 0, 0, 0, 0, 0, 0];
let column6 = [0, 0, 0, 0, 0, 0, 0];
let column7 = [0, 0, 0, 0, 0, 0, 0];
const board = [column1, column2, column3, column4, column5, column6, column7];
//if clicked in the column drop the item to the end of the array
//dont allow anything else to drop on to the item in its place
//for loop- look for first empty spot from the bottom????
//board[0][0] is the board column 1 and row 1
// let row = $(this).attr("row");
// let col = $(this).attr("col");
// board[row][col];

$(".cell").on("click", function () {
  if (currentPlayer == "deer" && $(this).hasClass(".taken1" || ".taken2")) {
    ("");
  } else if (currentPlayer == "deer") {
    $(this).html(
      '<img src="https://i.ya-webdesign.com/images/reindeer-black-antlers-png-picture-8.png" width="50px" height="50px">'
    );
    $(this).addClass(".taken1");
    playerChange();
  }
  if (currentPlayer == "tree" && $(this).hasClass(".taken1" || ".taken2")) {
    ("");
  } else if (currentPlayer == "tree") {
    $(this).html(
      '<img src="https://www.pngkey.com/png/full/24-242635_white-pine-tree-clipart-clipart-free-pine-tree.png" height="50px">'
    );
    $(this).addClass(".taken2");
    playerChange();
  }
});

function playerChange() {
  if (currentPlayer === "deer") {
    //if current player is deer, then switch to tree
    currentPlayer = "tree";
  } else {
    currentPlayer = "deer"; //if current player is not deer then switch to deer
  }
  //PUT WINNER DECLARATION FUNCTION IN HERE
}

$("button").on("click", function () {
  //click function for restart game button
  $(".cell").html(""); //removes all added text from the cells
  $(".cell").removeClass(".taken1"); //removes the taken class from the cells
  $(".cell").removeClass(".taken2"); //removes the taken class from the cells
  $("div.container").css("pointer-events", "all"); //returns click events to normal
  if (currentPlayer == "tree") {
    playerChange(); //changes back to player deer so tree doesnt play first
  }
  //UPDATE CLICK FUNCTION AS NEW THINGS ARE ADDED FOR WINS!
});

//WRITE WINNING CONDITIONS DOWN HERE DONT FORGET HAHAHA

/*general page styling*/
body {
    background-image: url('https://images.hdqwalls.com/wallpapers/minimalist-landscape-to.jpg');
    font-family: 'Amatic SC', cursive;
}

/*page heading styling*/
h1 {
    font-size: 75px;
    align-items: center;
    text-align: center;
    text-shadow: 2px 2px #412846;
    color: white;
}

/*help with centering*/
section {
    text-align: center;
    justify-content: center;
}

/*styling for button*/
button {
    transition-duration: 0.4s;
    background-color: rgb(78, 29, 214);
    font-family: 'Amatic SC', cursive;
    color: white;
    text-align: center;
    padding: 5px 5px;
    border: none;
    text-decoration: none;
    font-size: 30px;
    text-shadow: 1px 1px 1px rgb(24, 0, 70);
    box-shadow: 0 10px 15px 0 rgb(24, 0, 70);
    outline: none;
}

/*styling for button hover*/
button:hover {
    box-shadow: 0 10px 15px 0 rgb(24, 0 , 70);
    background-color: rgb(192, 128, 252);
    color: rgb(24, 0, 70);
}

/*styling for footer*/
footer {
    font-size: 20px;
    bottom: 0;
    width: 100%;
    height: 0%;
    color: rgb(218, 198, 255);
    padding-top: 15px;
}

/*styling for connect 4 board*/
.container {
    display: grid;
    grid-template-columns: repeat(7, auto);
    width: 600px;
    margin: 50px auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*styling for individual cells on board*/
.cell {
    font-family: 'Major Mono Display', monospace;
    width: 100px;
    height: 100px;
    border: 1px solid rgb(218, 198, 255);
    font-size: 20px;
    color: rgb(24, 0, 70);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

<!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" />
    <link
      href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Major+Mono+Display&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script defer src="app.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>c o n n e c t 4</title>
  </head>
  <body>
    <section>
      <!--PAGE HEADING-->
      <h1>C O N N E C T 4</h1>
      <!--CONNECT 4 GAME BOARD-->
      <!--class cell for general-->
      <div class="container">
        <div row="“0”" col="“0”" class="cell"></div>
        <div row="“0”" col="“1”" class="cell"></div>
        <div row="“0”" col="“2”" class="cell"></div>
        <div row="“0”" col="“3”" class="cell"></div>
        <div row="“0”" col="“4”" class="cell"></div>
        <div row="“0”" col="“5”" class="cell"></div>
        <div row="“0”" col="“6”" class="cell"></div>

        <div row="“1”" col="“0”" class="cell"></div>
        <div row="“1”" col="“1”" class="cell"></div>
        <div row="“1”" col="“2”" class="cell"></div>
        <div row="“1”" col="“3”" class="cell"></div>
        <div row="“1”" col="“4”" class="cell"></div>
        <div row="“1”" col="“5”" class="cell"></div>
        <div row="“1”" col="“6”" class="cell"></div>

        <div row="“2”" col="“0”" class="cell"></div>
        <div row="“2”" col="“1”" class="cell"></div>
        <div row="“2”" col="“2”" class="cell"></div>
        <div row="“2”" col="“3”" class="cell"></div>
        <div row="“2”" col="“4”" class="cell"></div>
        <div row="“2”" col="“5”" class="cell"></div>
        <div row="“2”" col="“6”" class="cell"></div>

        <div row="“3”" col="“0”" class="cell"></div>
        <div row="“3”" col="“1”" class="cell"></div>
        <div row="“3”" col="“2”" class="cell"></div>
        <div row="“3”" col="“3”" class="cell"></div>
        <div row="“3”" col="“4”" class="cell"></div>
        <div row="“3”" col="“5”" class="cell"></div>
        <div row="“3”" col="“6”" class="cell"></div>

        <div row="“4”" col="“0”" class="cell"></div>
        <div row="“4”" col="“1”" class="cell"></div>
        <div row="“4”" col="“2”" class="cell"></div>
        <div row="“4”" col="“3”" class="cell"></div>
        <div row="“4”" col="“4”" class="cell"></div>
        <div row="“4”" col="“5”" class="cell"></div>
        <div row="“4”" col="“6”" class="cell"></div>

        <div row="“5”" col="“0”" class="cell"></div>
        <div row="“5”" col="“1”" class="cell"></div>
        <div row="“5”" col="“2”" class="cell"></div>
        <div row="“5”" col="“3”" class="cell"></div>
        <div row="“5”" col="“4”" class="cell"></div>
        <div row="“5”" col="“5”" class="cell"></div>
        <div row="“5”" col="“6”" class="cell"></div>

        <div row="“6”" col="“0”" class="cell"></div>
        <div row="“6”" col="“1”" class="cell"></div>
        <div row="“6”" col="“2”" class="cell"></div>
        <div row="“6”" col="“3”" class="cell"></div>
        <div row="“6”" col="“4”" class="cell"></div>
        <div row="“6”" col="“5”" class="cell"></div>
        <div row="“6”" col="“6”" class="cell"></div>
      </div>
      <!--RESTART GAME BUTTON-->
      <button>Restart Game</button>
      <!--PAGE FOOTER-->
      <footer>Made by Falon B. Landers</footer>
    </section>
  </body>
</html>

Is `$(this).hasClass(".taken1" || ".taken2")` working?? I don't think so.. Take a look at [jQuery hasClass() - check for more than one class](https://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class) — Mohamed-Yousef, Jun 02 '20 at 01:49

Chase · Answer 1 · 2020-06-02T00:43:30.877

Your existing code would require a bit of a refactor, some suggestions:

Set some variables for numRows = X and numCols = Y. Use those to generate your board arrow.

const numRows = 7;
const numCols = numRows;
const board = Array.from(Array(numCols), c => Array(numRows).fill(0));
console.log(board);

Write a function to generate the HTML of your board from the state of that array and place it into the page (rather than hard coding all the divs).
- Use data-* attributes to label your divs as row and col (e.g. data-row="1" not just row="1").
- Assign a class name to indicate who owns the square. Use CSS to place the image on that square (e.g. via background-image).
Each time a player takes a space, set into your board array a value representing them (e.g. player 1 is 1, player 2 is -1 or whatever you'd like).
Each time there is a change to the board, recall your "generate board HTML" function to produce an up-to-date. It can clear a containing div and repopulate the board's current state.

If you get stuck or I can add additional detail if you have particular questions, let me know.

EDIT: An incomplete, but functional example to demonstrate:

const noPlayer = 0;
let currentPlayer = 1;

const numRows = 7;
const numCols = numRows;
const board = Array.from(Array(numCols), c => Array(numRows).fill(0));

function playerChange() {
  currentPlayer = -currentPlayer;
}

const playerClasses = {
  [-1]: `tree`,
  [noPlayer]: `none`,
  [1]: `deer`,
};

function drawBoard() {
  const $container = $('.container');
  $container.html('');
  for (let rIdx = 0; rIdx < numRows; rIdx++) {
    board.forEach((c, cIdx) => {
      const playerId = c[rIdx];
      const playerClass = playerClasses[playerId];
      $container.append(`<div data-row="${rIdx}" data-col="${cIdx}" class="cell ${playerClass}"></div>`);
    });
  }
}
drawBoard();

$("button").on("click", function () {
  drawBoard();
  $("div.container").css("pointer-events", "all"); //returns click events to normal
  if (currentPlayer !== 1) {
    playerChange();
  }
});

$(".container").on("click", ".cell" , function (e) {
  const targetRow = $(e.currentTarget).data('row');
  const targetCol = $(e.currentTarget).data('col');
  const currentVal = board[targetCol][targetRow];
  if (currentVal !== noPlayer) {
    return;
  }
  const takenRow = board[targetCol].findIndex(x => x !== noPlayer);
  const lowestRow = takenRow === -1 ? numRows -1 : takenRow -1;
  board[targetCol][lowestRow] = currentPlayer;
  drawBoard();
  playerChange();
});

/*general page styling*/
body {
    background-image: url('https://images.hdqwalls.com/wallpapers/minimalist-landscape-to.jpg');
    font-family: 'Amatic SC', cursive;
}

/*page heading styling*/
h1 {
    font-size: 75px;
    align-items: center;
    text-align: center;
    text-shadow: 2px 2px #412846;
    color: white;
}

/*help with centering*/
section {
    text-align: center;
    justify-content: center;
}

/*styling for button*/
button {
    transition-duration: 0.4s;
    background-color: rgb(78, 29, 214);
    font-family: 'Amatic SC', cursive;
    color: white;
    text-align: center;
    padding: 5px 5px;
    border: none;
    text-decoration: none;
    font-size: 30px;
    text-shadow: 1px 1px 1px rgb(24, 0, 70);
    box-shadow: 0 10px 15px 0 rgb(24, 0, 70);
    outline: none;
}

/*styling for button hover*/
button:hover {
    box-shadow: 0 10px 15px 0 rgb(24, 0 , 70);
    background-color: rgb(192, 128, 252);
    color: rgb(24, 0, 70);
}

/*styling for footer*/
footer {
    font-size: 20px;
    bottom: 0;
    width: 100%;
    height: 0%;
    color: rgb(218, 198, 255);
    padding-top: 15px;
}

/*styling for connect 4 board*/
.container {
    display: grid;
    grid-template-columns: repeat(7, auto);
    width: 600px;
    margin: 50px auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*styling for individual cells on board*/
.cell {
    font-family: 'Major Mono Display', monospace;
    width: 100px;
    height: 100px;
    border: 1px solid rgb(218, 198, 255);
    font-size: 20px;
    color: rgb(24, 0, 70);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
    background-position: center;
}

.cell.deer {
  background-image: url('https://i.ya-webdesign.com/images/reindeer-black-antlers-png-picture-8.png');
}
.cell.tree {
  background-image: url('https://www.pngkey.com/png/full/24-242635_white-pine-tree-clipart-clipart-free-pine-tree.png');
}

<!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" />
    <link
      href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Major+Mono+Display&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script defer src="app.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>c o n n e c t 4</title>
  </head>
  <body>
    <section>
      <!--PAGE HEADING-->
      <h1>C O N N E C T 4</h1>
      <!--CONNECT 4 GAME BOARD-->
      <!--class cell for general-->
      <div class="container"></div>
      <!--RESTART GAME BUTTON-->
      <button>Restart Game</button>
      <!--PAGE FOOTER-->
      <footer>Made by Falon B. Landers</footer>
    </section>
  </body>
</html>

Thank you! Sorry I am still confused. I guess this project is over my head. — Falon Landers, Jun 02 '20 at 00:34
@FalonLanders See the updated section for a more detailed example. — Chase, Jun 02 '20 at 00:44
Thank you so much for your help this totally makes sense to me now. It was almost like I was doing 3 different projects and trying to combine them! I appreciate it! — Falon Landers, Jun 02 '20 at 15:23
@FalonLanders Glad it helped. Were there unresolved problems that led to you unaccepting the answer? — Chase, Jun 07 '20 at 00:13

Is there a way to put these images in an array?

1 Answers1