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日

悬赏问题

  • ¥15 急!C++指针编写相关的问题
  • ¥30 用python写一个多签情况下波场的代理资源和回收资源
  • ¥15 怎么在matlab中输出显示泵的流量-扬程和管路损失与流量均在一个表格里
  • ¥15 matlab学期例题代码答疑
  • ¥50 Hadoop:好友推荐
  • ¥15 在线手电筒追加按钮JS
  • ¥15 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标
  • ¥15 一般三角模糊数的上界值和下届值取中值的多少比较合理?
  • ¥15 cuda安装使用问题