js练手之模拟水平抛球运动

-匀加速运动

-匀减速运动

模拟运动有些基本的思路，当前所在点的坐标，元素的长宽是多少，向右/向下运动x/y增加，向上/向左运动x/y减少，运动的路程是多少，用什么方程进行计算，要如何对方程进行适应性修改

代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>js模拟抛出球运动</title>

</head>

<body>

    <div id="ball" style="top: 10px; left: 10px;"></div>

</body>

</html>
body{background-color:rgb(44,52,55);position:relative;width:100%;height:100%;}

#ball {

        width: 100px;

        height: 100px;

        background-color: lightgreen;

        position: absolute;

        border-radius: 100%;

        -webkit-border-radius: 100%;

    }
        (function () {

          //把X,Y维度的运动单独分开处理，X方向是匀速，Y维度是匀加速运动

            var t_x = 0,//x维度的时间t

                t_y = 0,//y维度的时间t

                s_x = 0,//x维度的运动距离

                s_y = 0,//y维度的运动距离

                t_x_increase=5,

                t_y_increase=0.3,

                isMovingUp = 1;

            var _ball = document.getElementById("ball");

            var ballTop = parseInt(_ball.style['top']),

                ballLeft = parseInt(_ball.style['left']);

            function ballMovement() {//js模拟抛出球运动，这里忽略了空气阻力

                t_x += t_x_increase;

                if (t_x >= 600) {//水平方向运行到600px时重复

                    t_x = 0;

                }

                s_x = t_x;

                _ball.style['left'] = (ballLeft + s_x) + 'px';

                t_y += t_y_increase;

                if (t_y >= 6 ) {//y方向向下加速到时间为6就反方向

                    isMovingUp = -1 * isMovingUp;

                    t_y = 0;

                } else if (t_y<0) {//y方向向上减速到时间为0就反方向

                    isMovingUp = -1 * isMovingUp;

                    t_y = 0;

                }

                if (isMovingUp != -1) {

                    s_y = 10 * Math.pow(t_y, 2) / 2;//s = gt^2/2　加速向下

                } else {

                    s_y = 180-(60 * t_y - 10 * Math.pow(t_y, 2) / 2);// s=vt-gt^2/2 减速向上

                }

                _ball.style['top'] = (ballTop + s_y) + 'px';//实时设置位置

                requestAnimationFrame(ballMovement); // repeat

            }

            ballMovement();

        })();

js模拟抛出球运动的更多相关文章

  1. nodejs显现events.js:72抛出错误

    随着人们开始学习,我用nodejs过程中遇到如下列错误执行: events.js:72 throw er; // Unhandled 'error' event ^ Error: listen EAD ...

  2. Atitti 跨语言异常的转换抛出 java js

    Atitti 跨语言异常的转换抛出 java js 异常的转换,直接反序列化为json对象e对象即可.. Js.没有完整的e机制,可以参考java的实现一个stack层次机制的e对象即可.. 抛出Ru ...

  3. cocos2d JS 错误异常抛出捕获和崩溃拦截

    Error对象 一旦代码解析或运行时发生错误,JavaScript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方. Error对象的实例有三个最基本的属性: nam ...

  4. vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

  5. Python--day41--事件和信号量之模拟连接数据库并在连接三次后抛出连接超时异常

    #事件被创建的时候#False状态 #wait()阻塞#True状态 #wait() 非阻塞#clear 设置状态为False#set 设置状态为True #数据库 --- 文件夹#文件夹里有好多ex ...

  6. 编写Java程序，模拟五子棋博弈过程中的异常声明和异常抛出

    返回本章节 返回作业目录 需求说明: 模拟五子棋博弈过程中的异常声明和异常抛出,判断用户所下棋子的位置,是否超越了棋盘的边界. 棋盘的横坐标的范围为0-9,纵坐标范围为0-14,如果用户所放棋子的坐标 ...

  7. JS异常捕获和抛出

    try...catch 用来异常捕获(主要适用于IE5以上内核的浏览器,也是最常用的异常捕获方式) 使用onerror时间捕获异常,这种捕获方式是比较古老的一中方式,目前一些主流的浏览器暂不支持这种 ...

  8. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  9. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

随机推荐

  1. 全文检索解决方案（lucene工具类以及sphinx相关资料）

    介绍两种全文检索的技术. 1.  lucene+ 中文分词(IK) 关于lucene的原理,在这里可以得到很好的学习. http://www.blogjava.net/zhyiwww/archive/ ...

  2. Java Web ——http协议响应报文

    HTTP 响应报文 HTTP 响应报文由状态行.响应头部.空行 和 响应包体 4 个部分组成,如下图所示: 下面对响应报文格式进行简单的分析: 状态行:状态行由 HTTP 协议版本字段.状态码和状态码 ...

  3. sql查找去重复并且字段不为空的数据

    select distinct username,quantity  from Student where isnull(username,'')<>'' and p_id = {1}

  4. 【Android】Android属性allowBackup安全风险

    allowBackup值为true或false,Android API Level 8及其以上Android系统提供了为应用程序数据的备份和恢复功能,当allowBackup标志为true时,用户即可 ...

  5. git操作

    svn终结,git时代来临 git是最好的分布式版本控制系统 廖雪峰的git讲的蛮不错,http://www.liaoxuefeng.com/wiki/0013739516305929606dd183 ...

  6. mysql存储过程编写-入门案例-遁地龙卷风

    (-1)写在前面 这篇文章只是简要的叙述了mysql存储过程编写的基本概念. 我使用的mysql版本是5.7.9-log. 参照<<深入浅出MySQL>>. (0) delim ...

  7. python之路十三

    前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒机所具备的功能属性中的其中 ...

  8. 使用KRPano资源分析工具分析动态网站资源

    软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...

  9. selenium webdriver 右键另存为下载文件（结合robot and autoIt）

    首先感谢Lakshay Sharma 大神的指导 最近一直在研究selenium webdriver右键菜单,发现selenium webdriver 无法操作浏览器右键菜单,如图 如果我想右键另存为 ...

  10. Cnblogs自定义皮肤css样式-星空观测者

    不知不觉来Cnblogs也这么久了,然而Blogs提供的主题还是依旧那么复古,总觉得阅读起来难免枯燥,虽然我认为做技术不可以太过浮躁,但是一个美观的主题终究是吸引人眼的第一要素. 毕竟这么久了,在博客 ...