[英]How to make a collision detection between this 2 divs?
I want to activate a collision detection between the green and red div, simple, just square collision.我想激活绿色和红色 div 之间的碰撞检测,简单,只是方形碰撞。 I need it for a game like the dinosaur of google, I'm designing for a class proyect.
我需要它来玩像谷歌恐龙这样的游戏,我正在为 class proyect 设计。 I putted the var of the size form macaco and obstaculo in comment, beacuse something is not working in it, if i leave it normal, the jump function does not work.
我把 macaco 和 obstaculo 大小的 var 放在评论中,因为里面有些东西不起作用,如果我保持正常,跳转 function 不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inicio esqueleto</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div onclick="saltar()" id="macaco" class="macaco"></div>
<div id="obstaculo"></div>
<script type="text/javascript">
var macaco = document.getElementById("macaco");
var obstaculo = document.getElementById("obstaculo");
function saltar(){
macaco.classList.add("play");
setTimeout(function(){
macaco.classList.remove("play");
},1000);
}
// var macaco = {x: 40, y: 70, width: 40, height: 70};
// var obstaculo = {x: 40, y: 50, width: 40, height: 50};
function collision(macaco, obstaculo){
if (macaco.x < obstaculo.x + obstaculo.width &&
macaco.x + macaco.width > obstaculo.x &&
macaco.y < obstaculo.y + obstaculo.height &&
macaco.y + macaco.height > obstaculo.y
) {
alert("It worked!")
// Colision detectada
} return true
}
</script>
</body>
</html>
#macaco {
background-color: green;
height: 70px;
width: 40px;
transform: translateX(15vw);
position: absolute;
bottom: 22px;
position: absolute;
}
#obstaculo {
background-color: red;
height: 50px;
width: 40px;
transform: translateX(50vw);
position: absolute;
bottom: 22px;
position: absolute;
animation: linear obstaculo 2s;
}
.play {
animation: linear saltar 1s;
}
@keyframes saltar {
0% {transform: translatey(0px) translateX(15vw)}
50% {transform: translatey(-120px) translateX(15vw)}
100% {transform: translatey(0px) translateX(15vw)}
}
@keyframes obstaculo {
0% {transform: translatey(0) translateX(50vw)}
100% {transform: translatey(0) translateX(0vw)}
}
For a collision between 2 rectangles you can observe only the x
(width) part.对于 2 个矩形之间的碰撞,您只能观察到
x
(宽度)部分。 So it's down to 2 ranges colliding.所以它下降到 2 个范围碰撞。
[x1, x1 + w1]
and [x2, x2 + w2]
. [x1, x1 + w1]
和[x2, x2 + w2]
。
This will not happen when x1 + w1 < x2
or x2 + w2 < x1
.当
x1 + w1 < x2
或x2 + w2 < x1
时,这不会发生。
So it will happen when the opposite of above happens.因此,当上述相反情况发生时,它就会发生。 Using some Boolean arithmetic (de morgen law) it comes down to:
使用一些 Boolean 算术(de morgen law)它归结为:
x1 + w1 >= x2
and x2 + w2 >= x1
(1D collision between 2 ranges) x1 + w1 >= x2
和x2 + w2 >= x1
(2 个范围之间的一维碰撞)
Back to the 2 rectangles, this needs to happen also for the y
side, so we can combine them all to:回到 2 个矩形,这也需要发生在
y
边,所以我们可以将它们全部组合起来:
function isRectColliding(rect1, rect2) { return (rect1.x + rect1.width) >= rect2.x && (rect2.x + rect2.width) >= rect1.x && (rect1.y + rect1.height) >= rect2.y && (rect2.y + rect2.height) >= rect1.y } var rect1 = macaco.getBoundingClientRect() var rect2 = macaco2.getBoundingClientRect() var rect3 = obstaculo.getBoundingClientRect() console.log('isRectColliding(rect1, rect3)', isRectColliding(rect1, rect3)) console.log('isRectColliding(rect2, rect3)', isRectColliding(rect2, rect3))
#macaco { background-color: green; height: 70px; width: 40px; transform: translateX(15vw); position: absolute; bottom: 22px; } #macaco2 { background-color: yellow; height: 70px; width: 40px; transform: translateX(45vw); position: absolute; bottom: 22px; } #obstaculo { background-color: red; height: 50px; width: 40px; transform: translateX(50vw); position: absolute; bottom: 22px; position: absolute; animation: linear obstaculo 2s; }
<div id="macaco"></div> <div id="macaco2"></div> <div id="obstaculo"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.