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. 常用linux 命令 -字符串相关

    参考网络文章,个人工作总结 题记:一般对字符串的操作有以下几种:求长度,截取字符串,拼接字符串,找字符串中某个字符的索引 1 expr 命令 1.1 定义 man 手册 Print the value ...

  2. __run_timers() -- 处理全部超时定时器

    __run_timers() -- 处理全部超时定时器 run_timer_softirq() --> __run_timers() /usr/src/linux-/kernel/timer.c ...

  3. [转]Oracle10g数据库自动诊断监视工具(ADDM)使用指南

    第一章 ADDM简介                 在Oracle9i及之前,DBA们已经拥有了很多很好用的性能分析工具,比如,tkprof.sql_trace.statspack.set even ...

  4. JavaScript对象创建，继承

    创建对象 在JS中创建对象有很多方式,第一种: var obj = new Object(); 第二种方式: var obj1 = {};//对象直面量 第三种方式:工厂模式 function Per ...

  5. bzoj4349: 最小树形图

    最小树形图模板题…… 这种\(O(nm)\)的东西真的能考到么…… #include <bits/stdc++.h> #define N 60 #define INF 1000000000 ...

  6. Web APP 之rem的使用

    移动端web app的开发,之前开发直接使用px像素做单位,这样子做对于传统的PC端开发来说,个人比较习惯,但是对于移动端在来,有说逞强.最明显是切图效果与设计师想达到的效果有些差距,比如<he ...

  7. Jquery获取select选中的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  8. 【jquery】基础知识

    jquery简介 1 jquery是什么 jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后 ...

  9. SpringMVC文件上传和下载

    上传与下载 1文件上传 1.1加入jar包 文件上传需要依赖的jar包 1.2配置部件解析器 解析二进制流数据. <?xml version="1.0" encoding=& ...

  10. Delphi XE 10 DataSnap TCP 与 HTTP 比较

    在网络程序开发过程中,面临TCP  HTTP 的选择上往往让人陷入犹豫不决中,http的灵活和较强的穿透能力是TCP无法与之相提并论的,然而在响应速度和处理能力上却能看出后者比前者足够强大的地方.因此 ...