2.222 现在俺详细描述下这个过程：
a) 鼠标按下时，判断鼠标的位置。将鼠标坐标和元素坐标的差存在元素的 startX 和 startY 两个自定义的属性里。绑定鼠标移动事件。
b) 鼠标移动时，判断鼠标的位置。将鼠标坐标和 startX / startY 的差值作为新的元素坐标。（你问我为啥这样算？帅哥请回去重修高中数学，呵呵）
c) 鼠标按键抬起，清除鼠标移动事件的相应。（不然你放开了鼠标方块还是跟着你跑）

2.223 为啥用 document 的事件绑定而不是把事件绑定在 div上面？问的好（你不会没想到这个问题吧？...）如果你试着将事件绑定在div上，你会发现随着鼠标的快速移动，很容易把div给甩掉（不理解的同学请自己去动动手）。具体的为什么不多说了，点到即止，希望菜鸟多多思考。

2.224 不定义 position="absolute" 的话，left 和 top 是无效的 － 方块不会动的说。

2.3 可以移动的方块

2.31 物理模型和面向对象

运行代码框

<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" ></div> <script> f=0.95; // 运动阻尼 k=0.85; // 碰撞弹性系数 g=1; // 重力加速度 window.onload=init; function init(){ var obj; obj=document.getElementById("divBlock"); obj.speedX=parseInt(Math.random()*5); obj.speedY=parseInt(Math.random()*5); obj.move=function(){ // 这里俺暂时不写，呵呵 } } </script>
运行代码复制代码另存代码收藏本页

2.311
这个模型很简单：
物体的属性：速度（包含 x 分量和 y 分量，这里设置为一个0-5的随机数）
物体的方法：运动
环境属性：运动阻尼 f, 和窗口边缘碰撞弹性系数 k, 重力加速度 g

2.312 注意 obj.move 那个方法（函数）的写法

2.32 让方块动起来

运行代码框

<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="divBlock" ></div> <script> f=0.005; // 运动阻尼 k=0.7; // 碰撞弹性系数 g=1; // 重力加速度 var obj; window.onload=init; function init(){ obj=document.getElementById("divBlock"); obj.speedX=140; obj.speedY=400; obj.move=function(){ var x, y, mx, my; x=this.offsetLeft; y=this.offsetTop; mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围 my=document.body.clientHeight-this.offsetHeight; this.speedY+=g; // 计算重力加速度影响的y方向速度 this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度 this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比 if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; } x+=this.speedX; y+=this.speedY; // 计算坐标 if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞 if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; } if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; } if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; } if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢 if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动 this.style.left=parseInt(x)+"px"; // 实现移动 this.style.top=parseInt(y)+"px"; } setInterval("obj.move();",10); } </script>
运行代码复制代码另存代码收藏本页

代码开始变难了啊，呵呵。请仔细阅读注释。

上一页  [1] [2] [3] [4] 下一页