JavaScript 代码

//****************************************

        //名称：Javascript摸拟自由落体与上抛运动!

        //作者：Gloot

        //邮箱：glootz@gmail.com

        //  QQ：345268267

        //网站：http://www.cnblogs.com/editor/

        //操作：在页面不同地方点几下

        //***************************************

        var $ = function(el) { return document.getElementById(el); };

        function LuoRun()

        {

            this.h = 0;

            this.s = 0;

            this.g = 9.8;

            this.isup = false;

            this.rh = 0;

            this.t = 0;

            this.timer = null;

            this.mt = 0;

            this.top = 0;

            this.left = 0;

            this.id = null;

        }

        LuoRun.prototype.Po = function(obj) {

            this.left += 0.3;

            obj.style.left = (this.left)+'px';

            if (!this.isup) {

                if (this.t == 0)

                {

                    this.top = obj.offsetTop;

                    this.h = 570 - 22 - this.top;

                    this.mt = Math.sqrt(2*this.h/(this.g*100));

                    //alert(mt+' '+isup+' '+t)

                }

                this.t+=0.01;

                if (this.t >= this.mt)

                {

                    this.t = this.mt;

                    this.rh = (1/2)*this.g*this.t*this.t*100;

                    this.s = this.g*this.t*100;

                    obj.style.top = (this.rh+this.top)+'px';

                    //t = 0;

                    this.s = this.s-50>0 ? this.s-50 : 0;

                    this.isup = true;

                    this.t = 0;

                }

                else

                {

                    this.rh = (1/2)*this.g*this.t*this.t*100;

                    this.s = this.g*this.t*100;

                    obj.style.top = (this.rh+this.top)+'px';

                }

            } else { //up

                //return;

                if (this.s == 0) {

                    clearInterval(this.timer);

                    this.id.parentNode.removeChild(this.id);

                    return;

                }

                if (this.t == 0) {

                    this.h = this.s*this.s/(2*this.g*100);

                    this.mt = this.s/(this.g*100);

                    this.top = obj.offsetTop;

                    //alert(mt+' '+isup+' '+t)

                }

                this.t+=0.01;

                if (this.t>=this.mt) {

                    this.t = this.mt;

                    this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100;

                    obj.style.top = (this.top - this.rh)+'px';

                    this.s = 0;

                    this.isup = false;

                    this.t = 0;

                }else {

                    this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100;

                    obj.style.top = (this.top - this.rh)+'px';

                }

            }

        }

        LuoRun.prototype.Go = function(obj) {

            var self = this;

            if (obj == null)

                obj = $('box');

            self.timer = setInterval(function() {

                self.Po(obj);

                if (self.h<=0) {

                    clearInterval(self.timer);

                    self.id.parentNode.removeChild(self.id);

                }

            },10);

        }

        document.onmousedown = function(e) {

            e = e?e:window.event;

            var crtDiv = document.createElement('div');

            crtDiv.style.position = 'absolute';

            crtDiv.style.left = e.clientX + 'px';

            crtDiv.style.top = e.clientY + 'px';

            crtDiv.style.background = '#333';

            crtDiv.style.width = '22px';

            crtDiv.style.height = '22px';

            document.body.appendChild(crtDiv);

            crtDiv.innerHTML = '&nbsp;';

            var C = new LuoRun();

            C.left = e.clientX;

            C.id = crtDiv;

            document.onmouseup = function() {

                document.onmousemove = null;

                window.setTimeout(function() { C.Go(crtDiv); },1000);

            }

        }

Css 样式

<style type="text/css">

        td,body {font-size:12px;}

        .css1 {width:240px;display:table;position:absolute;left:20px;top:20px;border:1px solid green;background:#CAF4BD;line-height:18px;padding:3px;}

        .css2 {width:900px;height:22px;border-top:1px solid #333;position:absolute;top:570px;left:60px;}

</style>

Body Html代码

<body>

    <form id="form1">

    <div class="css1">

       名称：Javascript摸拟自由落体与上抛运动!<br />

       作者：Gloot<br />

       邮箱：glootz@gmail.com <br />

         QQ：345268267 <br />

       网站：http://www.cnblogs.com/editor/ <br />

       操作：在页面不同地方点几下

    </div>

    <div id="line" class="css2">&nbsp;</div>

    </form>

</body>

代码说明

function JsFunc() {

    this.a = "";

    this.b = "";

}    

JsFunc.prototype.method = function() {

    var me = this;

    me.a = "method";

}

function init() {

    var func = new JsFunc();

    func.method();

}

JsFunc 类当于一个(C#中的)类;

var func = new JsFunc();

相当于初始化了一个类，创建了一个对象；

this.a, this.b 相当于 类中的成员；

JsFunc.prototype.method 相当于创建这个类下的一个方法函数;

如果这个JsFunc 多次 new 操作的话，其下 this成员，将各自的运行操作，互不影响；

所以当 对 JsFunc new 后创建一个新对象时，对这对象的成员或方法进行 setTimeout, setInterval 操作话，就会产生类似于并行操作的效果；

function LuoRun()

        {

            this.h = 0;

            this.s = 0;

            this.g = 9.8;

            this.isup = false;

            this.rh = 0;

            this.t = 0;

            this.timer = null;

            this.mt = 0;

            this.top = 0;

            this.left = 0;

            this.id = null;

        }

this.s 表示速度;

this.h 表示设定的高度, 或物体上抛的最高高度;

this.isup 表示正处于上升还是下降状态；

this.rn 表示下降距当前顶的位移，或上抛距离初始速度位置的位移;

this.t  下降或上抛的时间;

this.mt 表示从某一高度落体至某一低点所用的时间，或以某一初始速度上抛至零速度所用的时间;

this.timer 表示定时器

this.top, this.left 表示物体相对于容器顶部及左边的当前偏移；

this.id 表示当前创建方块的对象id值；

LuoRun.prototype.Po = function(obj) {

}

表示物休自由落体及上抛运动的方法；

this.left += 0.3; 表示物体每落体或上抛向左跳动的偏移量(像素);

Po 方法是在定时器 setInterval 下抛行的一个动作，每次执行时都会根据配置偏移量以及自由落体及上抛相关公式计算当前参数值变化，并设定当前物体的位置；

obj.style.left = (this.left)+'px'; 初始化当前步骤的 左偏移;

落体状态

if (!this.isup) {...} 表示是否是落体状态;

if (this.t == 0)

{

         this.top = obj.offsetTop;

         this.h = 570 - 22 - this.top;

         this.mt = Math.sqrt(2*this.h/(this.g*100));

         //alert(mt+' '+isup+' '+t)

}

当时间为 0 时，表示当前处于落体的最顶点，记录当前距顶部的偏移值，设定落体的高度，以及计算此高度落体所用的时间；

 if (this.t >= this.mt)

{

        this.t = this.mt;

        this.rh = (1/2)*this.g*this.t*this.t*100;

        this.s = this.g*this.t*100;

        obj.style.top = (this.rh+this.top)+'px';

        //t = 0;

         this.s = this.s-50>0 ? this.s-50 : 0;

         this.isup = true;

         this.t = 0;

}

当落体所用时间，大于 this.mt 的最大时间时，将时间设置为 this.mt 的落体总时间；

this.rh 根据公式 1/2gt2 得出的位移值，会等于 this.h 的值，或接近于 this.h 的高度值;

this.s 根据 速度在加速度随时间变化的公式计算出 当前的速度，也即最大带度，这也是初始的上抛速度；

this.s = this.s-50>0 ? this.s-50 : 0;

这个 50 即为阻尼系数，即每次上抛所受阻力所减的速度值；

this.isup 设置 true; 表示进入上抛状态；

obj.style.top = (this.rh+this.top)+'px'; 设置物体本步骤落体的当前位置；

上抛运行

if (this.t == 0) {

     this.h = this.s*this.s/(2*this.g*100);

     this.mt = this.s/(this.g*100);

     this.top = obj.offsetTop;

     //alert(mt+' '+isup+' '+t)

}

当时间为 0 时，表示处于上抛开始点，计算 按落体后的速度及公式: v2/(2g) 上升的最大高度 this.h; 最大上升时间 this.mt; 保存当前距顶部的偏移 this.top;

 if (this.t>=this.mt) {

        this.t = this.mt;

        this.rh = this.s*this.t - (1/2)*this.g*this.t*this.t*100;

        obj.style.top = (this.top - this.rh)+'px';

        this.s = 0;

        this.isup = false;

        this.t = 0;

}

当时间 this.t 大于 this.mt 这个最大上抛时间时，将时间设置为 this.mt;

this.rh 表示上抛的高度; 公式: vt - (1/2)gt2 ;

重置 this.t及this.s 时间与速度，并将 this.isup 置为 false，开始落体动作；

LuoRun.prototype.Go = function(obj) {

            var self = this;

            if (obj == null)

                obj = $('box');

            self.timer = setInterval(function() {

                self.Po(obj);

                if (self.h<=0) {

                    clearInterval(self.timer);

                    self.id.parentNode.removeChild(self.id);

                }

            },10);

}

Go 是个定时器，10 毫秒执行一次物体偏移移动操作；

当 this.h 小于等于 0 时，清除物体，该对象方块一个落体与上抛过程结束；

document.onmousedown = function(e) {

            e = e?e:window.event;

            var crtDiv = document.createElement('div');

            crtDiv.style.position = 'absolute';

            crtDiv.style.left = e.clientX + 'px';

            crtDiv.style.top = e.clientY + 'px';

            crtDiv.style.background = '#333';

            crtDiv.style.width = '22px';

            crtDiv.style.height = '22px';

            document.body.appendChild(crtDiv);

            crtDiv.innerHTML = '&nbsp;';

            var C = new LuoRun();

            C.left = e.clientX;

            C.id = crtDiv;

            document.onmouseup = function() {

                document.onmousemove = null;

                window.setTimeout(function() { C.Go(crtDiv);                          },1000);

            }

        }

当鼠标点击页面时，就创建一个灰黑底，宽高 22 像素的方块；

并初始化 (创建新对象) LuoRun 类；

当鼠标松开后，过一秒钟执行 LuoRun的 Go 定时器，开始表现物体的落体与上抛过程；

Javascript摸拟自由落体与上抛运动 说明!的更多相关文章

  1. canvas 模拟小球上抛运动的物理效果

    最近一直想用学的canvas做一个漂亮的小应用,但是,发现事情并不是想的那么简单.比如,游戏的逼真效果,需要自己来coding…… 所以,自己又先做了一个小demo,算是体验一下亲手打造物理引擎的感觉 ...

  2. [Unity算法]斜抛运动

    斜抛运动: 1.物体以一定的初速度斜向射出去,物体所做的这类运动叫做斜抛运动. 2.斜抛运动看成是作水平方向的匀速直线运动和竖直方向的竖直上抛运动的合运动. 3.它的运动轨迹是抛物线. Oblique ...

  3. JavaScript模拟自由落体

    1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能  Ek = (1/2)mv^2 速 ...

  4. CSS之Win8界面摸拟

    开门见山,先把测试Result放上: <head> <meta charset="UTF-8"> <meta http-equiv="X-U ...

  5. Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo

    本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...

  6. OpenGL绘制自由落体小球

    OpenGL绘制自由落体小球 一.    程序运行的软硬件环境 本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...

  7. javascript---在自由落体实现

    实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离 简单demo ...

  8. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  9. PS游戏摸拟器ePSXe加速游戏速度方法

    1.启动ePSXe游戏摸拟器. 2.菜单栏上的设置->视频->在视频设置窗口 设置主视频插件->设置. 3.在设置插件的窗口帧速率选择框中 勾上使用帧速率限制 点选帧速率限制为(10 ...

随机推荐

  1. iOS开发面试题整理

    前言 本文借鉴整理了iOS高级开发常见的面试题,并且分博客一一分析,希望能和大家一起进步学习. 欢迎大家关注我的 Github

  2. java中多态的实现机制

    多态的概念: 简单来说就是事物在运行过程中存在的不同状态,即父类或接口定义的引用变量指向子类或具体实现类的实例对象.程序调用方法在运行期才进行动态绑定,而不是引用变量的类型中定义的方法. 多态存在的前 ...

  3. Google C++ 编码规范

    刚刚看到一位博主的文章分享Google C++ 编码规范 本人做一下记录,方便以后学习.. 中文在线版本地址: http://zh-google-styleguide.readthedocs.io/e ...

  4. PAT甲题题解-1062. Talent and Virtue (25)-排序水题

    水题,分组排序即可. #include <iostream> #include <cstdio> #include <algorithm> #include < ...

  5. @PathVariable获取带点参数，获取不全

    {account:.+}在{account}后加上:.+ 可参考原博:http://blog.csdn.net/jrainbow/article/details/46126179

  6. Daily Scrum - 11/24

    今天会议时,人千提出了保存用户对每个单词背的程度的事,即如何保存每个单词上次背的时间,下次应背的时间等信息,是存放在数据库里还是存在onedrive上.目前已经联系Travis咨询数据库存储方面的事. ...

  7. ElasticSearch 2 (19) - 语言处理系列之故事开始

    ElasticSearch 2 (19) - 语言处理系列之故事开始 摘要 全文搜索是精度(尽可能少的返回不相关文档)和召回(尽可能多的返回相关文档)的战场.尽管只精确匹配用户查询的词肯定会是精确的, ...

  8. Software-Defined Networking:A Comprehensive Survey--Day3

    (接Day2的内容 +2s) E. Layer V: Northbound Interfaces 南行接口已经得到广泛接受(OpenFlow),但现在就定义北向接口还为时尚早,开发不同的控制器经验一定 ...

  9. Python爬虫：如何爬取分页数据？

    上一篇文章<Python爬虫:爬取人人都是产品经理的数据>中说了爬取单页数据的方法,这篇文章详细解释如何爬取多页数据. 爬取对象: 有融网理财项目列表页[履约中]状态下的前10页数据,地址 ...

  10. PAT 甲级 1087 All Roads Lead to Rome

    https://pintia.cn/problem-sets/994805342720868352/problems/994805379664297984 Indeed there are many ...