有2个div块,怎么让div1相当于墙一样可以挡住div2的移动

您的问题似乎是关于前端网页设计中元素的布局与交互效果。要实现您描述的功能，即让一个div（我们称之为div1）作为一堵“墙”，阻止另一个div（div2）在其上移动，可以通过HTML、CSS以及JavaScript来完成。这里是一个简单的实现思路：

HTML结构

首先，设置两个div的基本结构：

<div id="div1" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
<div id="div2" style="width: 50px; height: 50px; background-color: blue; position: absolute;"></div>

这里假设div1是红色，作为“墙”，而div2是蓝色，会尝试移动。

CSS样式

使用CSS定位和大小设定，确保两个div可以重叠或相邻，并且div1的位置固定。

#div1 {
    /* 示例位置，根据需要调整 */
    left: 100px;
    top: 100px;
}

#div2 {
    /* 初始位置 */
    left: 0;
    top: 0;
}

JavaScript交互

利用JavaScript来控制div2的移动，并检测其是否碰撞到div1。以下是一个简化的示例，使用了定时器让div2向右移动，并在碰撞时停止。

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

// 假设每次移动的距离
var step = 5;

// 定时器，使div2移动
var timer = setInterval(function() {
    var div2Left = parseInt(div2.style.left);
    var div1Left = parseInt(div1.style.left);
    var div1Right = div1Left + div1.offsetWidth;

    // 检测碰撞
    if (div2Left + div2.offsetWidth >= div1Left && div2Left <= div1Right) {
        clearInterval(timer); // 停止移动
        console.log("碰撞发生，停止移动");
    } else {
        div2.style.left = (div2Left + step) + 'px'; // 否则继续移动
    }
}, 100);

这段代码会让div2以每100毫秒5像素的速度向右移动，直到它碰到div1为止。请注意，这只是一个基础示例，实际应用中可能需要考虑更多因素，比如边界检查、动画平滑度优化等。此外，如果需要更复杂的物理碰撞检测或者动画效果，可能还需要引入额外的库，如jQuery或专门的动画/物理引擎库。