當一個 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這樣的游戲引擎重新啟動。