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. ubuntu14.04下搭建python+mysql环境

    简略记录ubuntu14.04下搭建python操作的mysql服务器的过程和其中遇到的问题及解决方法. 第一部分: 安装mysql 安装步骤:1. sudo apt-get install mysq ...

  2. “fatal error C1010”错误解决的三种方法

    尝试写了一个简单的类文件,但在编译的时候提示错误,具体错误信息如下: fatal error C1010: unexpected end of file while looking for preco ...

  3. 对前台传回的list进行分割，并放在sql语句的in中

    前端数据集传回数据 var matDeptHisMonthPlanStore = Ext.data.StoreManager.lookup('matDeptHisMonthPlanStore'); m ...

  4. linux Mint18 backspace怎么不能连续删除

    打开菜单--->首选项--->键盘,如下图所示: 打开启用重复按键即可,就可以随心所欲的连续删除,连续移动光标了

  5. DBCP连接池配置示例

    <bean id="dataSourceOracle2" class="org.apache.commons.dbcp.BasicDataSource" ...

  6. nginx windows负载均衡入门

    前言 做了几年开发,都是只管码代码,没有参与过项目的部署,为了知识体系更加完整,于是开始学习一下负载均衡.查了一下资料,觉得用nginx +iis 比较简单,于是小试牛刀. 步骤 准备工作 下载ngi ...

  7. 转行进入IT前端，目标全栈

    选择进入IT这个行业,未来充满着挑战,未来充满着机遇,互联网已经走入高速稳定的发展正轨了,前端大时代也已经到来了.前端之路怎么走,前端需要不停地学习新知识,跟紧时代的步伐,成为全栈工程师是前端的目标. ...

  8. [转]jquery mobile中redirect重定向问题

    本文转自:http://www.cnblogs.com/freeliver54/p/3529813.html 在jquerymobile提交后如果要进行网页重定向时,一定要在form或<a> ...

  9. Python 实现简单的 Web

    简单的学了下Python, 然后用Python实现简单的Web. 因为正在学习计算机网络,所以通过编程来加强自己对于Http协议和Web服务器的理解,也理解下如何实现Web服务请求.响应.错误处理以及 ...

  10. Cocos2dx

    初玩Cocos2dx,多多包涵. 感觉版本之间的差异比较大,相对前面的版本来说,3.X更容易上手,更方便了. 一.安装python.我的python-2.7.3.配置环境变量 系统变量里:在Path里 ...