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 ...

随机推荐

20135337朱荟潼 Linux第六周学习总结——进程的描述和进程的创建
朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC 1000029000 第六周进程的描述 ...
VMware 虚拟机CentOS 7 网路连接配置无eth0简单解决办法
个人博客:http://www.cnblogs.com/miaojinmin799/ 在前面几步基本和网上linux配置差不多,最后一步要配置eth0时出现如图所示结果使用ifconfig -a命令 ...
第二阶段Sprint10
昨天:查看有关“共享平台”的资料,看如何实现上传下载功能,并尝试编码,没有成功今天:集合三个人的代码,整合到一起,修复出现的Bug 遇到的问题:看Bug没有出现,但功能不是停止运行就是部分不能用,只 ...
屏蔽系统热键钩子Hook程序
在winform时候,经常需要做屏蔽系统热键: 1.屏蔽左"WIN".右"Win" 2.屏蔽Ctrl+Esc 3.屏蔽Alt+f4 4.屏蔽Alt+Esc 5. ...
Arduino下读取DHT22温湿度（不使用第三方库）
代码如下: #include <inttypes.h> /* * LED */ unsigned ; /* * DHT22配置程序 */ unsigned ; #define DHT_OK ...
iOS 内存管理-copy、 retain、 assign 、readonly 、 readwrite、nonatomic、@property、@synthesize、@dynamic、IB_DESIGNABLE 、 IBInspectable、IBOutletCollection
浅谈iOS内存管理机制 alloc,retain,copy,release,autorelease 1)使用@property配合@synthesize可以让编译器自动实现getter/setter方 ...
Solr查询语法
基于solr版本:6.0.0 当配置好本地的环境之后,就访问http://localhost:8080/solr/index.html.或者是访问已经放在服务器上的solr环境,例如http://10 ...
PAT 甲级 1021 Deepest Root
https://pintia.cn/problem-sets/994805342720868352/problems/994805482919673856 A graph which is conne ...
golang yaml配置文件解析
yaml文件语法此模块内容转自:http://www.ruanyifeng.com/blog/2016/07/yaml.html 大小写敏感使用缩进表示层级关系缩进时不允许使用Tab键,只允许使 ...
delphi checklistbox用法
在Delphi中checklistbox中高亮选中(不论是否Checked)能够进行操作么?删除,上下移动等等删除:CheckListBox.DeleteSelected; 上下移: CheckLi ...

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

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

随机推荐

热门专题

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

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