运动与游戏开发-摩杜云开发者社区

运动与游戏开发

运动原理

如何实现运动

方法：

运动的物体使用绝对定位

通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或向左移动可以使用offsetLeft（offsetRight）来控制左右移动。

步骤：

开始运动前，先清除已有定时器，否则连续点击按钮会使物体运动速度越来越快。

开启定时器，计算速度

把运动和停止用if/else语句隔开，判断停止条件，执行运动

定时器

在javascritp中，有两个关于定时器的专用函数，它们是：

倒计定时器：timer=setTimeout(函数名,time);

循环定时器：timer=setInterval(函数名,time);

运动研究

运动：匀速运动（让物体动起来）

对定时器的使用

给DIV加绝对定位

offsetLeft

问题：到达某个特定位置停止

解决：做判断，符合条件时关闭定时器（存定时器timer）

速度变慢（一般不动时间，而是改数字 - 速度）

用变量存速度

问题：取7时，offsetLeft没有等于300的时候,div停不下来

解决:>=300 //停在 301

问题：到300后点击按钮还继续走

原因：点击按钮,执行函数,开定时器(执行当前函数一至少执行一次)

解决:加else (没有到达目标之前才执行)

问题：连续点击，速度变快

原因：每点击一次就开一个定时器，点击几次就有几个定时器同时工作

解决：保证每次只有一个定时器工作,先clearlnterval ()

逐渐变慢,最后停止

距离越远速度越大

速度有距离决定

速度=(目标值-当前值)/缩放系数

如果没有【缩放系数】速度太大,瞬间到达终点.没有过程

问题：并没有真正到达300

原因：速度只剩0.9

像素是屏幕能够显示的最小单位，并不会四舍五入掉 Math.ceil ()向上取整 Math.floor ()向下取整

问题：向左走，又差一块–Math.floor ()

判断：三目 speed=speed>0 ? Math.ceil ( speed ): Math.floor ( speed )

多物体运动

多个div ,鼠标移入变宽

运动框架传参obj,知道让哪个物体动起来

用到缓冲一定要取整

问题：div没运动回去 //清除前一个定时器

原因：只有一个定时器

解决：加物体上的定时器，使每个物体都有一个定时器。定时器作为物体属性

多个div淡入淡出

首先关闭物体上的定时器

经验：多物体运动框架所有东西都不能共用

问题：不是因为定时器,而是因为alpha

解决：作为属性附加到物体上 /不以变量形式存在

问题：offset 的 bug 加border变宽原因：offsetWith并不是真正的width ,它获取的是盒模型尺寸

解决：躲着宽度扔到行间,parselnt ( oDiv.style.width )

进一步解决： getStyle ( obj, name ) currentStyle , getComputedStyle 加border ,只要offset就有问题去掉offset

链式运动

多出来的一个参数，只有传进去的时候才调用

鼠标移入变宽，结束之后弹出abc

先横向展开.再以向展开

鼠标移出,先变回不透明，变矮，变窄

var oDiv = document.getElementById('div1');
                oDiv.onmouseenter = function(){
                    startMove(this,'width',300,function(){
                        startMove(this,'height',300,function(){
                            startMove(this,'opacity',100);
                        })
                    });
                };

5.封装运动框架

	function startMove(node,attr,iTarget,complete){
                
                clearInterval(node.timer);

                node.timer = setInterval(function(){
                    var iCur = null;
                    //如果是透明度，我们需要转换到0-100的数计算
                    if (attr == 'opacity') {
                        iCur = parseInt(parseFloat(getStyle(node,"opacity") * 100));
                    }else{
                        iCur = parseInt(getStyle(node,attr));
                    }

                    //计算速度
                    var speed = (iTarget - iCur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    //运动和停止分开
                    if(iCur == iTarget){
                        clearInterval(node.timer);
                        if (complete) {
                            complete.call(node);
                        }
                    }else{
                        //如果是透明度则不能使用px并且需要除100得到原本的值
                        if (attr == 'opacity') {
                            iCur += speed;
                            node.style.opacity = iCur / 100;
                        }else{
                            node.style[attr] = iCur + speed + 'px';
                        }
                    }

                }, 30);
            }