2021-09-07通过JavaScript实现小球重力回弹效果

2021/9/7 20:08:09

编程Tag： let target 小球 document 2021 07 09 speed boxObj

本文主要是介绍2021-09-07通过JavaScript实现小球重力回弹效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>

<html>

<head>

.cont {

width: 1000px;

height: 600px;

background: #eee;

margin: 20px auto;

position: relative;

}

.box {

width: 100px;

height: 100px;

background: red;

position: absolute;

left: 0;

border-radius: 50%;

}

</style>

</head>

<body>

</div>

</body>

// 1 获取节点

let contObj = document.querySelector('.cont');

let boxObj = document.querySelector('.box');

// 2 设置变量

let speed = 10;

let g = 2;

let times = '';

// 小球的最大目标值

let target = contObj.offsetHeight - boxObj.offsetHeight;

// 3 页面点击之后小球下落

document.onclick = () => {

// 设置定时器

times = setInterval(function () {

// 3-1 给步进值添加重力

speed += g;

console.log(speed, '+');

// 3-2 到达目标,停止运动

if (boxObj.offsetTop + speed > target) {

// 3-3 强制设置到目标

boxObj.style.top = target + 'px'

// 3-4 设置speed为负

speed = -(speed * 0.8);

// console.log(speed, '-');

// 3-5 判断speed小于1,则停止定时器

if (Math.abs(speed) < 1) clearInterval(times);

} else {

boxObj.style.top = boxObj.offsetTop + speed + 'px';

}

}, 30)

}

</script>

</html>

这篇关于2021-09-07通过JavaScript实现小球重力回弹效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

2021-09-07通过JavaScript实现小球重力回弹效果

相关编程文章