详细了解JavaScript Number对象的parseInt()方法。 将参数解析为整数并返回： Number.parseInt('10') //10 Number.parseInt('10.00') //10 Number.parseInt('237,21') //237 Number.parseInt('237.21') //237 Number.parseInt('12 34 56') //12 Number.parseInt(' 36 ') //36 Number.parseInt('36 is my age') //36 如您所见，Number.parseInt()非常灵活。它还可以转换带有文字的字符串，并提取第一个数字，但字符串必须以数字开头： Number.parseInt('I am Flavio and I am 36') //NaN 您可以添加第二个参数来指定基数。默认是10进制，但也可以使用八进制或十六进制转换： Number.parseInt('10', 10) //10 Number.parseInt('010') //10 Number.parseInt('010', 8) //8 Number.parseInt('10', 8) //8 Number.parseInt('10', 16) //16

#介紹 PeerJS，WebRTC 庫 使用 WebRTC 可能會很困難。PeerJS 是一個很棒的庫，讓 WebRTC 變得更容易。 我寫過一篇關於 WebRTC 的文章。那篇文章描述了使用該協議使兩個網頁瀏覽器直接通信的細節。 在那篇教程中，我提到了一些抽象了許多細節的庫，以實現 WebRTC 通信。 其中一個庫就是 PeerJS，它使實時通信變得非常簡單。 首先，您需要一個後端，讓兩個客戶端在能夠直接通信之前進行同步。 在一個文件夾中，使用 npm init 初始化一個 npm 項目，使用 npm install peerjs 安裝 PeerJS，然後使用 npx 運行： npx peerjs --port 9000 （運行 npx peerjs --help 查看所有可用的選項）。 這就是您的後端 🙂 現在，我們可以創建一個非常簡單的應用程序並發揮一些作用。我們有一個接收器和一個發送器。 首先，我們創建接收器，它連接到我們的 PeerJS 服務器，並監聽接收到的數據。new Peer() 的第一個參數是我們的同行名稱，我們稱其為 receiver： 包含 PeerJS 客戶端（使用最新可用的庫版本更改）： <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script> 然後，我們初始化 Peer 對象。connection 事件在另一個同行連接到我們時被調用。收到數據後，將調用 data 事件並傳入數據： const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' }) peer....

在撰寫程式碼時，應該遵循所使用的程式語言的慣例。 如果從一開始就學習正確的命名和格式慣例，閱讀別人編寫的程式碼會更容易，而且別人閱讀你的程式碼也會更輕鬆。 Python 在 PEP8 格式指南中定義了自己的慣例。PEP 代表「Python Enhancement Proposals」，這是所有 Python 語言增強和討論的地方。有很多 PEP 提案，都可以在 https://www.python.org/dev/peps/ 找到。 PEP8 是其中一個最早的提案，也是其中一個最重要的。它定義了程式碼的格式，並提供了一些如何以「Pythonic」的方式撰寫 Python 程式碼的規則。 你可以在這裡閱讀完整的內容：https://www.python.org/dev/peps/pep-0008/，但以下是一個快速摘要，可以讓你快速開始： 使用空格縮排，而非使用 TAB 鍵縮排 使用 4 個空格進行縮排 Python 檔案的編碼為 UTF-8 程式碼的每行不要超過 80 個字元 每個陳述式獨立成行 函數、變數名稱和檔案名稱都使用小寫，單字之間使用底線分隔（snake_case） 類別名稱使用大寫開頭，單字之間使用大寫字母分隔（CamelCase） 套件名稱使用小寫，單字之間不使用底線分隔 不應更改的變數（常數）使用大寫 變數名稱應具有意義 添加有用的註解，但避免明顯的註解 在運算子周圍添加空格 不要使用不必要的空白 在函數之前添加一行空白 在類別的方法之間添加一行空白 在函數/方法內部，可以使用空白行將相關的程式碼區塊分隔開來以提高可讀性

＃Phaser：滑鼠輸入 該文章是Phaser系列的一部分。點擊這裡查看系列文章的第一篇。 任何 GameObject 都可以被設置為可互動。 為了實現這一點，我們必須通過調用setInteractive()方法來設置。 text = this.add.text(100, 100, '測試') text.setInteractive() 一旦一個 GameObject 變成了可互動的，它就可以聽取事件。 我們可以使用on()方法來做到這一點。我們通過傳入事件名和當事件發生時要執行的回調函數來實現： text.on('pointerup', function () {}) pointerup只是我們可以聽取的滑鼠事件之一。我們還有： pointerdown pointerdownoutside pointerup pointerupoutside pointermove pointerover pointerout wheel 這只是一個開始。我們還有很多先進的滑鼠（和觸摸）事件控制可供我們使用。 gameobjectdown是一個更通用的事件，當點擊任何互動元素時觸發，它不在物件上觸發，而是在this.input上觸發： this.input.on('gameobjectdown', () => {})

本文是 Phaser 系列文章的一部分。點擊這裡查看系列文章的第一篇。 在 create 函式內，我們可以將 GameObjects 加到遊戲中。 例如我們可以畫出形狀，像是一個圓形： function create() { const circle = this.add.circle(100, 100, 90, 0xffffff) } 這會在座標 (100, 100) 上加入一個直徑為 90 的白色圓形。這些數字都是以像素為單位。 circle 變數包含了新增的圓形的參考。 this 在函式的上下文中是指場景物件。 另一個例子是 this.add.text()，這會在遊戲中加入文字： const text = this.add.text(130, 100, 'test') 你可以通過傳遞一組選項來自訂文字的外觀： const text = this.add.text(50, 100, 'Test', { font: '20px Arial', fill: '#FFFFFF' }) 任何 GameObject 都有一組屬性。例如，我們可以使用 text.x 和 text.y 來訪問 2D 空間中的 x 和 y 軸位置。

本文章為 Phaser 系列文章的一部分。點此查看該系列文章的第一篇。 在先前的例子中，我們看到了如何通過將包含函數引用的物件傳遞給 Phaser.Game() 選項物件的 scene 屬性來創建場景： function preload() {} function create() {} new Phaser.Game({ width: 450, height: 600, scene: { preload, create } }) 這是一個簡單的情境。 一個遊戲通常有多個場景。您可以在不同的檔案中創建每個場景，並將它們作為陣列傳遞給 scene 屬性。 在這種情況下，場景是通過擴展 Phaser.Scene 物件來創建的。 我們在一個獨立的 Welcome.js 檔案中創建了一個歡迎場景： export default class Scene1 extends Phaser.Scene { constructor() { super('welcome') } create() { this.add.text(20, 20, 'Loading..') setTimeout(() => { this.scene.start('game') }, 2000) } } 並在 Game.js 中創建了一個遊戲場景： export default class Scene2 extends Phaser.Scene { constructor() { super('game') } create() { this....

本篇文章是 Phaser 系列的一部分。點擊這裡查看系列的第一篇文章。 Phaser 提供了三種不同的內建物理引擎: Arcade 物理引擎 Matter.js Impact (相容 Impact.js) Arcade 物理引擎是其中最簡單的一種，現在我們就來介紹它。 在 Phaser.Game 初始化配置物件中，通過添加 physics 屬性來啟用 Arcade 物理引擎: const config = { //... physics: { default: 'arcade', arcade: { debug: false } } } 你可以將物理引擎添加到一個單獨的遊戲對象中，如下所示: const dog = this.physics.add.sprite(20, 20, 'dog') 你也可以創建一個物理組。 組對於設置一組物件的共同規則非常有用。 我們有兩種類型的組: 靜態組和動態組。靜態組包含不會移動的元素，例如平台遊戲中的地面: //在 preload() 方法中 this.load.image('ground', 'assets/platform.png') //在 create() 方法中 const platforms = this.physics.add.staticGroup() const ground = this.add.sprite(200, 200, 'ground') platforms.add(ground) 注意: 可以從 https://github.com/photonstorm/phaser3-examples/tree/master/public/assets 下載該資源。...

本篇文章是 Phaser 系列的一部分。點擊這裡查看系列文章的第一篇。 你可以將圖片添加為 GameObjects，但在遊戲開始時顯示圖片時，需要在 preload() 函數中將它們預加載。我們要為它們分配一個標識符，然後在 create() 函數中使用該資源添加圖片： function preload() { this.load.image('apple', 'apple.png') } function create() { this.add.image(200, 200, 'apple') } 注意，200, 200 是我們要放置圖片的位置。它指的是圖片的中心點。 如果要將其設置為左上角位置（較易於理解），可以在圖片上調用 setOrigin() 方法： const image = this.add.image(200, 200, 'apple') image.setOrigin(0, 0) 一旦圖片被創建並添加，我們可以對其進行多種操作，包括縮放： image.setScale(2) 翻轉： image.flipY = true image.flipX = true 等等。

本篇文章是 Phaser 系列的一部分。點擊這裡 查看系列的第一篇文章。 Phaser 遊戲是在 HTML 的 <canvas> 元素中渲染的。 如果你對 Canvas 還不熟悉，我在 Canvas API 教程 中詳細介紹了它。 我們創建一個帶有特定寬度和高度的畫布，並在其中繪製內容。 我們無法使用 CSS 來對元素進行排版，而是需要使用更底層且較困難的 API。 幸運的是，Phaser（以及其他使用底層 Canvas 的庫）抽象了所有細節，所以我們可以專注於應用程式代碼。 我們可以通過在 Phaser 物件上調用 Game 靜態方法來初始化一個 Phaser 遊戲： new Phaser.Game() 我們必須將一個對象字面量傳遞給此函數，其中包含一組配置選項： new Phaser.Game({}) 在這個配置對象中，我們可以設置多個屬性。 首先，我們可以設置畫布的寬度和高度： new Phaser.Game({ width: 450, height: 600 }) 另一個我們可以傳遞的屬性是 backgroundColor，它接受一個十六進制值，例如 0x000000 表示黑色。 顏色類似於 CSS 顏色，但你需要在前面加上 0x 以便 JavaScript 知道這是一個十六進制數字。

此篇文章是 Pharser 系列的一部分。點選這裡 查看這個系列的第一篇文章。 場景是我們定義遊戲的地方，在配置中將它們作為屬性傳遞給 scene 物件。 特別是，我們可以定義 preload 是我們載入外部資源的函式 create 在遊戲剛剛建立時被呼叫，在這裡我們可以定義遊戲開始時所需的 GameObjects update 是遊戲事件迴圈，用於定義遊戲的運作方式 GameObjects 是 Phaser 物件的一種特殊類型 以下是上述提到的兩個事件的範例： function preload() {} function create() {} new Phaser.Game({ width: 450, height: 600, scene: { preload: preload, create: create } }) 或者，因為在這種情況下每個屬性都與函式具有相同的名稱： new Phaser.Game({ width: 450, height: 600, scene: { preload, create } })