這一系列帖子將向您展示如何使用HTML5，JavaScript，Winjs和CreateJS創建簡單的Windows 8遊戲
。
該遊戲基於XNA樣本遊戲“彈射戰爭實驗室”。當我們為Windows 8開發基於Web技術的Windows 8的新版本時，我們將重複使用該遊戲的資產。
在這篇文章中，我們將響應用戶輸入，並通過添加聲音使事情變得更加活躍。
鑰匙要點
- >教程演示瞭如何使用HTML5，JavaScript，Winjs和CreateJS創建一個簡單的Windows 8遊戲，並且該遊戲基於XNA示例遊戲“ Catapult Wars Lab”。
>該遊戲旨在以各種形式響應用戶輸入，例如鼠標，觸摸，筆甚至手勢，並實現了MSPOINTER系統和MSGESTURE，用於檢測TAP和Double-Tap等手勢。 - >。
遊戲還使用html音頻元素和預羅德J.
>處理用戶輸入
當然，我們可以通過許多方式拍攝瞄準工作 - 基於時間，基於精度的隨機工作（例如“單擊…現在！”），但是在這種情況下，我們將讓用戶畫一條線，指示方向和速度。
首先，讓我們添加默認值頂部附近的新變量：js：
Windows 8支持繪製的幾種方法 - 鼠標，觸摸，筆 - 我們的遊戲需要足夠靈活，以支持用戶擁有的任何方法。 幸運的是，MSPOINTER系統將對所有這些的支持結合在一起。 我們將使用MSPOTROWNDOWN/UP開始和最終目標，以及MSPOInterMove以在用戶調整目標時提供反饋。
順便說一句，通過MSGENTURE可以通過MSDECTURE（例如Dable，Double-Tap等）進行大力支持。處理輸入和手勢的一個很好的例子是MSDN上的“ Ballineight”樣本。
這些事件是通過指向偵聽器函數（在開火時調用）來使用的。 現在就考慮到這一點，添加在初始化（）函數的頂部附近：
現在，對於函數本身：添加您喜歡的位置，但是我放在update（）和fireshot（）之間：
請注意，練習留在這裡。 為了簡單起見，我省略了以AIM％和/或在Adjudaim（）函數期間繪製瞄準箭頭的文本。 繼續嘗試添加 - 從早期的部分中，我們已經使用了所需的相同技術。
以及幫助我們計算目標的功能：
同樣，簡單性統治了一天，這僅適用於玩家1，但這是發生的事情：
- 行239-241 - 從距離到終點創建一個新點。 將其縮小到一個良好的速度，以適用於每個幀/更新。
>
- 行242＆244 - 確保X和Y受到限制，以免鏡頭從屏幕上消失，太快
>
- 第243和245號線 - 確保射擊朝敵人投入……或多或少。
我們早些時候添加了一些臨時代碼以使player 1始終隨機觸發（）。 現在，我們可以替換使用新的Aimvector：
繼續進行遊戲…
現在，您可以使用鼠標，筆或觸摸來控製鏡頭！
“我一定是在聽東西！” - 添加聲音
直到我們有聲音，我們作為遊戲開發的工作才能完成。 我們已經在第2部分中添加了聲音文件，因此讓我們加載下一步。
首先，在默認值中有幾個變量，以使情況保持整潔：
從第2部分中回想一下，我們已經對PRELOADJS進行了啟動，以確保遊戲開始時我們的資源準備就緒？ 我們可以在聲音中使用相同的方法，所以讓我們將它們添加到清單中：
要使用這些文件，我們將創建HTML音頻元素的實例。 長話短說，如果您只是每個聲音文件創建一個音頻實例，那麼您可能會遇到剪輯，因為一個聲音在該實例的先前播放之前就無法播放。 有幾種處理此問題的方法（例如，請參閱“ HTML5音頻和JavaScript控件”
），但是我們將每次播放聲音時都使用一個實例來做一個簡單的＆
效率低下的事情。
請注意，在此示例中，我們不會使用Soundjs（CreateJS的另一部分），但是當然，歡迎您將其旋轉！
添加彈奏（文件）助手功能：
就是這樣！ 現在，我們只稱呼它，指定指向正確文件的常數。 我們將在幾個地方這樣做。
首先，將呼叫添加到FireShot（）：
現在，ProcessHit（）：
正如評論所提到的那樣，如果您想獲得多次擊球來摧毀彈射器，則可以使用“命中”聲音而不是“爆炸”。
最後，在Endgame（）中播放End Win或失去聲音：
繼續嘗試嘗試一下。
遊戲在……上面……以及……
>
恭喜！ 您已經做了一場比賽！
在這些帖子中，我們已經涵蓋了很多基礎，但是像其他任何東西一樣，還有很多其他事情要嘗試。 為什麼不對其中一些刺傷？
屏幕調整 - 肖像/景觀，捕捉/填充。 了解CSS媒體查詢的絕佳機會！ >
改進觸摸/手勢支持-
精靈/動畫 - 射擊/錯過，彈射回調/火災，彈射器被摧毀-
- >遊戲動力學 - 添加風，新場景，新的彈射功能/升級，彈藥中的選擇等。
>
- >在背景中添加山和移動的雲（資產已經存在）
>
- >在當前非常>人工智能中添加一些智能
考慮使用現場瓷磚 - 也許顯示玩家的最後/高分？ - >
享受！ 期待聽到您添加的新事物！
經常詢問有關使用JavaScript創建簡單Windows 8遊戲的問題
>如何在遊戲字符中添加更複雜的運動？
以在遊戲字符中添加更多複雜的動作，您可以使用“ requestAnimationFrame”方法。此方法使您可以通過調用動畫功能在瀏覽器的下一個重新塗抹之前調用動畫功能來創建更光滑的動畫。您可以使用此方法根據用戶輸入或遊戲邏輯來更新遊戲字符的位置。例如，當用戶按特定的鍵時，您可以使用它來使角色跳躍。
>如何為遊戲添加聲音效果？
>在遊戲中添加聲音效果可以增強遊戲體驗。您可以在JavaScript中使用“音頻”對象播放聲音文件。要播放聲音，您需要創建一個新的音頻對象並調用“播放”方法。您還可以分別使用“卷”，“循環”和“暫停”方法來控制音量，循環聲音，並停止聲音。
>如何使我的遊戲對不同的屏幕尺寸響應？為了使您的遊戲響應迅速，您可以在JavaScript中使用'window.innerwidth'和'window.innerheight'屬性。這些屬性分別返回瀏覽器窗口的寬度和高度。您可以使用這些屬性根據瀏覽器窗口的大小來調整遊戲元素的大小和位置。
>
>如何將多人遊戲功能添加到我的遊戲？
>您的遊戲可能很複雜。您將需要使用Websocket來啟用玩家之間的實時通信。您還需要處理諸如延遲和同步等問題。
如何優化我的遊戲以提高性能？
>>有幾種方法可以優化您的遊戲以提高性能。一種方法是將“ RequestAnimationFrame”方法用於動畫。此方法比“ setInterval”或“ settimeout”更有效，因為當用戶切換到另一個選項卡時，它會暫停動畫。另一種方法是最大程度地減少全局變量和關閉的使用，因為它們可以佔據很多內存。>我如何在遊戲中添加觸摸控件？
以在遊戲中添加觸摸控件，您可以在JavaScript中使用“ touchstart”，“ touchMove”和“ touchend”事件。當用戶觸摸屏幕，移動手指並分別舉起手指時，這些事件會發射。您可以使用這些事件來控制遊戲角色的運動。
>如何在Windows商店中發布我的遊戲？
>
以在Windows商店中發布您的遊戲，您需要創建Windows Store開發人員帳戶。有帳戶後，您可以提交遊戲以進行認證。如果您的遊戲通過了認證過程，它將發佈在Windows商店中。 如何在遊戲中添加應用程序內購買？ ，您需要使用Windows.ApplicationModel.store名稱空間。此名稱空間提供了您需要實現應用內購買的類和方法。 如何在遊戲中添加成就？ 才能在遊戲中添加成就，您可以使用Windows。 ApplicationModel.userDataAccounts名稱空間。此名稱空間提供了您需要實現成就的類和方法。 如何在不同設備上測試我的遊戲？ 在不同的設備上測試您的遊戲，您可以使用Windows Device Portal 。此工具允許您在Windows設備上進行遠程調試和測試。 >
以上是使用JavaScript創建一個簡單的Windows 8遊戲：輸入和聲音的詳細內容。更多資訊請關注PHP中文網其他相關文章！
現在，對於函數本身：添加您喜歡的位置，但是我放在update（）和fireshot（）之間：
請注意，練習留在這裡。 為了簡單起見，我省略了以AIM％和/或在Adjudaim（）函數期間繪製瞄準箭頭的文本。 繼續嘗試添加 - 從早期的部分中，我們已經使用了所需的相同技術。
以及幫助我們計算目標的功能：
同樣，簡單性統治了一天，這僅適用於玩家1，但這是發生的事情：
繼續進行遊戲…
現在，您可以使用鼠標，筆或觸摸來控製鏡頭！
從第2部分中回想一下，我們已經對PRELOADJS進行了啟動，以確保遊戲開始時我們的資源準備就緒？ 我們可以在聲音中使用相同的方法，所以讓我們將它們添加到清單中：
要使用這些文件，我們將創建HTML音頻元素的實例。 長話短說，如果您只是每個聲音文件創建一個音頻實例，那麼您可能會遇到剪輯，因為一個聲音在該實例的先前播放之前就無法播放。 有幾種處理此問題的方法（例如，請參閱“ HTML5音頻和JavaScript控件”
），但是我們將每次播放聲音時都使用一個實例來做一個簡單的＆效率低下的事情。
請注意，在此示例中，我們不會使用Soundjs（CreateJS的另一部分），但是當然，歡迎您將其旋轉！
添加彈奏（文件）助手功能：
就是這樣！ 現在，我們只稱呼它，指定指向正確文件的常數。 我們將在幾個地方這樣做。
首先，將呼叫添加到FireShot（）：
現在，ProcessHit（）：
正如評論所提到的那樣，如果您想獲得多次擊球來摧毀彈射器，則可以使用“命中”聲音而不是“爆炸”。
最後，在Endgame（）中播放End Win或失去聲音：
繼續嘗試嘗試一下。
遊戲在……上面……以及……
