原文：[How to Build a Multiplayer (.io) Web Game, Part 1]( https://victorzhou.com/blog/build-an-io-game-part-1) GitHub: https://github.com/vzhou842/example-.io-game 深入探索一個 `.io` 遊戲的 Javascript client-side（客戶端）。 如果您以前從未聽說過 `.io` 遊戲：它們是免費的多人 web 遊戲，易於加入（無需帳戶）， 並且通常在一個區域內讓許多玩家相互競爭。其他著名的 `.io` 遊戲包括 `Slither.io` 和 `Diep.io`。 * Slither.io：[http://slither.io](http://slither.io) * Diep.io：[https://diep.io](https://diep.io) 在本文中，我們將**瞭解如何從頭開始構建.io遊戲**。 您所需要的只是 Javascript 的實用知識： 您應該熟悉 `ES6` 語法，`this` 關鍵字和 `Promises`之類的內容。 即使您對 Javascript 並不是最熟悉的，您仍然應該可以閱讀本文的大部分內容。 ## 一個 `.io` 遊戲示例 為了幫助我們學習，我們將參考 https://example-io-game.victorzhou.com。  這是一款非常簡單的遊戲：你和其他玩家一起控制競技場中的一艘船。 你的飛船會自動發射子彈，你會試圖用自己的子彈擊中其他玩家，同時避開他們。 ## 目錄 這是由兩部分組成的系列文章的第 1 部分。我們將在這篇文章中介紹以下內容： 1. 專案概況/結構：專案的高階檢視。 2. 構建/專案設定：開發工具、配置和設定。 3. Client 入口：index.html 和 index.js。 4. Client 網路通訊：與伺服器通訊。 5. Client 渲染：下載 image 資源 + 渲染遊戲。 6. Client 輸入：讓使用者真正玩遊戲。 7. Client 狀態：處理來自伺服器的遊戲更新。 ## 1. 專案概況/結構 我建議下載示例遊戲的原始碼，以便您可以更好的繼續閱讀。 我們的示例遊戲使用了： * Express，Node.js 最受歡迎的 Web 框架，以為其 Web 伺服器提供動力。 * socket.io，一個 websocket 庫，用於在瀏覽器和伺服器之間進行通訊。 * Webpack，一個模組打包器。 專案目錄的結構如下所示： ``` public/ assets/ ... src/ client/ css/ ... html/ index.html index.js ... server/ server.js ... shared/ constants.js ``` `public/` 我們的伺服器將靜態服務 `public/` 資料夾中的所有內容。 `public/assets/` 包含我們專案使用的圖片資源。 `src/` 所有原始碼都在 `src/` 資料夾中。 `client/` 和 `server/` 很容易說明，`shared/` 包含一個由 client 和 server 匯入的常量檔案。 ## 2. 構建/專案設定 如前所述，我們正在使用 Webpack 模組打包器來構建我們的專案。讓我們看一下我們的 Webpack 配置： webpack.common.js ```js const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: { game: './src/client/index.js', }, output: { filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', }), new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/client/html/index.html', }), ], }; ``` * `src/client/index.js` 是 Javascript (JS) 客戶端入口點。Webpack 將從那裡開始，遞迴地查詢其他匯入的檔案。 * 我們的 Webpack 構建的 JS 輸出將放置在 `dist/` 目錄中。我將此檔案稱為 JS bundle。 * 我們正在使用 Babel，特別是 `@babel/preset-env` 配置，來為舊瀏覽器編譯 JS 程式碼。 * 我們正在使用一個外掛來提取 JS 檔案引用的所有 CSS 並將其捆綁在一起。我將其稱為 CSS bundle。 您可能已經注意到奇怪的 `'[name].[contenthash].ext'` 捆綁檔名。 它們包括 Webpack 檔名替換:`[name]` 將替換為入口點名稱（這是`game`），[contenthash]將替換為檔案內容的雜湊。 我們這樣做是為了優化快取 - 我們可以告訴瀏覽器永遠快取我們的 JS bundle，因為如果 JS bundle 更改，其檔名也將更改（`contenthash` 也會更改）。最終結果是一個檔名，例如：`game.dbeee76e91a97d0c7207.js`。 `webpack.common.js` 檔案是我們在開發和生產配置中匯入的基本配置檔案。例如，下面是開發配置： webpack.dev.js ```js const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', }); ``` 我們在開發過程中使用 `webpack.dev.js` 來提高效率，並在部署到生產環境時切換到 `webpack.prod.js` 來優化包的大小。 ### 本地設定 我建議在您的本地計算機上安裝該專案，以便您可以按照本文的其餘內容進行操作。 設定很簡單：首先，確保已安裝 `Node` 和 `NPM`。 然後， ```sh $ git clone https://github.com/vzhou842/example-.io-game.git $ cd example-.io-game $ npm install ``` 您就可以出發了！ 要執行開發伺服器，只需 ```sh $ npm run develop ``` 並在網路瀏覽器中訪問 `localhost:3000`。 當您編輯程式碼時，開發伺服器將自動重建 JS 和 CSS bundles - 只需重新整理即可檢視更改！ ## 3. Client 入口 讓我們來看看實際的遊戲程式碼。首先，我們需要一個 `index.html` 頁面， 這是您的瀏覽器訪問網站時首先載入的內容。我們的將非常簡單： index.html ```html PLAY ``` 我們有： * 我們將使用 HTML5 Canvas（``）元素來渲染遊戲。 * `` 包含我們的 CSS bundle。 * `