Before we talk about collision motion, let’s take a look at a form that used to appear on websites a long time ago:
Floating ads
<! DOCTYPEHTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Floating ads</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: steelblue;
position: absolute;
}
</style>
<script>
// Collision motion: first find the critical point of collision, and then determine the direction of motion, and then change the corresponding speed (speed inverse)
window.onload = function () {
var oDiv = document.getElementById('div1');
var iSpeedX = 10;
var iSpeedY = 10;
startMove();
function startMove() {
setInterval(function () {
var L = oDiv.offsetLeft + iSpeedX;
var T = oDiv.offsetTop + iSpeedY;
// Distance of movement > height of visible area - height of self indicates movement to the bottom
if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
// Make the distance of the object equal to the distance of the bottom
T = document.documentElement.clientHeight - oDiv.offsetHeight;
// Change the speed direction
iSpeedY *= -1;
}
// If the distance is less than 0, the movement is at the top
else if (T < 0) {
T = 0;
iSpeedY *= -1;
}
if (L > document.documentElement.clientWidth - oDiv.offsetWidth) {
L = document.documentElement.clientWidth - oDiv.offsetWidth;
iSpeedX *= -1;
}
else if (L < 0) {
L = 0;
iSpeedX *= -1;
}
oDiv.style.left = L + 'px';
oDiv.style.top = T + 'px';
}, 30); }};</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Copy the codeConclusion regular
1. Find the critical point of impact
2. Determine the direction of movement
Speed *=-1; speed*=-1;
All that is said is that planes collide with planes. If you have a more complicated collision of circles, of triangles, those complicated collisions are going to apply to the decomposition of velocities, and then after the decomposition, trigonometric functions, calculus, whatever.
Free fall
1. Look for the critical point of impact to determine whether an object is moving to the distance of the bottom motion > the height of the visual field – its own height
2. Speed increment (iSpeed += 3)
3. Change direction of movement (speed *= -1)
4. Stop conditions
Will slowly stop speed times a coefficient of friction (speed*0.75)
The conditional velocity is zero and the object is falling at the same height as the bottom
<! DOCTYPEHTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Free fall</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: sienna;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
var timer = null;
var iSpeed = 0;
oInput.onclick = function () {
startMove();
};
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
iSpeed += 3;
var T = oDiv.offsetTop + iSpeed;
if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
T = document.documentElement.clientHeight - oDiv.offsetHeight;
iSpeed *= -1;
iSpeed *= 0.75;
}
console.log(1)
// The conditional velocity is zero and the object falls at the same height as the bottom
if (Math.abs(iSpeed) <= 1 && T == document.documentElement.clientHeight - oDiv.offsetHeight) {
clearInterval(timer)
}
oDiv.style.top = T + 'px';
}, 30); }};</script>
</head>
<body>
<input type="button" value="Get moving" id="input1">
<div id="div1"></div>
</body>
</html>
Copy the codeParabolic motion
You just need to lose the left velocity in the X-axis when you’re in free fall.
<! DOCTYPEHTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>parabolic</title>
<style>
#img1 {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 500px;
}
#input1 {
background: red;
}
</style>
<script>
window.onload = function () {
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('img1');
var timer = null;
var iSpeed = -40;
var iSpeedX = 10;
oInput.onclick = function () {
startMove();
};
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
iSpeed += 3;
var T = oDiv.offsetTop + iSpeed;
// Bottom critical point
if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
T = document.documentElement.clientHeight - oDiv.offsetHeight;
iSpeed *= -1;
iSpeed *= 0.75;
// X-axis speed loss
iSpeedX *= 0.75;
}
/ / stop
if (Math.abs(iSpeed) <= 1 && T == document.documentElement.clientHeight - oDiv.offsetHeight) {
clearInterval(timer)
}
oDiv.style.top = T + 'px';
oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
}, 30); }};</script>
</head>
<body>
<input type="button" value="Launch" id="input1">
<img id="img1" src="https://qlogo2.store.qq.com/qzone/154752365/154752365/100?1570782333" alt="">
</body>
</html>
Copy the codeSimulate order parabola
The left velocity loss in the X-axis (that is, decelerating motion, times a coefficient of friction)
I’m accelerating in the Y direction
<! DOCTYPEHTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>parabolic</title>
<style>
* {
padding: 0;
margin: 0;
}
#img1 {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 500px;
}
#input1 {
background: red;
}
</style>
<script>
window.onload = function () {
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('img1');
var timer = null;
var iSpeed = -30;
var iSpeedX = 30;
oInput.onclick = function () {
startMove();
};
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
iSpeed += 3;
var T = oDiv.offsetTop + iSpeed;
iSpeedX *= 0.97;
if (T >= document.documentElement.clientHeight - oDiv.offsetHeight) {
clearInterval(timer)
T = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.top = T + 'px';
oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
}, 20); }};</script>
</head>
<body>
<input type="button" value="Launch" id="input1">
<img id="img1" src="https://qlogo2.store.qq.com/qzone/154752365/154752365/100?1570782333" alt="">
</body>
</html>
Copy the code