本文是《Phaser 系列》的一部分。点击这里查看系列的第一篇文章。 你可以检测到物理启用的物体之间的碰撞。 Phaser 为我们提供了两个方便的方法来开始。 我们有 collider 和 overlap。两者都可以让我们检测对象是否接近彼此，但有一个区别：collider 在物体相遇时会自动使其反弹，而 overlap 允许物体彼此重叠。 以下是如何添加一个 collider： const collisionHappened = (dog, cat) => { projectile.destroy() } this.physics.add.collider(dogs, cats, collisionHappened, null, this) 以下是如何添加一个 overlap： const overlapHappened = (dog, cat) => { projectile.destroy() } this.physics.add.overlap(dogs, cats, collisionHappened, null, this) 您还可以设置屏幕边界，使得物理对象在到达屏幕边缘时不消失。 调用物体的 setCollideWorldBounds() 方法，并传递 true 值： const dog = this.physics.add.sprite(20, 20, 'dog') dog.setCollideWorldBounds(true) 如果您还想在物体到达屏幕边界时使其反弹，调用： dog.setBounce(1) 您传递的数字将确定其反弹速度。试试设置为 0.5 或 1.5，您将看到物体以较小或较大的能量反弹。

本文章是 Phaser 系列文章的一部分。點擊這裡查看系列文章的第一篇。 在 Phaser 中，除了 preload() 和 create() 這兩個場景外，我們還有第三個場景，被稱為 update()。 在這裡，一切事情都會發生。 preload() 和 create() 只會執行一次。 update() 會一直被呼叫，成為一個無窮迴圈，直到遊戲結束。 在這個例子中，我們創建了一個文字，它慢慢地移動到畫布的右下角： let text function create() { text = this.add.text(100, 100, 'test') } function update() { text.x += 1 text.y += 1 } const game = new Phaser.Game({ width: 400, height: 400, scene: { create, update } }) 注意我在頂部添加了 let text，這樣我們可以在 create() 和 update() 中引用它。 在 update() 中，我修改了 x 和 y 屬性。您還可以修改其他屬性，例如可以修改 angle 以旋轉物體：...

這篇文章是 Phaser 系列的一部分。點擊這裡查看系列文章的第一篇。 在创建精靈後播放動畫： function preload() { this.load.sprite('dog', 'dog.png') } function create() { this.add.sprite(400, 200, 'dog') } 首先必須加載一個精靈表。 精靈表是包含在單個圖像中的不同精靈集合。 這裡使用一張圖像，告訴 Phaser 每個圖像的寬度和高度。在這個例子中是 20x20 像素： this.load.spritesheet('dog', 'dog.png', { frameWidth: 20, frameHeight: 20 }) 完成之後，可以使用 this.anims.create() 來生成一個動畫： this.anims.create({ key: 'animate_dog', frames: this.anims.generateFrameNames('dog'), frameRate: 20, repeat: -1 }) 在這裡我們指定使用精靈表的圖像，以每秒 20 幀的速度播放，並且永遠循環。 要開始播放動畫，必須調用以下代碼： this.ship1.play('ship1_anim') 這個動畫將始終循環播放。 還可以只執行一次動畫，並在動畫完成後隱藏精靈表，只要添加這些選項： repeat: 0, hideOnComplete: true 而不是遍歷精靈表中的所有圖像，還可以遍歷其中的一部分圖像： frames: this.anims.generateFrameNames('dog', { start: 0, end: 2 }) 這在擁有包含多個物件的大型精靈表時特別有用。

這篇文章是 Phaser 系列的一部分。點擊這裡查看系列的第一篇文章。 我們在之前的文章中學會了如何使用以下代碼添加圖像： function preload() { this.load.image('apple', 'apple.png') } function create() { this.add.image(200, 200, 'apple') } Phaser 中另一個重要的遊戲對象是 精靈。 function preload() { this.load.sprite('dog', 'dog.png') } function create() { this.add.sprite(400, 200, 'dog') } 精靈和圖像看起來很相似，但有一個非常大的區別：精靈可以進行 動畫。

本文是Phaser系列文章的一部分。點擊這裡查看該系列文章的第一篇。 與顯示圖像類似，要播放音頻文件，您必須預加載它並將其賦予一個標籤： function preload() { this.load.audio('sound', 'sound.mp3') } 對於圖像，我們使用了this.load.image()，這裡我們使用了this.load.audio()。 完成這一步後，我們可以將音頻用於我們的create()或update()函數中： this.sound.add('sound') 這將返回一個對象。重要的是將它賦值給一個變量： const sound = this.sound.add('sound') 因為稍後，當我們需要時，我們將在其上調用play()方法： sound.play() 例如，您可以將其與鼠標事件結合使用，當單擊或懸停在項目上時播放聲音。

本篇文章是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....

＃如何創建您的第一個PHP程序 在學習一門新的編程語言時，我們有一個傳統，那就是創建一個“Hello, World！”應用程序，打印出這些字符串。 確保MAMP正在運行，並按照上面的說明打開htdocs文件夾。 在代碼編輯器中打開index.php文件。 我推薦使用VS Code，它是一個非常簡單的代碼編輯器。有關介紹，請參閱https://flaviocopes.com/vscode/。 ！ 這是生成您在瀏覽器中看到的“Welcome to MAMP”頁面的代碼。 刪除所有內容，然後用以下代碼替換： <?php echo 'Hello World'; ?> 保存，刷新http://localhost:8888上的頁面，您應該會看到以下內容： ！ 太棒了！ 這就是您的第一個PHP程序。 讓我們解釋一下這裡發生了什麼。 我們有Apache HTTP服務器在本機（您的計算機）的端口8888上監聽。 當我們使用瀏覽器訪問http://localhost:8888時，我們正在進行一個HTTP請求，要求獲取路由/的內容，也就是基本URL。 Apache默認配置為提供該路由，並使用位於htdocs文件夾中的index.html文件。該文件不存在，但由於我們已經配置Apache與PHP一起工作，因此它會搜索index.php文件。 該文件存在，並且PHP代碼在Apache將頁面返回給瀏覽器之前在服務器端執行。 在PHP文件中，我們有一個<?php開始標籤，它表示“這裡開始一些PHP代碼”。 我們有一個結束標籤?>，它用於關閉PHP代碼片段，在其中我們使用echo指令將引號中的字符串打印到HTML中。 每個語句結尾都需要一個分號。 我們有這種開始/關閉結構，因為我們可以將PHP嵌入HTML中。 PHP是一種腳本語言，其目標是能夠在HTML頁面中“裝飾”動態數據。 请注意，使用現代PHP，我們通常避免將PHP與HTML混合在一起，而是將PHP用作“生成HTML的框架”，例如使用Laravel等工具。但在本書中，我們討論的是純PHP，所以從基礎知識開始是有意義的。 例如，以下代碼將使瀏覽器顯示相同的結果： Hello <?php echo 'World'; ?> 對於最終用戶來說，在瀏覽器中看到的情況下，對於幕後的代碼沒有任何區別。 雖然該頁面在技術上是一個HTML頁面，即使它不包含HTML標籤，只有一個“Hello World”字符串，但瀏覽器可以知道如何在窗口中顯示該字符串。

介紹pnpm，一個可以節省磁碟空間的npm替代方案 最近，我曾提到過我們有著巨大的node_modules文件夾，以及為什麼這並不一定是一個壞事，但是減少硬盤空間的佔用肯定是更好的，對吧？ 在硬盤上節省的每一個位元都可以用來存放除了函式庫代碼之外的其他東西，我在2010年購買的MacBook Pro上有一個512GB的SSD，但在2019年，一些全新的電腦只有一個128GB的SSD（當提到硬碟空間時，摩爾定律似乎出了一些問題）。 其中一種方式是將函式庫代碼存儲集中在一個地方，並與您所工作的所有項目共享。這就是pnpm的主要價值主張，您可以在https://pnpm.js.org查看這個很酷的項目。 它基本上是npm的插件，這意味著一旦您安裝了它，您可以調用pnpm install來下載項目依賴，並且所有的操作對您來說都是透明的。 如果您有10個使用相同版本的React的項目，pnpm只會安裝一次，然後在您的所有其他項目中引用那個第一次安裝的項目。 這也意味著，與使用標準的npm過程下載資源相比，項目初始化部分的時間明顯更短。即使使用npm緩存了包，pnpm也會在中央本地文件庫中建立一個硬連結，而npm會從緩存中複製一個包。 當然你可以使用npm工具安裝pnpm: npm install -g pnpm 因為pnpm是npm的替代方案，所以您可以使用所有npm命令： pnpm install react pnpm update react pnpm uninstall react 等等。 pnpm在那些需要維護大量帶有相同相依項目的公司中尤其受到重視。例如，Glitch就是這樣一家公司，他們托管著無數個Node.js項目。pnpm不僅為他們提供了普通的npm命令，還提供了一些工具，包括pnpm recursive，它用於在文件夾中運行相同的命令以處理所有項目。例如，您可以通過運行pnpm recursive install來初始化存儲在當前文件夾中的100個項目。非常方便。 如果您使用npx，這是執行類似create-react-app這樣的實用程式的便捷（並且被推薦）方法，您可以使用隨pnpm一起的pnpx命令來享受pnpm的好處： pnpx create-react-app my-cool-new-app 包裝安裝在哪裡？在macOS中，它們安裝在 ~/.pnpm-store/ 文件夾中（其中~代表您的用戶文件夾）。我安裝了lodash作為示例，這是結果的文件夾結構： ➜ ~ tree .pnpm-store/ .pnpm-store/ └── 2 ├── \_locks ├── registry.npmjs.org │ └── lodash │ ├── 4.17.11 │ │ ├── integrity.json │ │ ├── node\_modules │ │ │ └── lodash │ │ │ ├── ....

介紹一款幫助您編寫現代 CSS 的優秀工具：PostCSS。PostCSS 是一個非常流行的工具，允許開發者編寫 CSS 預處理器或後處理器。 簡介 為何如此受歡迎 安裝 PostCSS CLI 最受歡迎的 PostCSS 插件 Autoprefixer cssnext CSS Modules csslint cssnano 其他有用的插件 和 Sass 有何不同？ 簡介 PostCSS 是一個工具，允許開發者編寫 CSS 預處理器或後處理器，稱為插件。有許多插件提供了許多功能，有時候 “PostCSS” 這個詞代表的是工具本身，以及插件生態系統。 PostCSS 插件可以通過命令行運行，但通常是在構建時由任務運行程序調用的。 插件化的架構為您所需的所有與 CSS 相關的操作提供了一個共同的基礎。 注意：儘管叫做 PostCSS，它不僅僅是 CSS 後處理器，但它可以用於構建它們，以及其他東西 為何如此受歡迎 PostCSS 提供了幾個功能，可以深度改善您的 CSS，並與您選擇的任何構建工具良好集成。 安裝 PostCSS CLI 使用 Yarn： yarn global add postcss-cli 或者使用 npm： npm install -g postcss-cli 完成之後，postcss 命令將在您的命令行中可用。 例如，此命令將在 css/ 文件夾中包含的 CSS 文件上運行 autoprefixer 插件，並將結果保存在 main.css 文件中：...

一個關於PostgreSQL和MySQL的快速比較。 在這篇文章中，我希望對PostgreSQL和MySQL進行高層次的比較。 PostgreSQL的一個主要賣點是其授權。 PostgreSQL是開源的，擁有GPL許可證，由PostgreSQL全球開發團隊社區擁有。 如今MySQL由Oracle擁有，並且有2種不同的許可證。其中一個是開源許可證，另一個是商業許可證。這並不意味著如果您想將MySQL用於商業項目，您就需要支付費用。商業許可證提供有償支持和由Oracle建立的附加軟體，這是與MySQL的深度整合。 還有一個完全開源的MySQL分支，叫做MariaDB，它在使用和品牌方面要遜於MySQL，但如果您更喜歡MySQL，並且擔心授權問題，那麼MariaDB是一個很好的替代品。 讓我們來談談功能。 大致上，MySQL和PostgreSQL的功能集是相等的。其中一個可能會做到另一個無法做到的事情，但我們談論的是非常高級的功能，這裡我不深入介紹。 兩者都是非常先進的資料庫管理系統，有著悠久的歷史。 兩者都支援SQL標準（雖然不完全），並在此基礎上添加了一些功能。兩者都遵守ACID（Atomicity，Consistency，Isolation，Durability）準則。 兩者都可以輕鬆地創建複製，兩者都非常安全，兩者都有廣泛的社區，可以解決您可能遇到的任何問題。 兩者都擁有大量的工具支持。 那麼該選擇哪一個呢？很難說。 除非您需要一個在其中一個資料庫中已實現的特定功能，而在另一個中未實現，否則我建議您選擇您已經熟悉的那個。 例如，如果您熟悉MySQL，並且使用過WordPress，那麼您可以繼續使用它（或者MariaDB）。 可能還取決於您希望在哪個平台上部署您的軟體。例如Heroku提供了內置的管理型PostgreSQL雲資料庫服務，這可能比自己管理資料庫伺服器更方便。