题解 | #移动控制#

function bind() {

document.onkeydown = event => {
    if (!event) return;
    var code = event.keyCode || '';
    if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
    event.preventDefault && event.preventDefault();
    //TODO: 请实现按键控制
    var tbody = document.querySelector('.game').querySelector('tbody');
    var current = document.querySelector('.current');
    //获得总的行列值
    var row = tbody.children.length;
    var col = tbody.children[0].children.length;
    //获取当前高亮节点的行列值
    //通过tr.sectionRowIndex和td.cellIndex取得当前tr和td相对于父节点的索引值
    var curRow = current.parentNode.sectionRowIndex;
    var curCol = current.cellIndex;
    //移除当前高亮节点效果
	tbody.children[curRow].children[curCol].classList.remove('current');
    //进行移动方向判断以及边界控制
    switch(code){
      case 38:
        curRow = curRow === 0 ? row - 1 : curRow - 1;
        break;
      case 40:
        curRow = curRow === row - 1 ? 0 : curRow + 1;
        break;
      case 37:
        curCol = curCol === 0 ? col - 1 : curCol - 1;
        break;
      case 39:
        curCol = curCol === col - 1 ? 0 : curCol + 1;
        break;
    }
    //为新节点加入高亮效果
    tbody.children[curRow].children[curCol].classList.add('current');
};

}