主页 / 问题 / 1189178
Accepted
HamSter
Asked:2021-10-12 16:04:21 +0000 UTC2021-10-12 16:04:21 +0000 UTC

仅单击二维数组中的顶部、底部、相邻元素

  • 772

有这样的代码，二维数组：

let app = document.getElementById('app');
let table = document.createElement('div');
    table.classList.add('table');
    app.appendChild(table);

const BASE = 9;
let arrNum = [];

for(let iNum = 1; iNum < 20; iNum ++ ) {
  if(iNum%10 === 0) continue;
  
  let strNum = iNum.toString();
  arrNum.push(...strNum);
}

let n = arrNum.length;
let x = BASE;
let y = Math.floor(n / BASE);

for(let iy = 0; iy < y; iy++){
  let tr = document.createElement('div');
      tr.classList.add('tr');
      table.appendChild(tr);
  
  for(let ix = 0; ix < x; ix++){
    let td = document.createElement('div');
      td.classList.add('td');
      td.dataset.x = ix;
      td.dataset.y = iy;
      tr.appendChild(td); 
  }
}



const nums = document.querySelectorAll('.td');
arrNum.forEach((num, i) => {
  nums[i].innerHTML = num;
});


let isNum = false;

let firstNum, secondNum;

function flipNum(){    
  
  if(this === firstNum) return;
  
  this.classList.add('select');
  
  if(!isNum) {
    isNum = true;
    firstNum = this;
    
    return;
  }
  
  secondNum = this;  
  
  getIndex();
  
  checkForMatch();
}


function getIndex(){
  //console.log(firstNum.dataset.x + ' ' + firstNum.dataset.y);
}

function checkForMatch() {
  let firstNumVal = +firstNum.innerHTML;
  let secondNumVal = +secondNum.innerHTML;
  
  let isMatch = firstNumVal + secondNumVal === BASE + 1 || firstNumVal === secondNumVal;   
  console.log(isMatch);
  
  isMatch ? disableNum() : resetMatch();
}


function disableNum(){
  firstNum.removeEventListener('click', flipNum);
  secondNum.removeEventListener('click', flipNum);
  
  firstNum.classList.add('match');
  secondNum.classList.add('match');
  
  resetNum();
}

function resetMatch(){
  firstNum.classList.remove('select');
  secondNum.classList.remove('select');
  
  resetNum();
}

function resetNum(){
  isNum = false;
  firstNum = null;
  secondNum = null; 
}



nums.forEach(num => num.addEventListener('click', flipNum));
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}


.table {
  max-width: 500px;
  margin: 2rem auto;
}

.tr {
  display: flex;
}

.td {
  width: calc(100% / 9);
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid;
}


.select {
  background: #8BC34A;
}

.match {
  background: #bdbdbd;
}
<div id="app"></div>

问题：如何实现只点击相邻单元格（上、下、左、右），如何禁止点击对角单元格？

javascript

2 个回答

  1. Best Answer

    问题的本质：从块中创建一个特定的矩形A x B，您需要学习如何找到每个块的相邻单元格。每行中的单元格数量是预先知道的，它仍然与单击按钮的数量有一点关系：

    let html = new Array(27).fill(0).map((_,i) => `<div class="box">${ i }</div>`).join("");
document.body.insertAdjacentHTML("beforeEnd", html);
// Создает блоки, не важно.

/***/

let boxes = document.querySelectorAll(".box");

const COLS = 9;

document.addEventListener("click", function(e) {
  if (e.target.classList.contains("box")) box_onclick(e.target);
});

function box_onclick(box) {
  console.clear();
  
  if (box.classList.contains("available")) {
    console.log("Доступно");
  } else {
    console.log("Не доступно");  
  }
  
  /***/
  boxes.forEach(e => e.classList.remove("active", "available"));
  
  box.classList.add("active");
  highlight_surrounding_boxes(box);  
}

function highlight_surrounding_boxes(box) {  
  let index = Array.prototype.indexOf.call(boxes, box);
  // Номер кликнутой клетки среди всех 27 boxes
  
  let surrounding_indexes = [
    /* top    */ index - COLS >= 0           &&  index - COLS ,
    /* right  */ (index + 1) % COLS != 0     &&  index + 1    ,   
    /* bottom */ index + COLS < boxes.length &&  index + COLS , 
    /* left   */ index % COLS != 0           &&  index - 1    ,
  ];

  /* Особенность логического "И" в JS:
       false && 17 === false
       true  && 17 === 17
      
     Если поставленное условие выдаст false, результатом всего
     выражения будет false. Иначе - число, нужный индекс.
  */
  
  console.log( JSON.stringify(surrounding_indexes) );
  
  surrounding_indexes.forEach(
    index => typeof index == "number" && boxes[index].classList.add("available")
  ); // Если index не число (сравнение выдаст false), вторая часть не выполнится.
}
    .box {
  display: inline-block;
  
  width: 10vw;
  margin: 1px;
  
  padding: 5px;
  border: 3px solid orange;  
  box-sizing: border-box;
  
  cursor: pointer;
}

.box.available {
  background-color: #ddd;
}

.box.active {
  background-color: orange;
}

    • 6

  2. 相邻单元格是由它们的坐标相差一个这一事实来确定的。

    如果我们只取水平和垂直方向，那么只有一个坐标，x 或 y，应该不同，另一个应该匹配。

    这引起了以下检查

    (first.x === second.x && Math.abs(first.y - second.y) === 1) // либо совпадают `x`, а `y` отличаются на 1 (верх либо низ)
(first.y === second.y && Math.abs(first.x - second.x) === 1) // либо совпадают `y`, а `x` отличаются на 1 (лево либо право)

    因此，代码可能如下所示：

    let app = document.getElementById('app');
let table = document.createElement('div');
table.classList.add('table');
app.appendChild(table);

const BASE = 9;
let arrNum = [];

for (let iNum = 1; iNum < 20; iNum++) {
  if (iNum % 10 === 0) continue;

  let strNum = iNum.toString();
  arrNum.push(...strNum);
}

let n = arrNum.length;
let x = BASE;
let y = Math.floor(n / BASE);

for (let iy = 0; iy < y; iy++) {
  let tr = document.createElement('div');
  tr.classList.add('tr');
  table.appendChild(tr);

  for (let ix = 0; ix < x; ix++) {
    let td = document.createElement('div');
    td.classList.add('td');
    td.dataset.x = ix;
    td.dataset.y = iy;
    tr.appendChild(td);
  }
}



const nums = document.querySelectorAll('.td');
arrNum.forEach((num, i) => {
  nums[i].innerHTML = num;
});


let isNum = false;

let firstNum, secondNum;

function flipNum() {

  if (this === firstNum) return;

  this.classList.add('select');

  if (!isNum) {
    isNum = true;
    firstNum = this;

    return;
  }

  secondNum = this;

  var isMatch = checkIndex() && checkForMatch();

  if (isMatch) {
    disableNum();
  } else {
    resetMatch();
  }
}


function checkIndex() {
  let first = {
    x: +firstNum.dataset.x,
    y: +firstNum.dataset.y
  };
  let second = {
    x: +secondNum.dataset.x,
    y: +secondNum.dataset.y
  };

  return (first.x === second.x && Math.abs(first.y - second.y) === 1) ||
    (first.y === second.y && Math.abs(first.x - second.x) === 1);
}

function checkForMatch() {
  let firstNumVal = +firstNum.innerHTML;
  let secondNumVal = +secondNum.innerHTML;

  return firstNumVal + secondNumVal === BASE + 1 || firstNumVal === secondNumVal;
}


function disableNum() {
  firstNum.removeEventListener('click', flipNum);
  secondNum.removeEventListener('click', flipNum);

  firstNum.classList.add('match');
  secondNum.classList.add('match');

  resetNum();
}

function resetMatch() {
  firstNum.classList.remove('select');
  secondNum.classList.remove('select');

  resetNum();
}

function resetNum() {
  isNum = false;
  firstNum = null;
  secondNum = null;
}

nums.forEach(num => num.addEventListener('click', flipNum));
    * {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.table {
  max-width: 500px;
  margin: 2rem auto;
}

.tr {
  display: flex;
}

.td {
  width: calc(100% / 9);
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid;
}

.select {
  background: #8BC34A;
}

.match {
  background: #bdbdbd;
}
    <div id="app"></div>

    • 2

相关问题