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. KMP学习之旅

    说起kmp就要从字符串的匹配说起,下面我们谈谈字符串的匹配 给定一个原字符串:bababababababababb,再给定一个模式串:bababb,求模式串是否在源字符串中出现 最简单的方法就是遍历源 ...

  2. $.extend()和 $.fn.extend()

    1 $.extend()      jQuery.extend(): Merge the contents of two or moreobjects together into the first ...

  3. c/c++中关于sizeof、strlen的使用说明

    sizeof: 一般指类型.变量等占用的内存大小(由于在编译时计算,因此sizeof不能用来返回动态分配的内存空间的大小) strlen: c字符串的长度(参数必须是字符型指针 char*,当数组名作 ...

  4. PhotoSwipe插件的使用

    1.首先引入插件 <link rel="stylesheet" href="css/photoswipe.css"> <link rel=&q ...

  5. markdown编辑器sublime text3

    安装包管理Package Control ctrl+`或者点击查看-->显示面板,复制下面的代码到面板里. import urllib.request,os; pf = 'Package Con ...

  6. 面向对象Part3

    继承: Extends在英文中的翻译是拓展. 但是java允许多重继承. 一条线.单线. ------------------------------------------------------- ...

  7. pureftp 服务

    没啥图,不喜勿喷---_-   ftp(file transfer protocol)--文件传输协议 (a)官网:www.pureftpd.org (b)原理 让用户连接上一个远程计算机(运行FTP ...

  8. c#线程间操作无效: 从不是创建控件“textBox1”的线程访问它

    线程开始前: Control.CheckForIllegalCrossThreadCalls = false;

  9. js如何求一组数中的极值

    这是一个很简单的问题,现在我们从循环开始,例如一组数[5,2,1,3,4];求其中的最大值,那么首先我们要定义一个max的中间变量,遍历数组,当遇到比max值大则赋值给max,直到循环结束,就能获取这 ...

  10. C++开始前篇，深入编译链接（3）

    一,COMMON块 什么是COMMON块,这是一种机制,早期的Fortran没有动态分配空间的机制,程序员必须事先声明它所需要的临时使用空间的大小.Fortran把这种空间叫做COMMON块,当不同的 ...