Javascript--利用向量旋轉實現網頁圖片移動和碰撞反彈效果

  上學期好像有一門課叫網頁腳本設計,現在仔細想想，發現我好像基本沒去上過，書還是新的。期末老師要求交一個作品，做一個網頁，附帶一個Javascript效果。。。

  經過一上午苦學課本語法，稍微明白了這個是個什么東西，就好像C語言里面寫函數一樣，為了完成作業，我其中搞了一個網頁圖片移動和碰到邊界反彈的效果（比較傻逼，大家不要笑啦。）

 

圖片移動的原理都是一樣的，就好像C#里面Drawimage，不斷改變圖片在窗口中顯示的位置，由於改變速率很快，人的肉眼看上去就好像是連續移動的，這樣就有了圖片在移動的幻覺。 移動很簡單，經過簡單測試，我設定10MS刷新一次，每次圖片的橫縱坐標都+=1，這樣效果感覺是最流暢的，關鍵是如何完成圖片遇到四周邊框就反彈的效果，這里的反彈遵從物理上的反彈原則。

我們把圖片的移動看做一個平面向量 v=[x,y]  ，那么在碰撞過程后向量的大小（速率）是不會發生變化的，只是方向變了，所以圖片的碰撞可以看成向量的旋轉。

這里要說明一下，經過推導，如果一個向量[x,y]逆時針旋轉a弧度 那么旋轉后的向量為[x*cos(a)-y*sin(a),x*sin(a)+y*cos(a)]

證明一下:

設原長度為R的向量v0[x0,y0] 與X軸夾角為a   逆時針旋轉b弧度后為向量v1[x1,y1] 現在求v1[x1,y1]

首先由三角函數定義有: x0=R*cos(a) y0=R*sin(a)

旋轉后 x1=R*cos(a+b)  y1=R*sin(a+b)

分別使用余弦定理 正弦定理

x1=R*cos(a)*cos(b)-R*sin(a)*sin(b)

y1=R*sin(a)*cos(b)+R*cos(a)*sin(b)

--> x1=x0*cos(b)-y0*sin(b)

      y1=x0*sin(b)+y0*cos(b)

 

寫成矩陣形式 [x1,y1]=[x0,y0]*|cos(b),sin(b)|

                                               |-sin(b),cos(b)|

（后面我也會專門介紹矩陣這個強大的數學工具）

 

OK 有了上面這個向量旋轉公式，問題基本得到解決了，剩下的就是編碼工作。

這里我設計的是向量與坐標軸夾角為PI/4 也就是45度，這樣相當於每次碰撞逆時針旋轉90度，這個角度很方便，因為每次圖片反彈后它與坐標軸的夾角不變，依然45度。

把上述公式的b換成90度（PI/2）

簡化公式 [x1,y1]=[-y0,x0] 一切順利搞定。

我javascript學得不好，所以代碼比較爛了，呵呵！其實主要的小成就感還是利用自己學到的數學知識來編寫簡單程序，大家不要笑就行啦!~

<script type="text/javascript">
        var iDeltaX=1,iDeltaY=1,iTmp;
    var x=START_X,y=START_Y;
    function PhotoMove()
    {
        x+=iDeltaX;
        y+=iDeltaY;
        if(x>TOPX || x<BOUNDX || y>=TOPY || y<BOUNDY)
        {
            iTmp=iDeltaX;
            iDeltaX=-iDeltaY;
            iDeltaY=iTmp;
        }
        var a=document.getElementById("photo");
        a.setAttribute("style","left:"+x+"px;top:"+y+"px;");
        setTimeout("PhotoMove()",10);
    }
</script>