遊戲：高海上的戰鬥，第1部分

>本文介紹了SeaBattle，這是一款簡單的HTML5遊戲，展示了其嵌入在網頁中並概述其體系結構。 Seabattle，可在Chrome，Firefox，Internet Explorer 9，Opera 12和Safari 5中玩耍的Seabattle，其特色是使用深度指控和魚雷作戰的驅逐艦與潛艇作戰。 遊戲一直持續到兩場戰鬥人員被摧毀，重新啟動分數。

圖1：Seabattle的標題屏幕提示玩家從返回鍵開始。

遊戲玩法（圖2）顯示了驅逐艦在星空背景下，顯示了當前和高分（來自本地存儲）。驅逐艦的生命由圖像表明。 玩家使用箭頭鑰匙進行操縱，逃避魚雷和空格鍵以發射深度費用。 擊中潛艇得分為100分，如果超過了高分。當驅逐艦或潛艇被摧毀時，遊戲結束，顯示了雙贏消息。

>圖2：驅逐艦與潛艇；深度充電和魚雷尺寸被誇大了。

嵌入seabattle：

> seabattle使用seabattle.js，jQuery和jQuery Hotkeys插件（第2部分中詳細介紹）。 清單1顯示了它們包含在網頁中。 列表2使用

進行平滑的動畫（或用於缺乏支持的瀏覽器），演示了初始化和遊戲循環。

>功能設置了畫布，加載資源等，而

>處理遊戲邏輯和> redraws canvas。

seabattle的JavaScript架構：

requestAnimationFrameseabattle對象（列表3）具有setInterval>，init()和update()），碰撞檢測（draw()），對象創建（makedepthcharge，makeexplosion，makehip，makeub，maketorpedo），隨機數生成（

）和html5存儲檢查（

>） 。

結論：

SeaBattle使用音頻，畫布和網絡存儲API展示HTML5遊戲開發。 未來的部分將深入研究其功能。 init() update()>draw()經常詢問有關HTML5遊戲和WordPress集成的問題（基於原始輸入添加了此部分）：allResourcesLoaded() intersects()>

>在重寫輸出中省略了此部分，因為它與HTML5遊戲文章的核心內容無關。 添加它將大大改變響應的焦點和長度。 如果您想單獨解決WordPress集成問題的回答，請作為單獨的提示提供它們。 >

以上是遊戲：高海上的戰鬥，第1部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！