题解 | #移动控制#

简洁、带注释的js代码

function bind() {
    // 以下变量可以复用，因此定义在外部，形成闭包。
    // step1. 获取表格
    const map = document.querySelector('table tbody');
    // step2. 寻找cur，并记录其位置row和col
    // row/col: cur的行索引和列索引
    // rows/cols: 表格的总行数和总列数
    let row, col;
    const rows = map.children.length;
    const cols = map.children[0].children.length;
    let find = false;
    
    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();
        // 如果不知道当前位置，则寻找当前位置
        if (!find) {
            for (row = 0; row < rows; row++) {
                for (col = 0; col < cols; col++) {
                    if (map.children[row].children[col].className === 'current') {
                        find = true;
                        break;
                    }
                }
                if (find) {
                    break;
                }
            }
        }
        
        // step3. 获得移动后的位置
        // 可以发现，38和40是垂直方向的移动，37和39是水平方向的移动
        // 即code为偶数时，改变行，为奇数时，改变列
        let rowNew = row, colNew = col;
        if (code % 2 === 0) {
            rowNew = (row + code - 39 + rows) % rows;
        } else {
            colNew = (col + code - 38 + cols) % cols;
        }
        // step4. 更新表格
        map.children[row].children[col].className = '';
        map.children[rowNew].children[colNew].className = 'current';
    };
}