I want to write code something like this:
if ( [*distance between two objects*] = [*for example: 20px*] ) {
[*run someFunction()*]
}
I have written many different codes and logics , but it's little different for me...
I made mini game using js like a chrome dino game... the runner is approached by various obstacles that it must avoid , you can jump using space button but now I want to make auto jump function when an obstacle approaches him and there will be a specific distance between them I want it to be activated jump function...
maybe I have to use the Pythagorean theorem, something like this?
var a = x1 - x2;
var b = y1 - y2;
var c = Math.sqrt( a*a + b*b );
// c is the distance
if(c == "20px" ) {
onJump();
};
But how can I practically use it?
Please help me if you can...
To get the distance you want to do something like this.
Just bare in mind because I;m using display inline block it add's a little extra margin between elements hence the extra bit of px.
window.onload = function() {
var eleY = document.getElementById('y'),
eleX = document.getElementById('x'),
y = eleY.getBoundingClientRect().left,
x = eleX.getBoundingClientRect().right,
distance = y - x;
eleY.innerHTML = 'y = ' + y;
eleX.innerHTML = 'x = ' + x;
document.getElementById('distance').innerHTML = 'distance = ' + distance;
if(distance == 138){
alert('JUMP');
}
}div {
padding:35px 0;
width: 80px;
display: inline-block;
text-align:center;
vertical-align:middle;
}
#x {
background: red;
}
#distance {
width:100px;
padding:10px 5px;
color:#fff;
background:green;
margin:0 10px;
}
#y {
background: yellow;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
</script>
</head>
<body>
<div id="x"></div>
<div id="distance"></div>
<div id="y"></div>
</body>
</html>