javscript 制作格子在表格内任意移动案例

理想三旬_啊

已于 2022-10-12 18:38:02 修改

阅读量207

点赞数 1

文章标签： javascript

于 2022-10-12 18:32:53 首次发布

本文链接：https://blog.youkuaiyun.com/Java_avaj1/article/details/127288208

版权

本文介绍了一个使用JavaScript实现的简单网页应用，该应用通过键盘上的WASD键控制一个红色方块在自动生成的30x30表格中移动。表格由纯JavaScript生成并插入到页面中，同时利用了DOM操作来改变选定单元格的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过键盘上'w' 's' 'd' 'a' 使格子在制作的表格中任意移动

不多说直接上代码

<script>
    // 因为在网页body中 格式原因会导致网页解析不正确
    // 所以我们把样式放在js脚本中
    const myTable = function () {
        let str = `<table id="getTable">`;
        for (let i = 0; i <= 30; i++) {
            str += `<tr>`;
            for (let j = 0; j <= 30; j++) {
                str += `<td></td>`;
            }
            str += `</tr>`;
        }
        str += `</table>`;
        return str;
    }

    const goTable = document.querySelector('.goTable');
    goTable.innerHTML = myTable(30, 30);
    const getTable = document.querySelector('#getTable');
    console.log(getTable);
    // 键盘事件
    /* 找到表格第一行第一列的第一个格子 就是在table中一步一步打开 其中firstChild意思为获取dom对象的第一个子代元素 也就是table的第一个子代元素tr
     tr的第一个子代元素td td里的第一个子代元素就是第一个格子*/
    let td = document.querySelector('#getTable').firstChild.firstChild.firstChild;
    // 设置第一格颜色为红色
    td.style.background = 'red';
    //设置计数器 默认开始为0 ，记住索引
    let index = 0;
    document.onkeydown = function (event) {
        //  removeAttribute 移除属性
            td.removeAttribute("style");
        //设置 当按动键盘上的w a s d按键时在格子里面的对应的事件
        switch (event.key) {
            case "w" :
                if (td.parentNode.previousSibling != null) {
                    td = td.parentNode.previousSibling.childNodes[index];
                } else {  // 先td的父元素tr  tr的父元素tbody tbody的最后一行的 一个格子
                      td=td.parentNode.parentNode.lastChild.childNodes[index];
                }
                break;
            case "d" :
                if (td.nextSibling != null) {
                    td = td.nextSibling;
                    //每次成功往右边移动 index++
                    index++;
                } else {    //增加判定到了最右边边还能继续到最前面循环
                    td = td.parentNode.firstChild;
                    // 索引
                    index=0;
                }
                break;
            case "s" :
                if (td.parentNode.nextSibling != null) {
                    td = td.parentNode.nextSibling.childNodes[index];
                } else {
                    td=td.parentNode.parentNode.firstChild.childNodes[index];
                }
                break;
            case "a" :
                if (td.previousSibling != null) {
                    td = td.previousSibling;
                    //每次成功往左边移动 index--
                    index--;
                } else {    //增加判定到了最左边还能继续到最后循环
                    td = td.parentNode.lastChild;
                    //索引
                    index=td.parentNode.children.length-1;
                }
                break;
        }
        td.style.background = 'red';
    }
</script>