Phaser

Phaser：鍵盤事件

本篇文章是Phaser系列的一部分。點擊這裡查看該系列的第一篇文章。滑鼠事件會在遊戲物件上觸發，因為我們通常是透過滑鼠點擊元素。而鍵盤事件則不會與特定的遊戲物件相關聯，我們只是按下鍵盤上的按鍵。所以我們需要在this.input.keyboard對象上監聽這些事件，如下所示： this.input.keyboard.on(<event>, function() { }) <event>是一個字符串，可以是keyup或keydown，用於捕捉所有按下的按鍵，或是結合某個特定按鍵的字符，例如： keyup-A keyup-THREE keydown-F12 keydown-ENTER 我們可以使用許多標識符，包括： A ~ Z F1 ~ F12 BACKSPACE TAB ENTER SHIFT CTRL. ALT PAUSE CAPS_LOCK ESC SPACE PAGE_UP, PAGE_DOWN END, HOME LEFT, UP, RIGHT, DOWN PRINT_SCREEN INSERT, DELETE ZERO, ONE, TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT, NINE NUMPAD_ZERO, NUMPAD_ONE, NUMPAD_TWO, NUMPAD_THREE, NUMPAD_FOUR, NUMPAD_FIVE, NUMPAD_SIX, NUMPAD_SEVEN, NUMPAD_EIGHT, NUMPAD_NINE, NUMPAD_ADD, NUMPAD_SUBTRACT 除了監聽單個按鍵外，我們還可以通過調用this.input.keyboard.createCursorKeys()方法獲得一個按鍵對象： let cursors function create() { cursors = this....

如何使用Phaser.js創建平台遊戲

在這個教程中，我將使用Phaser.js創建一個平台遊戲。玩家可以使用左/右箭頭鍵移動，使用上箭頭鍵跳躍。目標是收集遊戲中的所有星星：當玩家收集到所有星星時，我們將在頂部顯示“遊戲結束”，然後沒有其他操作。雖然這非常簡單，但這是開始一個非常有趣的遊戲的開始，並且這也是展示Phaser以及JavaScript作為遊戲創作編程語言的絕佳方式。設置專案創建一個空文件夾，然後運行以下命令： npm init -y 這將初始化一個最小的’package.json’文件。然後運行以下命令： npm install phaser 如果尚未安裝Parcel，請運行以下命令： npm install -g parcel-bundler 現在創建一個’app.js’文件，然後運行： parcel watch app.js 這將告訴Parcel在’dist/app.js’文件中構建我們的遊戲。創建一個’index.html’文件，內容如下： <!DOCTYPE html> <html> <head> <script src="./dist/app.js"></script> </head> </html> 安裝’browser-sync’以運行包含此文件夾內容的HTTP服務器： npm install -g browser-sync 然後運行以下命令： browser-sync start --server --files "." 以上命令會觀察當前文件夾（以及所有子文件夾）中的所有文件的變化，並在端口3000上啟動一個Web服務器，自動打開一個瀏覽器窗口以連接到服務器。每次更改文件，瀏覽器都會刷新，因此我們可以更快地進行開發。太好了！我們可以開始了。初始化Phaser 打開’app.js’並編寫以下代碼： import Phaser from 'phaser' 讓我們添加一個最小的配置： const config = { width: 800, height: 600, backgroundColor: 0xffffff, scene: { preload, create, update }, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } } } const game = new Phaser....

設置項目以使用Phaser構建JavaScript遊戲

建立一個現代化的項目，並開始使用Phaser 3構建JavaScript HTML5遊戲 Phaser是一個了不起的平台，它使創建遊戲變得非常簡單，還支持物理引擎。它足夠受歡迎，你可以找到插件和工具來更好地構建遊戲並更快地構建遊戲。它基於HTML5技術，這意味著您可以通過Web進行遊戲分發，並且如果需要，也可以將其打包為桌面或移動應用程序。遊戲編程是一個大的主題，在這個介紹中，我想談談基本知識，這些基本知識足以創建簡單的遊戲。在這個教程中，我想詳細介紹一個最佳設置，以使用Phaser 3構建遊戲。讓我們在文件夾中使用npm安裝phaser： npm init -y npm install phaser 現在讓我們設置 Parcel 來打包我們的遊戲： npm install -g parcel-bundler 現在創建一個 game.js 文件，內容如下： import Phaser from 'phaser' new Phaser.Game() 現在運行 parcel watch game.js Parcel將在 dist/game.js 文件中生成我們的JavaScript代碼。現在創建一個 index.html 文件，內容如下： <!DOCTYPE html> <html> <head> <script src="./dist/game.js"></script> </head> </html> 安裝 browser-sync 以運行一個包含這個文件夾內容的HTTP服務器： npm install -g browser-sync 然後運行 browser-sync start --server --files "." 上述命令將監視當前文件夾（和所有子文件夾）中的所有文件的變化，并在端口3000上啟動一個Web服務器，自動打開一個瀏覽器窗口連接到服務器。每次您更改文件時，瀏覽器將自動刷新。在我們原型開發遊戲時，這將非常有用。您現在應該在瀏覽器中看到一個空白屏幕，因為我們初始化了Phaser： import Phaser from 'phaser' new Phaser....