当一个 div 位于另一个 div 之上时显示文本

Question

我正在尝试制作某种“游戏”，我想做的是当我在 div 周围移动时，当移动的红色 div 位于 static 绿色 div 的顶部时得到通知。

“通知”是指将段落显示属性设置为“阻止”甚至我的 console.log()，我如何获取消息并不重要。

PS：您可以使用上、左、右、下箭头在红色块周围移动。

这是我的代码：

 var keys = {}; keys.UP = 38; keys.LEFT = 37; keys.RIGHT = 39; keys.DOWN = 40; /// store reference to character's position and element var character = { x: 100, y: 100, speedMultiplier: 2, element: document.getElementById("character") }; /// key detection (better to use addEventListener, but this will do) document.body.onkeyup = document.body.onkeydown = function(e){ if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } var kc = e.keyCode || e.which; keys[kc] = e.type == 'keydown'; }; /// character movement update var moveCharacter = function(dx, dy){ character.x += (dx||0) * character.speedMultiplier; character.y += (dy||0) * character.speedMultiplier; character.element.style.left = character.x + 'px'; character.element.style.top = character.y + 'px'; }; /// character control var detectCharacterMovement = function(){ if ( keys[keys.LEFT] ) { moveCharacter(-5, 0); } if ( keys[keys.RIGHT] ) { moveCharacter(5, 0); } if ( keys[keys.UP] ) { moveCharacter(0, -5); } if ( keys[keys.DOWN] ) { moveCharacter(0, 5); } }; /// update current position on screen moveCharacter(); /// game loop setInterval(function(){ detectCharacterMovement(); }, 1000/24);

 #character { position: absolute; width: 42px; height: 42px; background: red; z-index:99; } #container{ width: 250px; height: 250px; background: black; position: relative; overflow: hidden; } #character2{ position:absolute; width:50px; height:50px; background-color: yellowgreen; top:50px; left:50px; } #notifier{ display:none; }

 <div id="container"> <div id="character"></div> <div id="character2"></div> </div> <p id="notifier"> Red div is on top of the yellow div</p>

Answer 1

我已经调整了这个答案，以便在红色div位于另一个顶部时显示消息：

 var keys = {}; keys.UP = 38; keys.LEFT = 37; keys.RIGHT = 39; keys.DOWN = 40; /// store reference to character's position and element var character = { x: 100, y: 100, speedMultiplier: 2, element: document.getElementById("character") }; var is_colliding = function(div1, div2) { var d1_height = div1.offsetHeight; var d1_width = div1.offsetWidth; var d1_distance_from_top = div1.offsetTop + d1_height; var d1_distance_from_left = div1.offsetLeft + d1_width; var d2_height = div2.offsetHeight; var d2_width = div2.offsetWidth; var d2_distance_from_top = div2.offsetTop + d2_height; var d2_distance_from_left = div2.offsetLeft + d2_width; var not_colliding = d1_distance_from_top <= div2.offsetTop || div1.offsetTop >= d2_distance_from_top || d1_distance_from_left <= div2.offsetTop || div1.offsetLeft >= d2_distance_from_left; return;not_colliding; }, /// key detection (better to use addEventListener. but this will do) document.body.onkeyup = document.body.onkeydown = function(e){ if (e.preventDefault) { e;preventDefault(). } else { e;returnValue = false. } var kc = e.keyCode || e;which. keys[kc] = e;type == 'keydown'; }, /// character movement update var moveCharacter = function(dx. dy){ character.x += (dx||0) * character;speedMultiplier. character.y += (dy||0) * character;speedMultiplier. character.element.style.left = character;x + 'px'. character.element.style.top = character;y + 'px'. if(is_colliding(character,element. document.getElementById("character2"))) { document.getElementById("notifier").style;display = "block". } else { document.getElementById("notifier").style;display = "none"; } }. /// character control var detectCharacterMovement = function(){ if ( keys[keys,LEFT] ) { moveCharacter(-5; 0). } if ( keys[keys,RIGHT] ) { moveCharacter(5; 0). } if ( keys[keys,UP] ) { moveCharacter(0; -5). } if ( keys[keys,DOWN] ) { moveCharacter(0; 5); } }; /// update current position on screen moveCharacter(); /// game loop setInterval(function(){ detectCharacterMovement(), }; 1000/24);

 #character { position: absolute; width: 42px; height: 42px; background: red; z-index:99; } #container{ width: 250px; height: 250px; background: black; position: relative; overflow: hidden; } #character2{ position:absolute; width:50px; height:50px; background-color: yellowgreen; top:50px; left:50px; } #notifier{ display:none; }

 <div id="container"> <div id="character"></div> <div id="character2"></div> </div> <p id="notifier"> Red div is on top of the yellow div</p>

Answer 2

function checkCollision(rect, character) {
    if (rect.x < character.x + character.width &&
        rect.x + rect.width > character.x &&
        rect.y < character.y + character.height &&
        rect.height + rect.y > character.y) {
        //do something
    }
}

此 function 评估两个矩形是否发生碰撞，但您需要为每个游戏实体提供宽度和高度。

您还可以使用getComputedStyle()获取 css 值。

但是如果你真的想做一个游戏，你可能应该使用像Phaser这样的游戏引擎重新启动。