玩和平精英、永结无间的小伙伴们应该见到过一个看不见摸不着但使我们操作的人物不能穿过去，其目的就是减少游戏bug,确保游戏质量。但我们前端的小伙伴如何实现这个空气墙呢？
首先，我们得有“游戏地图”，确保人物始终在我们的屏幕上。
// 获取对话框和标题栏元素
const dialog = document.querySelector('.dialog');
const header = dialog.querySelector('.dialog-header');
let isDragging = false;
let offset = { x: 0, y: 0 };
// 鼠标按下时记录初始位置和偏移量
header.addEventListener('mousedown', (e) => {
isDragging = true;
offset.x = e.offsetX;
offset.y = e.offsetY;
console.log(e.offsetX,e.offsetY)
});
// 鼠标移动时更新对话框位置
document.addEventListener('mousemove', (e) => {
if (isDragging) {
let newLeft=e.pageX-offset.x;
let newRight=e.pageY-offset.y;
//如果我们移动的盒子的坐标小于0
if(newLeft<0){newLeft=0}
//与上同理
if(newRight<0){newRight=0}
dialog.style.left = ${newLeft}px;
dialog.style.top = ${newRight}px;
}
});
// 鼠标释放时停止拖动
document.addEventListener('mouseup', () => {
isDragging = false;
});
.dialog{
position: absolute;
}
.dialog-header {
cursor: move;
padding: 10px;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}
好了，到这一步我们确保了我们可移动的盒子到了屏幕最左边和屏幕最上边不会跑出去
那么空气墙如何制作呢？我们知道和平精英最开始出现空气墙的时候有的玩家比较皮，不经意突破了空气墙，那我们的vue2如何做空气墙呢？
也是比较简单的
.dialog-header { //一种暴力的写法就是在这个盒子加上外边距 margin:100px 0 0 100px; cursor: move; padding: 10px; background-color: #f0f0f0; border-bottom: 1px solid #ccc; }
