整體架構

簡單來說，整個游戲的設計思路就是：

服務器從啟動開始就監聽任何客戶端發來了websocket 連接請求，有了連接（connection事件）后，就把客戶端初次發來的用戶名稱、當前飛機的坐標、朝向作為一個client 加入客戶端數據池（目前簡單處理為clients數組）中。那么至此一個客戶端的數據就同步到了服務器端。

以后這個客戶端的飛機坐標、朝向等信息也定時發送（socket.send）給服務器端，以便于服務器端同時廣播（broadcast）給所有其他客戶端。那么其實服務端就說清楚了，也就是負責中轉消息，目的還是讓所有客戶端視野中的玩家飛機狀態保持一致。

既然websocket是雙向通信，客戶端也需要定時發送消息給服務器端，并且更重要的是處理服務器端發來的各種消息（message事件），分辨哪些是歡迎用戶上線的消息，普通的玩家位置同步消息，抑或是 A 擊敗了 B 這樣的消息。

這一過程中前端和服務器保持著websocket 連接，并且不斷在通信。相比傳統的輪詢和long poll，這樣更加節省流量和性能。總體來說，游戲的邏輯是基于各種消息事件的，connection事件產生一個socket連接，socket連接會有message 事件等等。

后端websocket

廢話說了這么多，簡單看看一些關鍵代碼如何實現。

// 后端關鍵流程實現

var app = express(), server = require( http ).createServer(app), io = require( socket.io ).listen(server); // 引入socket.io 庫io.on( connection , function(socket) { // 開始監聽客戶端的websocket連接請求，connection事件產生 socket 對象 socket.emit( open // 向該客戶端發送open事件. // init client drone obj for each connection !! var client = { name: false, color: getColor(), direction: 0, coordinates: [0, 0] // message from client. socket.on( message , function(msg) { if (!client.name msg.name) { // 如果是第一次連接，把用戶的名字存儲起來，并且廣播給所有客戶端。 var obj = { }; // 構建發送給其他客戶端的消息 obj = msg; clients.push(client); // 加入后臺維持的客戶端數組 socket.broadcast.emit( message , obj); // 廣播歡迎語給其他客戶端 } else if ( client.name == msg.name ) { // 客戶端發來的飛機狀態消息 // 廣播給其他客戶端 socket.broadcast.emit( message , obj);}

后臺處理過程相對簡單，基本只需接受某客戶端發來的消息，轉發給其他客戶端即可( 隨機敵機位置什么的就不講了，當然后期要改成所有客戶端共享一套敵機信息，這樣就可以一起打同一個BOSS了)。但前端需要根據業務需求將服務器傳來的消息分別處理

前端socket和飛機模型

前端業務相對復雜， 除了應對websocket 消息之外，需要構建一套飛機的數據模型，包括位置，速度，朝向，血量，武器裝備等（可以非常復雜，目前就簡單處理）。

var socket;try { socket = io.connect( http://123.206.201.245:3002  socket.on( open , function(){ // 當服務端確認連接后，開始發送第一次數據。 statusBar.innerText = 已經連上服務器..  var askName = prompt( 來，取個名字 ,  socket.on( message , function(json) { // 其實收到的是js 對象，這一點很牛逼。因為雙向通信過程中傳遞的是 Binary 形式的數據，不需要再次解析了。 if (json.type === welcome json.text.name) { // .. 顯示其他用戶登錄消息 } else if (json.type === defeat ) { // .. 在前端的敵機數據模型中移除空血槽的飛機 } else if (drone json.text.name != drone.name) { // .. 傳來的其他客戶端飛機消息 featureCol.features.forEach(function(drone) { // featureCol 是所有敵機數據集合，根據用戶名check是更新還是新增. }

其他問題包括：

飛機的數據涉及到隨時變更上傳服務器，以及渲染兩個用處。渲染采用geojson對象 作為 mapbox api中source 的data，那么是否是一接到服務器端消息就去重繪所有飛機位置呢。這邊通過setInterval 定時調用source 的 setData()方法，實現重繪。

飛機子彈的軌跡計算，涉及到用戶按下空格鍵的瞬間飛機的位置和朝向，根據設定的子彈飛行時間做一個動畫顯示

子彈和敵機的碰撞檢測，簡化處理：設定一個常數作為飛機體積，在子彈飛行過程中實時計算子彈和敵機距離。在地圖處于小比例尺下增大檢測半徑，地圖處于大比例尺下相應減小檢測半徑。

目前可能子彈飛行過程中碰撞檢測的計算量偏大，會有卡頓問題，CPU占用較高，整個應用消耗內存100~130Mb左右... 好多小問題不說了。。確實廢了一些腦子。

挑一兩點分析下，一個是子彈的飛行過程，一個是Robot敵機的隨機行為控制

// setPostion is to update Mydrone position.function setPosition() { // direction in Rad. Generally, 1 Rad stands for 100km var html' target='_blank'>current_rotate = map.getBearing();  if (!manual Math.random() 0.95) { // 這邊有意思，在每秒50幀的情況下，不是每一幀都會隨機微調飛機的方向。而是5%的概率。 direction += (Math.random() - 0.5) /5; // 根據飛機朝向和速度更新位置。 point.coordinates[0] += speed * Math.sin(direction) / 100; point.coordinates[1] += speed * Math.cos(direction) / 100; // 校正飛機的朝向顯示。因為默認情況下mapbox是根據你的視角隨時調整圖標方向。但實際上飛機圖標的朝向必須和飛機運行方向一致，而不是簡單的和標注一樣。 current_rotate = (-current_rotate) + direction * (180 / Math.PI);}

以下是子彈飛行的計算過程.

// start: fire location, target: bullet destination, duration: total animation timefunction renderBulvar(start, target, direction, duration) { // target is geojson POINT, add Temp point in layer..  var interval = 20, ratio = interval/duration, real_point = start, range = 0.4, count = 0, hitted = false; if (target.coordinates) { var targetSource = map.getSource( drone-target  window.setInterval(function(){ if (count duration/interval) { // 到達終點，不計算了 } else { // 子彈每一幀跑一定比例的路程，最終到達指定終點 real_point.coordinates[0] += Math.sin(direction)*ratio*range; real_point.coordinates[1] += Math.cos(direction)*ratio*range; targetSource.setData(real_point); if (!hitted){ hitted = testCrash(real_point.coordinates); // 感覺這里的hitted 有問題. count += 1; }, interval); }

到這里其實基本介紹了這個游戲的制作過程，經歷了一些不成熟的想法，總共花了近十個小時完成目前的開發。還沒有嚴謹地考慮過代碼結構和 函數復雜程序，特別是子彈飛行和碰撞等部分，碰撞到后就終結子彈飛行等等。各位如果感興趣，愿意完成 To DO list中的事情或者有何建議，請訪問git倉庫: Jqmap2 。請各位大神多提修改意見！

喜歡的同學請關注、收藏相關專題，會不斷更新文章。希望和大家分享！！

【相關推薦】

1. 特別推薦：“php程序員工具箱”V0.1版本下載

2. 免費h5在線視頻教程

3. VeVb.com原創html5視頻教程

以上就是html5實現一個簡單的多人飛機游戲實例詳解的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。