qq_58759527 2022-07-24 22:45 采纳率: 75%
浏览 30
已结题

关于#前端#的问题：小方块删除

小方块删除不掉

img


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            main {
                width: 500px;
                height: 600px;
                background: #aaffff;
                position: relative;
            }

            #box1 {
                position: absolute;
                top: 150px;
                left: 250px;
                width: 20px;
                height: 20px;
                background: black;
            }
        </style>
    </head>
    <body>
        <main>
            <div id="box1"></div>
        </main>
        <script type="text/javascript">
            let aMain = document.getElementsByTagName('main')
            let aDiv = aMain[0].getElementsByTagName('div')

            for (let i = 0; i < aDiv.length; i++) {
                // 生成一个方块
                if (aDiv.length == 1) {
                    let oDiv = document.createElement('div');
                    aMain[0].appendChild(oDiv);
                    oDiv.style.width = 20 + "px"
                    oDiv.style.height = 20 + "px"
                    oDiv.style.position = 'absolute'
                    oDiv.style.background = 'black'
                    oDiv.style.top = Math.random() * 300 + 'px'
                    oDiv.style.left = Math.random() * 300 + 'px'
                }
                // 获取新增方块位置
                let a = aDiv[1].offsetTop
                let b = aDiv[1].offsetLeft
                if (aDiv.length == 2) {
                    // 移动小方块
                    document.onkeydown = function(e) {
                        if (e.keyCode == 65 || e.keyCode == 37) {
                            aDiv[0].style.left = aDiv[0].offsetLeft - 10 + 'px'
                        } else if (e.keyCode == 87 || e.keyCode == 38) {

                            aDiv[0].style.top = aDiv[0].offsetTop - 10 + 'px'

                        } else if (e.keyCode == 68 || e.keyCode == 39) {
                            aDiv[0].style.left = aDiv[0].offsetLeft + 10 + 'px'

                        } else if (e.keyCode == 83 || e.keyCode == 40) {
                            aDiv[0].style.top = aDiv[0].offsetTop + 10 + 'px'
                        }
                        // 计算两方块的距离
                        let TopDce = Math.abs(aDiv[0].offsetTop - a)
                        let LeftDce = Math.abs(aDiv[0].offsetLeft - b)
                        // 如果贴近则删除一个方块
                        if (TopDce < 15 && LeftDce < 15) {
                            aMain[0].removeChild(aDiv[1])
                            aDiv[0].style.hight = aDiv[0].offsetHeight + 100 + 'px'
                        }
                    }
                }
            }
        </script>
    </body>
</html>
  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-07-25 09:33
    关注

    我试了一下可以啊 。你发的代码 标签不全

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        main {
            width: 500px;
            height: 600px;
            background: #aaffff;
            position: relative;
        }

        #box1 {
            position: absolute;
            top: 150px;
            left: 250px;
            width: 20px;
            height: 20px;
            background: black;
        }
    </style>
</head>

<body>
    <main>
        <div id="box1"></div>
    </main>
</body>
<script>
    let aMain = document.getElementsByTagName('main')
    let aDiv = aMain[0].getElementsByTagName('div')

    for (let i = 0; i < aDiv.length; i++) {
        // 生成一个方块
        if (aDiv.length == 1) {
            let oDiv = document.createElement('div');
            aMain[0].appendChild(oDiv);
            oDiv.style.width = 20 + "px"
            oDiv.style.height = 20 + "px"
            oDiv.style.position = 'absolute'
            oDiv.style.background = 'black'
            oDiv.style.top = Math.random() * 300 + 'px'
            oDiv.style.left = Math.random() * 300 + 'px'
        }
        // 获取新增方块位置
        let a = aDiv[1].offsetTop
        let b = aDiv[1].offsetLeft
        if (aDiv.length == 2) {
            // 移动小方块
            document.onkeydown = function (e) {
                if (e.keyCode == 65 || e.keyCode == 37) {
                    aDiv[0].style.left = aDiv[0].offsetLeft - 10 + 'px'
                } else if (e.keyCode == 87 || e.keyCode == 38) {

                    aDiv[0].style.top = aDiv[0].offsetTop - 10 + 'px'

                } else if (e.keyCode == 68 || e.keyCode == 39) {
                    aDiv[0].style.left = aDiv[0].offsetLeft + 10 + 'px'

                } else if (e.keyCode == 83 || e.keyCode == 40) {
                    aDiv[0].style.top = aDiv[0].offsetTop + 10 + 'px'
                }
                // 计算两方块的距离
                let TopDce = Math.abs(aDiv[0].offsetTop - a)
                let LeftDce = Math.abs(aDiv[0].offsetLeft - b)
                // 如果贴近则删除一个方块
                if (TopDce < 15 && LeftDce < 15) {
                    if (aDiv[1]) { //加个判断 要不然报错
                        aMain[0].removeChild(aDiv[1])
                        aDiv[0].style.hight = aDiv[0].offsetHeight + 100 + 'px'
                    }

                }
            }
        }
    }

</script>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 8月2日
  • 已采纳回答 7月25日
  • 创建了问题 7月24日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改