重力运动

2024-01-13 00:18
文章标签 运动 重力

本文主要是介绍重力运动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

重力运动

重力加速运动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>重力运动</title><style type="text/css">.box {width: 900px;height: 600px;border: solid 1px black;margin: 50px auto;position: relative;}.a {width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}</style>
</head><body><div class="box"><div class="a"></div></div>
</body>
<script type="text/javascript">// 元素的获取var oa = document.querySelector(".a");var t;var speed = 2;var target = 500;document.onclick = function () {// 开始之前先清除定时器clearInterval(t);t = setInterval(() => {//重力运动,就是加速,每次计时器执行都将步长增加,实现加速speed++;// 判断每一步还够不够一步 ；判断是否到终点，没有到终点继续往下走// 目标 - 当前 < 步长if (target - oa.offsetTop < speed) {clearInterval(t);// 最后一步不够一步了，强行拉回来让它到目标oa.style.top = target + "px";// 没有到终点继续往下走} else {oa.style.top = oa.offsetTop + speed + "px";}console.log(1)}, 30)}</script></html>

重力回弹运动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box {width: 900px;height: 600px;border: solid 1px black;margin: 50px auto;position: relative;}.a {width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}</style>
</head><body><div class="box"><div class="a"></div></div>
</body>
<script type="text/javascript">// 元素的获取var oa = document.querySelector(".a");var t;var speed = 2;var target = 500;document.onclick = function () {// 开始之前先清除定时器clearInterval(t);t = setInterval(() => {//重力运动,就是加速,每次计时器执行都将步长增加,实现加速speed++;// 判断每一步还够不够一步 ；判断是否到终点，没有到终点继续往下走// 目标 - 当前 < 步长if (target - oa.offsetTop < speed) {// 为了回弹这时候就不可以再清除计时器了// clearInterval(t);// 强行拉回来最后一步不够一步了，强行拉回来让它到目标oa.style.top = target + "px";// 回弹就是在原本要清除计时器的位置(到底了),将步长取反// speed = -speed;// 从2开始的，第一步就走了2px，当它弹起到定点的时候速度必须是0，这个时候弹起来的时候// 就比落下来的时候多走了两步，落下的时候也没有落到最底下，是落到了倒数第二个那个位置，// 因为最后一步是强行拉回去的，也就是说落下的时候又少了最后半步，而弹起来的时候是从最底下开始弹的，// 重力回弹,每次弹起的步长进行衰减（五分之一）speed = -speed * 0.8;// 步长小于0.5了四舍五入取不到1了就弹不起来了。发生偏差取绝对值速度if (Math.abs(speed) < 1) {// 清除计时器clearInterval(t)}// 没有到终点继续往下走} else {oa.style.top = oa.offsetTop + speed + "px";}console.log(1)}, 30)}</script></html>

重力回弹—抛物线

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box {width: 900px;height: 600px;border: solid 1px black;margin: 50px auto;position: relative;}.a {width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}</style>
</head><body><div class="box"><div class="a"></div></div>
</body>
<script type="text/javascript">//		重力-重力弹回-重力回弹抛物线var oa = document.querySelector(".a");var t;var speed = 2;var target = 500;//		除了垂直位置,再操作左右位置,需要单独设置一套信息var speedL = 10;var targetR = 800;document.onclick = function () {clearInterval(t)t = setInterval(() => {speed++;if (target - oa.offsetTop < speed) {oa.style.top = target + "px";speed = -speed * 0.8;if (Math.abs(speed) < 1) {clearInterval(t);}} else {oa.style.top = oa.offsetTop + speed + "px";}// 左右操作// 判断是否到右边,决定右边的回弹if (targetR - oa.offsetLeft < speedL) {// 强行设置到目标oa.style.left = targetR + "px";speedL = -speedL;// 设置left之前,要先判断计时器是否要被清除，不被清除再设置left。为了点击的时候小球再走} else if (Math.abs(speed) > 1) {// 因为左右是两套分支,设置left会执行两次,为了保证执行两次是一次的效果,所以步长再设置时,要减半oa.style.left = oa.offsetLeft + speedL / 2 + "px";}if (oa.offsetLeft < 0) {// 强行设置到 0oa.style.left = 0 + "px";speedL = -speedL;} else if (Math.abs(speed) > 1) {oa.style.left = oa.offsetLeft + speedL / 2 + "px";}}, 30)}
</script></html>

重力回弹一直弹—来回弹

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box {width: 900px;height: 600px;border: solid 1px black;margin: 50px auto;position: relative;}.a {width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}</style>
</head><body><div class="box"><div class="a"></div></div>
</body>
<script type="text/javascript">var oa = document.querySelector(".a");var t;var speed = 2;var target = 500;//		除了垂直位置,再操作左右位置,需要单独设置一套信息var speedL = 10;var targetR = 800;document.onclick = function () {clearInterval(t)t = setInterval(() => {// speed++;// 上下操作if (target - oa.offsetTop < speed) {oa.style.top = target + "px";speed = -speed * 0.8;if (Math.abs(speed) < 1) {clearInterval(t);}} else {oa.style.top = oa.offsetTop + speed / 2 + "px";}if (oa.offsetTop < 0) {// 强行设置到 0oa.style.top = 0 + "px";speed = -speed;} else if (Math.abs(speed) < 1) {oa.style.top = oa.offsetTop + speed / 2 + "px";}// 左右操作// 判断是否到右边,决定右边的回弹if (targetR - oa.offsetLeft < speedL) {// 强行设置到目标oa.style.left = targetR + "px";speedL = -speedL;// 设置left之前,要先判断计时器是否要被清除，不被清除再设置left。为了点击的时候小球再走} else if (Math.abs(speed) > 1) {// 因为左右是两套分支,设置left会执行两次,为了保证执行两次是一次的效果,所以步长再设置时,要减半oa.style.left = oa.offsetLeft + speedL / 2 + "px";}if (oa.offsetLeft < 0) {// 强行设置到 0oa.style.left = 0 + "px";speedL = -speedL;} else if (Math.abs(speed) > 1) {oa.style.left = oa.offsetLeft + speedL / 2 + "px";}}, 30)}
</script></html>

这篇关于重力运动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/599649。

相关文章

Unity3D 运动之Move函数和translate

Unity3D 运动之Move函数和translate

CharacterController.Move 移动 function Move (motion : Vector3) : CollisionFlags Description描述 A more complex move function taking absolute movement deltas. 一个更加复杂的运动函数，每次都绝对运动。 Attempts to
阅读更多...
【无线通信发展史⑧】测量地球质量？重力加速度g的测量？如何推导单摆周期公式？地球半径R是怎么测量出来的？

【无线通信发展史⑧】测量地球质量？重力加速度g的测量？如何推导单摆周期公式？地球半径R是怎么测量出来的？

前言：用这几个问答形式来解读下我这个系列的来龙去脉。如果大家觉得本篇文章不水的话希望帮忙点赞收藏加关注，你们的鼓舞是我继续更新的动力。 我为什么会写这个系列呢？ 首先肯定是因为我本身就是一名从业通信者，想着更加了解自己专业的知识，所以更想着从头开始了解通信的来源以及在每一个时代的发展进程。 为什么会从头开始写通信？ 我最早是学习了中华上下五千年，应该说朝代史，这个算个人兴趣，从夏
阅读更多...
运动耳机哪个牌子的质量好？五款口碑绝佳机型安利！

运动耳机哪个牌子的质量好？五款口碑绝佳机型安利！

​喜欢户外活动的你，肯定是个有格调的人。想象一下，如果在户外的时候，能戴上一款耳机，不仅跟环境搭，还能让你享受到超棒的音乐，那感觉得多爽！开放式耳机就是为这个目的设计的，它不塞耳朵，戴着更舒服，音质也棒，让你在户外能更好地感受到周围自然的声音。这耳机现在超受欢迎，作为一个既爱户外又爱数码的发烧友，我自己也试过不少款，它们真的给我的户外探险加了不少分。接下来，我会跟大家分享这些耳机的亮点，帮你挑出自
阅读更多...
生命在于运动

生命在于运动

程序员和设计师大部分时间都坐在电脑前。有效的锻炼有助于他们更好地工作。 传统的： 当坐在电脑桌前的时候 脚触地。双手在肘部弯曲。打字时手应搁在桌子上。键盘和鼠标应在触手可及的地方。显示屏应在视线水平上，不高不低。光线最好应来自上方。即光线应该从天花板上照下来。每隔20分钟远眺。可降低眼睛长时间盯着近距离物体产生的疲劳。鼠标和手差不多大小。使用全尺寸符合人体工学的键盘。我个人比较喜欢Mi
阅读更多...
国内领先线上运动平台：如何借助AI技术实现业务腾飞与用户体验升级

国内领先线上运动平台：如何借助AI技术实现业务腾飞与用户体验升级

&nbsp;“ 从智能训练到身体分析，再到辅助判决，AI技术正以惊人的速度渗透进体育和健身领域，为运动员和健身爱好者提供了前所未有的个性化体验。 ” AI，运动的智能伴侣 在巴黎奥运会上，AI技术的运用成为了焦点。它不仅为运动员提供了精准的训练指导，还通过对运动员身体状况的实时分析，帮助他们避免潜在的运动伤害，提升竞技状态。 同时，AI在辅助判决上的应用，确保了比赛的公平与
阅读更多...
IMU腕带评估轮椅用户运动健康

IMU腕带评估轮椅用户运动健康

近期，美国的研究团队利用惯性测量单元（IMU）和机器学习来准确评估手动轮椅使用者的运动健康状况，这在康复训练和慢性病管理领域具有广阔的应用前景。 研究小组将运用高性能的IMU传感器固定到轮椅使用者佩戴的手腕带上，用来监测并记录轮椅推进过程中的运动数据。实验设置了不同强度的六分钟推力测试，结果证实仅使用IMU传感器就能准确捕捉到轮椅使用者的速度、距离和节奏变化，为心血管健康评估提供
阅读更多...
cocos2d-x 重力感应

cocos2d-x 重力感应

本文没你想象的那么，，复杂。其实就是通过重力感应控制个小球移动而已。 先看头文件： [cpp] view plain copy #ifndef __HELLOWORLD_SCENE_H__  #define __HELLOWORLD_SCENE_H__    #include "cocos2d.h"  USING_NS_CC;    class HelloWorld : public
阅读更多...
论文速读|基于手臂约束的轮腿机器人运动操控课程学习

论文速读|基于手臂约束的轮腿机器人运动操控课程学习

项目地址：Arm-Constrained Curriculum Learning for Loco-Manipulation of the Wheel-Legged Robot 本文提出了一种用于轮腿机器人局部操控的强化学习框架，使它们能够在高度动态的情况下执行一系列复杂的操作任务。通过引入臂约束网络和奖励感知课程学习方法，解决了引入机械臂带来的稳定性、安全性和效率挑战。仿真和真实机器人实验
阅读更多...
跑步用耳机哪款好？这五款运动骨传导耳机健身人士都说好！

跑步用耳机哪款好？这五款运动骨传导耳机健身人士都说好！

在无线耳机市场持续繁荣的今天，入耳式耳机以其卓越的音质体验赢得了众多用户的青睐。然而，随着健康意识的提升，长时间佩戴入耳式耳机所带来的健康隐患日益受到关注。正是在这样的背景下，骨传导耳机凭借其独特的非入耳式设计，开启了健康聆听的新篇章。它不仅有效保护了耳道健康，减少了佩戴不适，还确保了用户在享受音乐的同时，能够随时感知外界环境，为日常出行增添一份安全保障。 面对纷繁复杂的骨传导耳机市场，如何挑选
阅读更多...
creator物理引擎 /RPG运动类型 /坦克

creator物理引擎 /RPG运动类型 /坦克

1 applyForce/ToCenter(). 这个力怎么计算 （牛顿第二定律F=ma） 2 .linearVelocity()是像素/米 （看源码） 3 why到第四帧才有速度 CocosCreator官方文档物理引擎Demo（physics-example，下载链接：https://github.com/2youyou2/physics-example） ----------------
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2