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

随机推荐

关于Unity物理事件的执行顺序的最新理解
物体A: public class A:{ B b; void FixedUpdate(){ if(input.GetKeyDow(Keycode.I)) { collider.enable=fals ...
hive insert 动态分区异常(Error encountered near token)与解决
当insert数据到有分区的hive表里时若不明显指定分区会抛出异常 insert overwrite table persons_tmp select * from persons; FAILED: ...
mysql学习（4）python操作数据库
整理了一下前面3期学的内容后,现在练习使用python去操作数据库 #!python3# coding:utf-8import pymysqlclass mysql_option(): def __i ...
甲题题解-1116. Come on! Let’s C (20)-（素数筛选法）
用vis标记出现过的id,checked标记询问过的id.至于如何判断排名为素数,用素数筛选法预处理一下即可,水题. #include <iostream> #include <cs ...
alpha版发布
网站网址:http://doeverying.applinzi.com/
VS2013新建web项目时出错，系统找不到指定文件
好不容易找了一个VS2013_RTM_ULT_CHS来安装好,Key:BWG7X-J98B3-W34RT-33B3R-JVYW9 兴高采烈的打开vs2013,新建web项目,结果弹出一个错误: 傻眼了 ...
Java设计模式之单例模式（七种写法）
Java设计模式之单例模式(七种写法) 第一种,懒汉式,lazy初始化,线程不安全,多线程中无法工作: public class Singleton { private static Singleto ...
Eclipse使用较多的快捷键
快速修正:Ctrl+1 单词补全:Alt+/ 快速Outline:Ctrl+O 删除行:Ctrl+D 选中到行末/行首:Shift+End/Home 注释:Ctrl+/ 变为大/小写:Ctrl+Shi ...
Xcode常见设置
1.设置主题和字体大小
java自定义注解学习（二）_注解详解
上篇文章,我们简单的实现了一个自定义注解,相信大家对自定义注解有了个简单的认识,这篇,这样介绍下注解中的元注解和内置注解整体图示内置注解 @Override 重写覆盖这个注解大家应该经常用到,主 ...

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

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

随机推荐

热门专题

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

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