时间戳

首页 > 解决方案 > 有没有办法将这些图像放在一个数组中？

javascript - 有没有办法将这些图像放在一个数组中？

问题描述

我是一名学生，目前正在从事一个项目，我绝对是一个初学者，并且正在为这个项目而苦苦挣扎，因为我对数组不太熟悉。我的 HTML、CSS 和 Javascript 都列出来了。基本上我想做的是以某种方式保持我的点击功能工作，然后合并我注释掉的代码，以便它在每个数组的底部识别它并停止，但我不知道该怎么做。任何输入将不胜感激！

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>

标签： javascriptjquery

解决方案

您现有的代码需要一些重构，一些建议：

  • numRows = X为和设置一些变量numCols = Y。使用这些来生成你的board箭头。

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

  • 编写一个函数来从该数组的状态生成您的板的 HTML 并将其放入页面中（而不是硬编码所有 div）。

    • 使用data-*属性将您的 div 标记为 row 和 col（例如data-row="1"，不仅仅是row="1"）。
    • 分配一个类名来表明谁拥有这个广场。使用 CSS 将图像放置在该正方形上（例如 via background-image）。

  • 每次玩家占用空间时，在您的棋盘数组中设置一个代表他们的值（例如，玩家 1 是1，玩家 2 是-1或任何您想要的）。

  • 每次对板进行更改时，请调用您的“生成板 HTML”功能以生成最新的。它可以清除包含的 div 并重新填充板的当前状态。

如果您遇到困难，或者如果您有特定问题，我可以添加更多详细信息，请告诉我。

编辑：一个不完整但实用的示例来演示：

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>

推荐阅读