题解 | #移动控制#
移动控制
https://www.nowcoder.com/practice/84af7932f53f4bbeaa1fa079a138bb35?tpId=271&tqId=39636&rp=1&ru=/exam/oj&qru=/exam/oj&sourceUrl=%2Fexam%2Foj%3Fpage%3D2%26tab%3DJS%25E7%25AF%2587%26topicId%3D271&difficulty=undefined&judgeStatus=undefined&tags=&title=
{"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":[]}
