正文
js 实现边缘撞击检测动画
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js 实现边缘撞击检测动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小潘</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden; /* 防止撞击产生滚动条 */
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script>
var speedx = 3;
var speedy = 5;
const move = () => {
var div = window.getComputedStyle(document.getElementsByTagName("div")[0]);
check(div);
var tleft = parseInt(div.left);
var left = speedx + tleft;
var ttop = parseInt(div.top);
var top = speedy + ttop;
document.getElementsByTagName("div")[0].style.left = left + 'px';
document.getElementsByTagName("div")[0].style.top = top + 'px';
}
var mymove = setInterval(() => {
move();
}, 20);
const check = (div) => {
var left = parseInt(div.left);
var top = parseInt(div.top);
var w = parseInt(div.width);
var h = parseInt(div.height);
if (left < 0) {
speedx *= -1;
left = 0;
}
if (top < 0) {
speedy *= -1;
top = 0;
}
if(left > window.innerWidth - w) {
left = window.innerWidth - w;
speedx *= -1;
}
if(top > window.innerHeight - h) {
top = window.innerHeight - h;
speedy *= -1;
}
}
</script>
</body>
</html>
