网页制作前台之javascript

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

2.321 说到底只不过是个物理过程的算法表达而已。其中移动的实现和前面 2.22 节的拖动是类似的。

2.322 注重感觉这里代码中 this 的使用。我在 Obj.move 中使用 this 的时候，this指的就是 Obj

2.323 注重我把 Obj 放在了函数外面。这时候它就是一个全局变量。这是为了后面使用 setInterval 而预备的。很多菜鸟在用定时器的时候经常发现“找不到对象”的错误，请注重一下变量的定义域问题。

2.324 菜鸟注重学习内置对象 Math 的方法

2.33 让方块停下来

运行代码框
<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, timeHandle; 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"; this.timeHandle=setTimeout("obj.move();",10); } obj.stop=function(){ clearTimeout(this.timeHandle); } obj.onmousedown=function(){ this.stop(); } obj.onmouseup=function(){ this.move(); } obj.move(); } </script>

在方块上按下鼠标，它会停下来，弹起鼠标，它就继续跑了，呵呵。

2.331 没人注重到 2.211 绑定事件 － 回字的四种写法只举出了三种绑定事件的方法吗？呵呵，这里是第四种：
obj.onmousedown=function(){ this.stop(); }

2.332 我把 setInterval 改成了 setTimeout, 并且将定时器的句柄保存在了 obj 的属性里。这种使用定时器的做法是值得菜鸟借鉴的。

2.4 大结局 － 可以抛出的方块
共6页: 上一页 [1] [2] [3] 4 [5] [6] 下一页

评论加载中…