如何用Phaser 3制作简易复古接物游戏（入门篇）@慕课网原创_慕课网

欢迎，各位想成为游戏开发者的朋友！🚀 在这份面向初学者的指南中，我们将使用 Phaser 3 ，一个强大的 JavaScript 游戏开发框架，来制作一个简单的复古风格的 "Catch the Items" 游戏。本系列教程专为完全初学者设计，所以即使你是编程或 Phaser 的新手，也无需担心，你已经在正确的道路上了。

提示：如果你更喜欢视频教程，这里有呢。

此处省略内容

项目设置与基础入门教程 1

首先，让我们搭建环境，介绍重要的JavaScript概念，并创建我们的第一个Phaser场景。

注意： 在许多教程中，我们使用 Node/Vite 来搭建游戏。但我想尽可能保持简单。你可以通过安装 NPM 包 serve 或者直接在 Chrome 中打开文件来运行这个。

1. Phaser 3 是什么？

Phaser 3 是一个流行的 2D游戏开发框架，它用于使用 JavaScript 开发浏览器游戏。它简单易学，灵活且功能强大——非常适合制作这种复古风格的游戏！

—— *
(此处为空白)

2. 配置你的开发环境设置

为了简单起见，我们将通过其CDN网址来使用Phaser。以下就是设置：

创建项目文件夹：

在你的电脑上新建一个文件夹，例如 catch-game，然后在该文件夹内创建一个名为 index.html 的文件。
1. 添加基本的 HTML 架构：
  请将以下代码复制到你的 index.html 文件中：

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>游戏示例</title>
        <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
    </head>
    <body>
        <script>
            // Phaser 游戏设置
            const config = {
                type: Phaser.AUTO, // 自动选择 WebGL 或 Canvas
                width: 800,        // 宽度
                height: 600,       // 高度
                scene: {
                    preload: preload,
                    create: create,
                    update: update
                }
            };

            const game = new Phaser.Game(config);

            function preload() {
                // 预加载资源（目前没有）
            }

            function create() {
                // 在这里添加游戏元素
                this.add.text(300, 250, '你好，Phaser!', { fontSize: '32px', fill: '#fff' });
            }

            function update() {
                // 游戏更新循环（目前为空）
            }
        </script>
    </body>
    </html>

全屏显示退出全屏

开始玩你的游戏：

在任何你选择的浏览器（建议使用Chrome浏览器）中打开 index.html 文件。
你可以看到一个简单的画布区，上面写着 "Hello, Phaser!"。

🎉 恭喜！你已经成功设置了Phaser并显示了你的第一个场景！

3. Phaser 中的基础 JavaScript

在更深入探讨之前，我们快速回顾一下一些关于JavaScript的基本概念：

变量：用来存储数据。

let 玩家名称 = 'PhaserHero';

全屏按钮退出全屏

函数：可以重复使用的代码段。

       function greetPlayer() {
           console.log('欢迎来到我们的游戏！');
       }
       greetPlayer();

进入全屏模式，退出全屏

对象是：一组属性和方法。

       let player = {
           name: 'Hero',
           score: 0,
           jump: function() {
               console.log('玩家跳起来了！');
           }
       };
       player.jump();

全屏查看退出全屏

在开发 Phaser 游戏时，你会用到这些概念。

4. 创建一个最简的 Phaser 场景

将 create 函数修改为展示一个基本的游戏画布和一些游戏说明文字：

    function create() {
        this.add.text(300, 250, '接住物品!', { fontSize: '32px', fill: '#fff' });
        this.add.rectangle(400, 300, 50, 50, 0xff0000); // 一个红色的方块
    }

全屏/退出全屏

刷新浏览器——你应该会看到屏幕中央有一个红色的方块。

注：这是一张示例图片，具体描述为“图片描述”。

create() 函数是什么意思？

Phaser 使用三个核心函数来管理游戏的生命周期：preload、创建和更新。

我们来拆解一下每个函数。

preload() ：此函数在游戏启动前被调用。这里你可以加载游戏资源，如图片、声音等资源。
create() ：此函数在资源加载完毕后被调用。这里你可以创建游戏对象、设置游戏场景，并定义初始游戏设置等。
update() ：此函数在游戏循环中不断被调用。这里你可以更新游戏状态、处理玩家输入并使游戏世界发生变化。

我们在本教程以及接下来的教程中制作游戏时，会频繁使用这些函数。

📝 总结：你已经建立了一个Phaser游戏，学习了一些JavaScript的基础知识，并在画布上展示了简单的形状。很棒的开始！，现在让我们继续这篇文章的第二部分

源代码链接
 可玩版本（试玩）链接