Javascript 连接四个问题

我试图通过寻找以前代码的解决方案来学习如何编写代码，并找出每个部分都在做什么来学习如何使用它们。 我想成为一名开发人员，但我不想复制和粘贴所有东西，我想知道发生了什么，这样我就可以自己编写代码了。我可以看100个视频，但我有问题，我需要帮助，希望有人能帮助我

我想知道是否有人可以向我解释下面的代码中发生了什么

 * Player 1 and 2 alternate turns. On each turn, a piece is dropped down a
 * column until a player gets four-in-a-row (horiz, vert, or diag) or until
 * board fills (tie)
 */

class Game {
  constructor(p1, p2, height = 6, width = 7) {
    this.players = [p1, p2];
    this.height = height;
    this.width = width;
    this.currPlayer = p1;
    this.makeBoard();
    this.makeHtmlBoard();
    this.gameOver = false;
  }

  /** makeBoard: create in-JS board structure:
   *   board = array of rows, each row is array of cells  (board[y][x])
   */

**Question: So I believe that this is creating a board and making it empty by looping through it?**
 
 makeBoard() {
    this.board = [];
    for (let y = 0; y < this.height; y++) {
      this.board.push(Array.from({ length: this.width }));
    }
  }

  **Question: Is this grabbing the board element from the HTML Page? board.innerHtml is blank, however
didnt we just make a blank a board? Why do we need this?**

  makeHtmlBoard() {
    const board = document.getElementById('board');
    board.innerHTML = '';

    // make column tops (clickable area
    // for adding a piece to that column)
    const top = document.createElement('tr');
    top.setAttribute('id', 'column-top');

    // store a reference to the handleClick bound function 
    // so that we can remove the event listener correctly later
    this.handleGameClick = this.handleClick.bind(this);
    
    top.addEventListener("click", this.handleGameClick);

    for (let x = 0; x < this.width; x++) {
      const headCell = document.createElement('td');
      headCell.setAttribute('id', x);
      top.append(headCell);
    }

    board.append(top);

    // make main part of board
    for (let y = 0; y < this.height; y++) {
      const row = document.createElement('tr');
    
      for (let x = 0; x < this.width; x++) {
        const cell = document.createElement('td');
        cell.setAttribute('id', `${y}-${x}`);
        row.append(cell);
      }
    
      board.append(row);
    }
  }

  /** findSpotForCol: given column x, return top empty y (null if filled) */

**Question: I have no idea what this line is doing**

  findSpotForCol(x) {
    for (let y = this.height - 1; y >= 0; y--) {
      if (!this.board[y][x]) {
        return y;
      }
    }
    return null;
  }

  /** placeInTable: update DOM to 
   * place piece into HTML board */

**Question: Im not sure what place in table is doing, however I know the second line is creating a DIV on 
the table , third line is styling it, however the last three lines i need help with it.**

  placeInTable(y, x) {
    const piece = document.createElement('div');
    piece.classList.add('piece');
    piece.style.backgroundColor = this.currPlayer.color;
    piece.style.top = -50 * (y + 2);

    const spot = document.getElementById(`${y}-${x}`);
    spot.append(piece);
  }

  /** endGame: announce game end */

  endGame(msg) {
    alert(msg);
    const top = document.querySelector("#column-top");
    top.removeEventListener("click", this.handleGameClick);
  }

  /** handleClick: handle click of column top to play piece */

  handleClick(evt) {
    // get x from ID of clicked cell
    const x = +evt.target.id;

The lines below, I have no idea how I could even think of this logic , please help.

    ****// get next spot in column (if none, ignore click)
    const y = this.findSpotForCol(x);
    if (y === null) {
      return;**
    }
    // place piece in board and add to HTML table
    this.board[y][x] = this.currPlayer;
    this.placeInTable(y, x);
    // check for tie
    if (this.board.every(row => row.every(cell => cell))) {
      return this.endGame('Tie!');
    }
    // check for win
    if (this.checkForWin()) {
      this.gameOver = true;
      return this.endGame(`The ${this.currPlayer.color} player won!`);
    }
    // switch players
    this.currPlayer =
      this.currPlayer === this.players[0] ? this.players[1] : this.players[0];**
  }

  /** checkForWin: check board cell-by-cell for "does a win start here?" */

  checkForWin() {
    // Check four cells to see if they're all color of current player
    //  - cells: list of four (y, x) cells
    //  - returns true if all are legal coordinates & all match currPlayer
    const _win = cells =>
      cells.every(
        ([y, x]) =>
          y >= 0 &&
          y < this.height &&
          x >= 0 &&
          x < this.width &&
          this.board[y][x] === this.currPlayer
      );

    for (let y = 0; y < this.height; y++) {
      for (let x = 0; x < this.width; x++) {
        // get "check list" of 4 cells (starting here) for each of the different
        // ways to win
        const horiz = [[y, x], [y, x + 1], [y, x + 2], [y, x + 3]];
        const vert = [[y, x], [y + 1, x], [y + 2, x], [y + 3, x]];
        const diagDR = [[y, x], [y + 1, x + 1], [y + 2, x + 2], [y + 3, x + 3]];
        const diagDL = [[y, x], [y + 1, x - 1], [y + 2, x - 2], [y + 3, x - 3]];

        // find winner (only checking each win-possibility as needed)
        if (_win(horiz) || _win(vert) || _win(diagDR) || _win(diagDL)) {
          return true;
        }
      }
    }
  }
}

class Player {
  constructor(color) {
    this.color = color;
  }
}

document.getElementById('start-game').addEventListener('click', () => {
  let p1 = new Player(document.getElementById('p1-color').value);
  let p2 = new Player(document.getElementById('p2-color').value);
  new Game(p1, p2);
});

*玩家1和2交替轮换。每转一圈，一个棋子从一个棋子上掉下来
*列，直到玩家获得一行四个（水平、垂直或对角线）或直到
*板填充（平铺）
*/
班级游戏{
构造（p1、p2，高度=6，宽度=7）{
this.players=[p1，p2]；
高度=高度；
这个。宽度=宽度；
这个.currPlayer=p1；
这是makeBoard（）；
这个.makeHtmlBoard（）；
this.gameOver=false；
}
/**makeBoard:在JS board结构中创建：
*board=行数组，每行为单元数组（board[y][x]）
*/
**问：所以我认为这是在创建一个板，并通过循环使其变空**
makeBoard（）{
this.board=[]；
for（设y=0；y=0；y--）{
如果（！this.board[y][x]）{
返回y；
}
}
返回null；
}
/**placeInTable：将DOM更新为
*将工件放入HTML板中*/
**问题：我不确定表中的位置在做什么，但是我知道第二行正在创建一个DIV
桌子，第三行正在设计它的样式，但是最后三行我需要帮助**
可放置表格（y，x）{
const piece=document.createElement（'div'）；
piece.classList.add（'piece'）；
piece.style.backgroundColor=this.currPlayer.color；
件式顶部=-50*（y+2）；
const spot=document.getElementById（`${y}-${x}`）；
点状追加（件）；
}
/**游戏结束：宣布游戏结束*/
尾声（味精）{
警报（msg）；
const top=document.querySelector（“列顶”）；
top.removeEventListener（“单击”，this.handleGameClick）；
}
/**handleClick：控制柱顶部的点击以播放乐曲*/
handleClick（evt）{
//从单击的单元格的ID获取x
常量x=+evt.target.id；
下面的几行，我不知道我怎么能想到这个逻辑，请帮助。
****//获取列中的下一个点（如果没有，则忽略单击）
常数y=这个.findSpotForCol（x）；
如果（y==null）{
返回**
}
//将工件放入板中并添加到HTML表格中
this.board[y][x]=this.carrplayer；
这是可放置的（y，x）；
//检查领带
if（this.board.every（row=>row.every（cell=>cell）））{
归还这个。游戏结束（'Tie！'）；
}
//检查是否获胜
if（this.checkForWin（））{
this.gameOver=true；
返回this.endGame（`The${this.currPlayer.color}玩家赢了！`）；
}
//交换球员
这是我的电脑播放器=
this.currPlayer===this.players[0]？this.players[1]：this.players[0]**
}
/**checkForWin：逐单元检查电路板上的“win是否从这里开始？”*/
checkForWin（）{
//检查四个单元格，看它们是否都是当前播放机的颜色
//-单元格：四（y，x）个单元格的列表
//-如果所有坐标均为合法坐标，则返回true
常数=单元格=>
细胞，每(
（[y，x]）=>
y>=0&&
y<这个高度&&
x>=0&&
x<这个宽度&&
this.board[y][x]==this.carrplayer
);
for（设y=0；y{
让p1=新播放器（document.getElementById（'p1-color'）.value）；
让p2=新播放器（document.getElementById（'p2-color'）.value）；
新游戏（p1、p2）；
});

编程的很大一部分是将问题分解成更小的问题