Estoy tratando de hacer algún tipo de "juego" y lo que quiero hacer es cuando me muevo alrededor de un div, recibir una notificación cuando el div rojo en movimiento esté encima del div verde estático.
Por "notificado" me refiero a establecer la propiedad de visualización de párrafos en "bloquear" o incluso mi a console.log() , no es tan importante cómo recibo el mensaje.
PD: Puedes moverte por el bloque rojo con las flechas arriba, izquierda, derecha y abajo.
Aquí está mi código:
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>He adaptado esta respuesta para que el mensaje se muestre cuando el div rojo esté encima del otro:
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>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 } }Esta función evalúa si dos rectángulos chocan, pero debe proporcionar el ancho y el alto para cada entidad del juego.
También puede usar getComputedStyle() para obtener los valores CSS.
Pero si realmente quieres hacer un juego, probablemente deberías reiniciar usando un motor de juego como Phaser , por ejemplo.