JavaScript的运动——模拟重力场

代码功能：模拟小球掉落的场景

考虑问题：碰撞边界后反弹的处理，碰撞后动能损耗的处理，清除定时器的条件

html代码

<div></div>

css代码

div {width: 100px;height: 100px;position: absolute;top: 0;left: 0;background-color: steelblue;border-radius: 50%;cursor: pointer;
}

js代码

var oDiv = document.getElementsByTagName('div')[0];
oDiv.onclick = function () {startMove(this);
}
function startMove(dom) {clearInterval(dom.timer);var speedX = 8;var speedY = 10;var g = 3;dom.timer = setInterval(function () {speedY += g;dom.style.top = dom.offsetTop + speedY + 'px';dom.style.left = dom.offsetLeft + speedX + 'px';if (dom.offsetTop >= document.documentElement.clientHeight - dom.offsetHeight) {speedY *= -1;speedX *= 0.8;speedY *= 0.8;dom.style.top = document.documentElement.clientHeight - dom.offsetHeight + 'px';}if (dom.offsetTop <= 0) {speedY *= -1;speedX *= 0.8;speedY *= 0.8;dom.style.top = 0 + 'px';}if (dom.offsetLeft >= document.documentElement.clientWidth - dom.offsetWidth) {speedX *= -1;speedX *= 0.8;speedY *= 0.8;dom.style.left = document.documentElement.clientWidth - dom.offsetWidth + 'px';}if (dom.offsetLeft <= 0) {speedX *= -1;speedX *= 0.8;speedY *= 0.8;dom.style.left = 0 + 'px';}if (speedX < 1 && speedY < 1 && dom.offsetTop == document.documentElement.clientHeight - dom.offsetHeight) {speedY = 0;speedX = 0;clearInterval(dom.timer);}},30);}

问题及解决

问题1：碰撞边界后反弹的处理

解决：首先要判定边界，在小球向下运动的反弹条件是小球的下边线碰到窗口的下边线，由于存在小球的下边线没有刚好处在窗口下边线的情况，则反弹的判定条件是，让小球的offsetTop（小球上边线与窗口的上边线的距离）大于等于窗口可视区的高度减去小球的直径（高度），此时为了防止反弹点不在窗口底边线，则设置小球的offsetTop等于窗口可视区的高度减去小球的直径。反弹后垂直方向上的速度方向改变，可设置speed = -speed；小球在向上运动时反弹的点在上边线上，此时的处理与下边线类似；左右碰撞原理与上下碰撞原理类似，不做赘述。

问题2：碰撞后的动能损耗

解决：动能损耗直观上来讲，就是速度降低，这里拟损耗后的速度为损耗前的0.8倍

问题3：清理定时器的条件

解决：现实中小球停止时，水平和垂直方向的速度均为零，且落在地面上。而模拟的过程发现小球的速度不能为零，但是数值太小不足以引起位置变化，故当水平和垂直方向上的速度均小于1，且小球下边线在窗口下边线（小球的offsetTop等于窗口可视区的高度减去小球的直径）时，设置速度为零并清理定时器。

自信心不止来源于别人的鼓励，更在于努力一次次的证明自己，每完成的一件小事都提醒我自己可以。不过每次听到他的夸赞还是开心的跟个傻子一样，是我太小孩子了嘛

JavaScript的运动——模拟重力场相关推荐

加速度运动/弹性运动/模拟重力场/拖拽运动
(转)javascript关于运动的各种问题经典总结
本文实例总结了javascript关于运动的各种问题.分享给大家供大家参考.具体如下: 一.JS运动的各种问题问题一: 错误代码: ? 1 2 3 4 5 6 7 8 9 10 11 functio ...
【成长之路】JavaScript中，模拟 call 的底层实现
很多人都说IT人员的黄金年龄在 35岁以下,过了保质期就会被淘汰,但是,事实真的是这样吗?我见过40岁以上的IT人员,他们并没有被这个行业所淘汰,相反,他们可以比年轻的IT人员拥有更高的工作效率,因为 ...
JavaScript函数重载模拟
我们从结果向实现推,首先看我们要实现什么样的效果: css(hi,"color","red") css([hi,hello],"color" ...
Js模拟重力场【Js动效】
Js模拟重力场[Js动效] <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
【运动学】基于matlab GUI三体运动模拟【含Matlab源码 871期】
⛄一.获取代码方式获取代码方式1: 完整代码已上传我的资源:[运动学]基于matlab GUI三体运动模拟[含Matlab源码 871期] 点击上面蓝色字体,直接付费下载,即可. 获取代码方式2: ...
2008年最精彩科技图片：电流运动模拟图居首
2008年最精彩科技图片:电流运动模拟图居首北京时间1月5日消息,据英国<新科学家>杂志报道,在刚刚过去的2008年,科学家们拍摄或者绘制了许多精彩绚丽的科技图片,这其中包括模拟电流运动 ...
三体运动计算机模拟软件,三体运动模拟软件ThreeBody
这是三体运动模拟软件ThreeBody,是一款三体运动模拟软件. 软件介绍三体运动模拟软件ThreeBody,可以看三体运动,程序启动后,会出现三个随机大小的球体在运动. 使用说明 1.打开已有的一 ...
JavaScript基础学习模拟京东查询快递单号
JavaScript基础学习模拟京东查询快递单号 <!DOCTYPE html> <html lang="en"><head><meta ...

JavaScript的运动——模拟重力场

JavaScript的运动——模拟重力场相关推荐

最新文章

热门文章