题解 | #移动控制#

{"css":"table.game {\n    font-size: 14px;\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\ntable.game td {\n    border: 1px solid #e1e1e1;\n    padding: 0;\n    height: 30px;\n    text-align: center;\n}\ntable.game td.current{\n    background: #1890ff;\n}","js":"   function bind() {\n\n\n        document.onkeydown = event => {\n            if (!event) return;\n            var code = event.keyCode || '';\n            if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;\n            event.preventDefault && event.preventDefault();\n            //TODO: 请实现按键控制\n            const jsContainer = document.getElementById(\"jsContainer\")\n            const tb = jsContainer.children[0].children[0]\n\n            const tr = tb.querySelectorAll('tr')\n            let x = 0\n            let y = 0\n            for (let i = 0; i < tr.length; i++) {\n                const td = tr[i].querySelectorAll('td')\n                for (let j = 0; j < td.length; j++) {\n                    if (td[j].className == 'current') {\n                        x = j\n                        y = i\n                    }\n                }\n            }\n            switch (code) {\n                case 37:\n                    tr[y].children[x].className = ''\n                    x = x - 1 < 0 ? tr[0].children.length - 1 : x - 1\n                    tr[y].children[x].className = 'current';\n\n                    break;\n                case 38:\n\n                    tr[y].children[x].className = ''\n                    y = y - 1 < 0 ? tr.length - 1 : y - 1\n                    tr[y].children[x].className = 'current';\n                    break;\n                case 39:\n                    tr[y].children[x].className = ''\n                    x = x + 1 > tr[0].children.length - 1 ? 0 : x + 1\n                    tr[y].children[x].className = 'current';\n                    break;\n                case 40:\n                    tr[y].children[x].className = ''\n                    y = y + 1 > tr.length - 1 ? 0 : y + 1\n                    tr[y].children[x].className = 'current';\n                    break;\n            }\n        }\n    }","html":"<div id=\"jsContainer\">\n    <table class=\"game\">\n        <tbody>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td class=\"current\"></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n        </tbody>\n    </table>\n</div>","libs":[]}