Javascript摸拟自由落体与上抛运动说明!

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/2gt²得出的位移值，会等于 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 时，表示处于上抛开始点，计算按落体后的速度及公式: v²/(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)gt²;

重置 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摸拟自由落体与上抛运动说明!的更多相关文章

canvas 模拟小球上抛运动的物理效果
最近一直想用学的canvas做一个漂亮的小应用,但是,发现事情并不是想的那么简单.比如,游戏的逼真效果,需要自己来coding…… 所以,自己又先做了一个小demo,算是体验一下亲手打造物理引擎的感觉 ...
[Unity算法]斜抛运动
斜抛运动: 1.物体以一定的初速度斜向射出去,物体所做的这类运动叫做斜抛运动. 2.斜抛运动看成是作水平方向的匀速直线运动和竖直方向的竖直上抛运动的合运动. 3.它的运动轨迹是抛物线. Oblique ...
JavaScript模拟自由落体
1.效果图 2.实现分析利用Canvas画圆球.地面: 1.下落过程物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能重力势能 Ep = mgh 动能 Ek = (1/2)mv^2 速 ...
CSS之Win8界面摸拟
开门见山,先把测试Result放上: <head> <meta charset="UTF-8"> <meta http-equiv="X-U ...
Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo
本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...
OpenGL绘制自由落体小球
OpenGL绘制自由落体小球一. 程序运行的软硬件环境本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...
javascript---在自由落体实现
实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离简单demo ...
canvas动画:自由落体运动
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制如何对基本图形移动旋转 ...
PS游戏摸拟器ePSXe加速游戏速度方法
1.启动ePSXe游戏摸拟器. 2.菜单栏上的设置->视频->在视频设置窗口设置主视频插件->设置. 3.在设置插件的窗口帧速率选择框中勾上使用帧速率限制点选帧速率限制为(10 ...

随机推荐

通用shellcode
所有 win_32 程序都会加载 ntdll.dll 和 kernel32.dll 这两个最基础的动态链接库.如果想要在 win_32 平台下定位 kernel32.dll 中的 API 地址,可以 ...
互评Final版本——可以低头，但没必要——取件帮
基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; (1)N(Need,需求) 当今大部分在校学生由于各种原因懒于亲自去取快递,而总麻烦身边人也不是长久之计.而有些同学需 ...
《Linux内核设计与实现》Chapter 2 读书笔记
<Linux内核设计与实现>Chapter 2 读书笔记一.获取内核源码 1.使用Git 我们曾经在以前的学习中使用过Git方法 $ git clone git://git.kernel ...
pdf修复
pdf工具下载地址: 链接:https://pan.baidu.com/s/1SgGSrH7apX64hQEl732wWg 提取码:kg5q 使用说明: 1.含注册命令,先注册再运行.
Github: 团队账号：https://github.com/ChenRuTing
Github: 团队账号:https://github.com/ChenRuTing 以后我们做好的代码会随时更新上传到这里,请老师届时帮我们看看.谢谢老师.
Sprint 1 Review & Daily Scrum - 11/18
今天我们组利用课后的时间对Sprint 1阶段进行了回顾,并对接下来的工作进行了安排. Sprint 1阶段我们开始定的计划是完成最基础的背单词功能,可以让用户可以完整地走一遍背单词流程.回顾上周,我 ...
ns3的输入输出奥秘（二）命令行参数
命令行参数 (1) UdpEchoClientHelper echoClient (interfaces.GetAddress (1), 9); echoClient.SetAttribute (&q ...
对常用软件的评价（TGP腾讯游戏平台）
1,首先说下界面,这款软件的界面有些类似于QQ的界面,登录方式和QQ的方式是一样的,可以简单的说是一款给游戏用的QQ,就是里面的用户变成了游戏 2,功能,简单的说就是将你常玩的游戏放于这游戏平台的表面 ...
(转)linux 内存管理——内核的shmall 和shmmax 参数
内核的 shmall 和 shmmax 参数 SHMMAX= 配置了最大的内存segment的大小 ------>这个设置的比SGA_MAX_SIZE大比较好. SHMMIN= 最小的内存seg ...
Java基础整理之字节、数组、字符串、面向对象
一.字节(8个)8bit = 1B或1byte1024B = 1Kb 二.强制类型转换顺序及其大小顺序遵循向上转换的规则byte,short,char -> int -> long -&g ...

Javascript摸拟自由落体与上抛运动 说明!

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

随机推荐

热门专题

Javascript摸拟自由落体与上抛运动说明!

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