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. Ubuntu虚拟机中断后重启网络断接错误解决方案

    因为该死的windows自动更新,所以vmplayer经常会被强制关闭. 但重新启动后,会发生不能连接到网络的情况显示: waiting for the network configuration…… ...

  2. Google的Protobuf协议分析

    protobuf和thrift类似,也是一个序列化的协议实现,简称PB(下文出现的PB代表protobuf). Github:https://github.com/google/protobuf 上图 ...

  3. win10 系统亮度调节

    win10系统发行后,许多用户尝试新的系统发现安装之后亮度无法调节,我也多次遇见此情况 故在此记录修改方式: 打开注册表 -> 搜索键值featuretestcontrol -> 修改键值 ...

  4. 响应式web设计总结

    简单来说响应式是针对不同的屏幕的大小,比如电脑电脑.Pad设备上,屏幕比较宽的,就可以一行放多个Div.到了手机上,或者Pad竖着拿的的时候,一行就只放1到2个Div就差不多了.这样在移动设备上,无论 ...

  5. SqlMapConfig.xml

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE configurationPUBLIC &qu ...

  6. I18n问题 国际化

    http://www.cnblogs.com/guaniu/archive/2012/01/18/2325556.html java国际化 1.了解缺省Locale是由操作系统决定的,Locale是由 ...

  7. 取两个String数组的交集

    import org.testng.annotations.Test; import java.util.HashMap; import java.util.LinkedList; import ja ...

  8. MDI窗体容器--2016年12月15日

    MDI窗体容器 多文档界面(Multiple-Document Interface)简称MDI窗体.MDI窗体用于同时显示多个文档,每个文档显示在各自的窗口中.MDI窗体中通常有包含子菜单的窗口菜单, ...

  9. svn检出项目

    第一步: 第二步: 第三步: 第四步: 第五步: 填写项目名称 第六步: 选择路径 第七步:

  10. 把两个table放在一个Repeater中显示

    DataTable dt; DataTable dt1; HLoanApplyInfo applyInfo = HLoanApplyBll.GetModelById(FLoanID); FLoanID ...