簡介： 本單元要介紹如何用JavaScript作出一個會碰撞反彈的物件，當然要打球就會有拖曳球拍擊球的動作。 網頁物件設計 請先將球的圖案下載到你的網站 開啟一個HTML網頁仿照打地鼠單元的物件配置方式製作如下介面： 啟動按鍵是Button1，黃色遊戲區是一個 id 設為「Q」的 div物件，當然是使用絕對位置(position: absolute)，裡面的球與球拍分別命名(id)為 'B' 與 'P' 的div，請注意兩個div應該放在Q物件標籤的內部，這樣它們稍後用的座標系統就是Q的內部座標，否則計算位置時會比較麻煩。 讓球開始移動的程式 雙按啟動按鍵寫程式如下： 如同打地鼠單元，在此啟動一個計時器 T，執行 run 副程式，每100毫秒X與Y各移動5點，執行程式按下啟動球就會往右下方跑了！在啟動時還加了讓球回到初始位置並設為可見(visibility='visible')的程式碼，原因是稍後球掉出邊界要重玩時也可以用此按鍵復原到原始狀態。 球碰撞牆壁的程式 繼續在 run副程式內加入碰撞牆壁時速度會變化的程式就可以產生四面反彈的效果： 擊球板的拖曳程式 擊球板的拖曳只限定在左右方向，請參考拖曳物件的單元寫出如下程式： 在此不同之處是必須先試算拖曳的終點位置，如果超出左右邊界必須強制修改其位置，這樣球拍才不會被拖出遊戲區。 當然以上程式是專屬於球拍物件'P'的事件副程式，因此必須到原始檔'P'物件內加入事件宣告如下： 球拍應該可以左右拖曳了！ 擊球與漏接的程式 之前程式讓球在底部直接反彈，現在要讓球知道球拍位置，碰到球拍反彈(擊球)，否則就是漏接！球掉出遊戲區就結束遊戲，讓計時器停止。程式碼都寫在 run副程式內，取代之前的底部反彈的程式碼(紅框線區)： 此部分程式先計算球的中心點座標 c，接著以此點為基準檢視球是不是在球拍的反彈範圍，當然也要看球的高度，合乎擊球條件時就執行速度反向(反彈)。另一方面如果球跑到遊戲區外時就停止計時器，且將球隱藏(visibility='hidden')！你必須再按啟動鍵才能再玩一次！