Question

我正在做棋盘游戏，当我在其中一个地方单击时，我希望将它们变成红色。我有divs的数组，但是我不知道如何在给定number的情况下将其变为红色。我该怎么做，我正在尝试使用.element，但没有用

var number = 3;
const board = [];
const boardWidth = boardHeight = 10;

(function() {
  const boardElement = document.getElementById('board');
  for (var y = 0; y < boardHeight; ++y) {
    var row = [];
    for (var x = 0; x < boardWidth; ++x) {
      var cell = {};
      cell.element = document.createElement('div');
      boardElement.appendChild(cell.element);
      row.push(cell);
    }
    board.push(row);
  }
  painting();
})();

function painting() {
  board[number][number].element.style.backgroundcolor = 'red';
}

#board {
  width: calc(10 * 30px);
  margin: auto;
}

#board div {
  background-color: black;
  border: 1px solid white;
  box-sizing: border-box;
  float: left;
  width: 30px;
  height: 30px;
}

<div id="board"></div>

Answer 1

您的代码看起来很混乱。 board是一个元素，您将其用作数组。接下来是一些代码。我希望这是您需要的：

let cellW = 100;
let cellH = 100;

function init(){ 
  
let boardArray = [];
let bStyle = window.getComputedStyle(board, null);
let bWidth = parseInt(bStyle.getPropertyValue("width"));
let bHeight = parseInt(bStyle.getPropertyValue("height"));

  
  for (let y = 0; y < bHeight; y+=cellH) {
        let row = [];
        for (let x = 0; x < bWidth; x+=cellW) {
            let cell = {};
            cell.element = document.createElement('div');
            cell.element.style.width = cellW +"px";
            cell.element.style.height = cellH +"px";
            board.appendChild(cell.element);
            row.push(cell);
        }
    boardArray.push(row);
}

}
init();



let cells = Array.from(document.querySelectorAll("#board div"));


cells.map( cell => {
  cell.addEventListener("click", e =>{
    cell.style.background = "red"
  })
})

#board{width: 1000px; height:500px; display:flex;flex-wrap:wrap;}
#board div{outline:1px solid;}

<div id="board"></div>

更新：

我了解您需要将单元格数组中的第4个单元格设为红色：

    var number = 3;
    const board = [];
    const boardWidth = 10, boardHeight = 10;

    function init() {
        const boardElement = document.getElementById('board');
        for (var y = 0; y < boardHeight; ++y) {
            var row = [];
            for (var x = 0; x < boardWidth; ++x) {
                var cell = {};
                cell.element = document.createElement('div');
                boardElement.appendChild(cell.element);
                row.push(cell);
            }
            board.push(row);
        } 
      

      board[number][number].element.style.background = "red"
    }

window.addEventListener("load", init);

#board {
        width: calc(10 * 30px);
        margin: auto;
    }

    #board div {
        background-color: black;
        border: 1px solid white;
        box-sizing: border-box;
        float: left;
        width: 30px;
        height: 30px;
    }

<div id="board"></div>

Answer 2

我已经解决了您的所有问题，但认为您可能对使事情可配置感兴趣。我重新编写了您的代码，以使事情由配置驱动。

这将：

进行配置（或不进行配置）并将其与默认配置合并。
根据配置值动态构建电路板v。通过CSS设置尺寸
允许进行单元格切换（选择/取消选择）和矩阵位置分配

document.addEventListener('DOMContentLoaded', function(){

  const extend = function(target, config, defaults){
    defaults && extend(target, defaults);

    if(target && config && typeof(config) === 'object'){
      for(const i in config){
        target[i] = config[i];
      }
    }

    return target;
  };

  function Game(config){
    const defaultConfig = {
      boardElement: '#board',
      // if a single digit is passed it will be duplicated for pos y 3 => 3,3
      startPosition: 3,
      cellSize: 30,
      boardWidth: 10,
      boardHeight: 10      
    };

    // merge the default and user-defined config into a new config
    this.config = extend({}, config || {}, defaultConfig);
    // cache ref to your board element    
    this.boardElement = document.querySelector(this.config.boardElement);
    // stores our collection of board items
    this.board = [];
    // draw the board
    this.draw();
    // set initial marker
    if(this.config.startPosition){
      if(this.config.startPosition instanceof Array){
        this.paint.apply(this, this.config.startPosition);
      }else{
        this.paint(this.config.startPosition);
      }
    }

    return this;
  }

  extend(Game.prototype, {
    draw(){  
      for (let y = 0; y < this.config.boardHeight; ++y) {
        const row = [];

        for (var x = 0; x < this.config.boardWidth; ++x) {
          const element = document.createElement('div');

          const cell = {
            element,
            position: { 
              x: x + 1, 
              y: y + 1 
            }   
          };
          // set cell width and height
          element.style.height = element.style.width = `${this.config.cellSize}px`;
          // handle selecting/unselecting cells
          element.addEventListener('click', () => this.paint(cell.position.x, cell.position.y));
          
          this.boardElement.appendChild(cell.element);

          row.push(cell);
        }

        this.board.push(row);
      }
      // set board width and height
      this.boardElement.style.width = `${this.config.boardWidth * this.config.cellSize}px`;
    },
    paint(x, y){
      if(y === undefined){
        y = x;
      }

      const element = this.board[y-1][x-1].element;

      if(element){
        const isSelcted = element.style.backgroundColor === 'red';
        element.style.backgroundColor = isSelcted ? 'black' : 'red';    
      }
    }
  });  

  new Game({
    startPosition: [5,4],
    boardWidth: 8,
    boardHeight: 8
  });
});

#board {
  margin: auto;
}

#board div {
  background-color: black;
  border: 1px solid white;
  box-sizing: border-box;
  float: left;
}

<div id="board"></div>

检索对象集合内的元素

2 个答案: