簡介：
本單元要來介紹如何使用JavaScript程式製作一個基本款的射擊類，包括：可以移動的槍枝，可以發射移動的子彈，自動產生後被打到會消失的目標物件。還有HTML5格式的音效，但是目前 IE 瀏覽器(IE 11)還不支援。

網頁設計
請先在網頁上製作一個400X400點的絕對位置(position: absolute) div物件作為遊戲區，背景設為黃色，id 取為：F。

接著下載上面的圖案，用 img物件將圖案加入上述 div之中，取名(id)為G，接下來它就是我們的槍枝！
這個物件必須可以用程式操控移動，所以也請設定它的 style屬性 position: absolute， id為 G。

如上設定完畢後，應該可以在遊戲區內用拖曳的方式移動這個物件。

左右移動槍枝的程式
要寫鍵盤程式先要在body標籤中宣告鍵盤事件副程式如下：

接下來在head區塊加入script標籤後寫程式如下：

此地我們要開始經過CSS的機制來操縱物件的位置，具體的說就是 style.left 或 style.top 等等屬性，當我們用程式取得這些屬性時，預設是像這樣的："300px"！但是要計算數值時應該將單位拿掉，重新定義時又要將"px"的單位加回去，所以先建立了兩個 funtion，以便後面程式使用：
function px2int(a) { return parseInt(a.replace('px', '')); } //清除px單位
function int2px(a) { return a + 'px'; } //加上px單位
執行網頁程式試試看已經可以左右移動槍枝了！

動態產生物件的程式
接下來我們在開槍時要動態產生原本不存在的子彈，必須建立一個製作新網頁物件的副程式如下，因為首先要做的就是子彈，順便將子彈的寬、高及速度先宣告一下：

此副程式的程式功能是先宣告網頁(document)要新增(creat)一個div元件(Element)，接著用程式設定它的樣式(style)，與上面使用設計階段的樣式表示窗定義槍枝物件相同，我們要設定一個可以絕對定位，且位置、長、寬、顏色與背景圖案按輸入值設定的物件。當然我們的子彈可以只用顏色即可，但是稍後的射擊目標就可以用此副程式輸入圖案來產生。

音效相關的程式
請按右鍵下載擊中與開槍的兩個音效檔案到你的網站內：Hit.wav，Shoot.wav
HTML5的音效標籤很簡單，請在 body 區塊內任何地方加入以下兩個音效標籤：

有了上述的標籤音效就會下載到客戶的瀏覽器了，要播放時只要使用物件的  play 方法即可。
接下來我們想在按下向上鍵(keyCode=38)時發射子彈向上射擊！kd程式碼擴充如下：

上面程式就是用newObj程式動態產生一個紅色的子彈，位置剛好在槍枝的頂端。
此時先發出音效： Shoot.play();
接著呼叫一個 shoot函數，將物件射出去，程式碼如下：

此副程式首先設定一個計時器T來移動子彈，每次移動速度按之前設定的 v=10，子彈都是往上跑的，如果超出畫面時計時器停止，物件隱藏不顯示(display="none")，最後刪除(delete)這個子彈。
執行程式看看，射擊畫面大概如下！

製作射擊目標
射擊目標通常可以很多，我們用一個網頁初始時執行的 init函數來大量製造，當然還是用newObj函數來做囉！
圖案請用這個：



基本上就是在window.onload事件中，使用兩個迴圈建立一個5X10的目標牆，每個圖案是32X32長寬，間距是40，因此是有空隙的。我們產生新物件之後除了預設會加入網頁，也將他們加入一個 m 陣列，這是為了稍後我們可以順利抓到這些目標，做是不是內擊中的判斷。
這個副程式其實是較新的語法，可以取代之前必須在 body 標寫 onload=... 的語法。

執行後畫面如下：

檢查碰撞的程式
此時開槍射擊目標不會有任何反應，我們必須先建立一個可以檢查子彈與個別目標是否有碰撞的程式如下：

B是一個物件，稍後會代表目標物，x與y則是子彈的位置座標。這是消去法的程式，排除子彈太左太右或太上太下(false)之後就是有撞到了(true)！同學在程式設計課應該都用VB程式做過了，在此指示屬性語法較為麻煩而已。
最後在控制子彈運動的shoot函數內加入一個檢查子彈是否碰到任何目標的程式：

這段程式的意義是用一個迴圈一一取出目標物陣列內的物件，取出的物件用B代表，如果B的 visiblility 屬性不是 hidden(隱藏)，就表示目標還沒被擊中過，必須做與子彈 b 做是否碰撞的檢查，如果有碰撞！就發出 Hit.play(); 的音效，停止子彈移動，並刪除碰撞物件(目標與子彈)。

挑戰：
1.計分機制
2.多元目標

討論：
此時你應該可以測試程式移動槍枝，射擊目標，擊中的目標會消失。
但是音效部分 IE 瀏覽器不支援，想聽到音效必須使用 Google Chrome瀏覽器。
現階段HTML正在大進化，所以各種瀏覽器支援狀況不一，本範例的程式寫法是比較先進的，譬如FireFox就連鍵盤移動都有問題，有興趣可以繼續研究，如何讓所有瀏覽器都看得懂你的JS程式。