中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

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>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

2.311
這個模型很簡單：
物體的屬性：速度（包含 x 分量和 y 分量，這里設置為一個0-5的隨機數）
物體的方法：運動
環(huán)境屬性：運動阻尼 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; } // 消除臨界狀態(tài)的抖動 this.style.left=parseInt(x)+"px"; // 實現移動 this.style.top=parseInt(y)+"px"; } setInterval("obj.move();",10); } </script>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

代碼開始變難了啊，呵呵。請仔細閱讀注釋。

2.321 說到底只不過是個物理過程的算法表達而已。其中移動的實現和前面 2.22 節(jié)的拖動是類似的。

2.322 注意感覺這里代碼中 this 的使用。我在 Obj.move 中使用 this 的時候，this指的就是 Obj

2.323 注意我把 Obj 放在了函數外面。這時候它就是一個全局變量。這是為了后面使用 setInterval 而準備的。很多菜鳥在用定時器的時候常常發(fā)現“找不到對象”的錯誤，請注意一下變量的定義域問題。

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; } // 消除臨界狀態(tài)的抖動 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>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

在方塊上按下鼠標，它會停下來，彈起鼠標，它就繼續(xù)跑了，呵呵。

2.331 沒人注意到 2.211 綁定事件 － 回字的四種寫法只舉出了三種綁定事件的方法嗎？呵呵，這里是第四種：
obj.onmousedown=function(){ this.stop(); }

2.332 我把 setInterval 改成了 setTimeout, 并且將定時器的句柄保存在了 obj 的屬性里。這種使用定時器的做法是值得菜鳥借鑒的。

2.4 大結局 － 可以拋出的方塊

運行代碼框
<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="divBlock" ></div> <script> f=0.003; // 運動阻尼 k=0.8; // 碰撞彈性系數 g=0.6; // 重力加速度 var obj, timeHandle; window.onload=init; function init(){ obj=document.getElementById("divBlock"); obj.speedX=0; obj.speedY=0; obj.lastX=obj.offsetLeft; obj.lastY=obj.offsetTop; obj.move=function(){ this.stop(); 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; } // 消除臨界狀態(tài)的抖動 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(); divBlock_event_mousedown(arguments[0]); } obj.move(); } function divBlock_event_mousedown(e){ var e, temp; e=window.event?window.event:e; obj.startX=e.clientX-obj.offsetLeft; obj.startY=e.clientY-obj.offsetTop; document.onmousemove=document_event_mousemove; temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,""); } function document_event_mousemove(e){ var e; e=window.event?window.event:e; with(obj.style){ position="absolute"; left=e.clientX-obj.startX+"px"; top=e.clientY-obj.startY+"px"; } obj.speedX=(obj.offsetLeft-obj.lastX)*3; obj.speedY=(obj.offsetTop-obj.lastY)*3; obj.lastX=obj.offsetLeft; obj.lastY=obj.offsetTop; } function document_event_mouseup(e){ var temp; document.onmousemove=""; temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,""); obj.move(); } </script>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

用鼠標按住方塊，然后移動鼠標，同時松開鼠標，看看效果吧，呵呵

這個例子算結束了，哈哈。不作講解了，各位自己看吧。

經典論壇討論：
http://bbs.blueidea.com/thread-2708979-1-2.html

出處：藍色理想
責任編輯：blue

上一頁 網頁制作前臺之javascript [2] 下一頁

◎進入論壇網頁制作、網站綜合版塊參加討論