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. Word或者WPS里证件照的背景底色和像素调整

    证件照的背景底色调整和像素调整         关于证件照的背景底色自行调整,比较方便的方法是用Word或者WPS来进行调整,当然也可以利用两者相结合的方法来进行调整,下面来系统的说一下这两种方式.此 ...

  2. 7. Reverse Integer【Leetcode by java】

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  3. 服装盘点机PDA在服装行业颜色尺码仓库条码高效管理应用

    服装行业的商品管理的特点是需要管理颜色和尺码 具体逻辑就是: 什么商品,什么颜色,什么尺码,入库多少个? 什么商品,什么颜色,什么尺码,出库多少个? 什么商品,什么颜色,什么尺码,还有库存多少个? 如 ...

  4. 使用devstack/pike部署多节点实验

    目录 第一步:安装Ubuntu16.04 server并以stack为用户名创建用户 第二步:安装git及相关配置 第三步:安装Open vSwitch 2.5.X 第四步:获取devstack脚本 ...

  5. 团队作业Week5

    每个团队开一个讨论会,协商讨论团队贡献分的分配方式.每个团队的团队贡献分为50分/人.每个人分数不能相同,请详细说明分数的分配规则. 可参考这个博客. 截止时间:2014-10-27

  6. LeetCode 88. 合并两个有序数组

    题目: 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...

  7. Arduino下读取DHT22温湿度（不使用第三方库）

    代码如下: #include <inttypes.h> /* * LED */ unsigned ; /* * DHT22配置程序 */ unsigned ; #define DHT_OK ...

  8. windows 服务实现定时任务调度（Quartz.Net）

    我们通常在一些情况下需要软件具有一个自动执行某些任务的功能,但是又不希望直接启动软件,或者每次都要手动的来启动软件,这时我们可可以考虑到windows服务了. 首先创建一个windows服务项目(详细 ...

  9. ElasticSearch 2 (11) - 节点调优（ElasticSearch性能）

    ElasticSearch 2 (11) - 节点调优(ElasticSearch性能) 摘要 一个ElasticSearch集群需要多少个节点很难用一种明确的方式回答,但是,我们可以将问题细化成一下 ...

  10. PAT乙级(Basic Level)练习题-NowCoder数列总结

    题目描述 NowCoder最近在研究一个数列: F(0) = 7 F(1) = 11 F(n) = F(n-1) + F(n-2) (n≥2) 他称之为NowCoder数列.请你帮忙确认一下数列中第n ...