本文共 2167 字，大约阅读时间需要 7 分钟。
安装必要的依赖：
在项目根目录执行 npm init -y
安装以下依赖：
"@babel/core": "^7.11.1", "@babel/preset-env": "^7.11.0", "@babel/preset-typescript": "^7.10.4", "babel-loader": "^8.1.0", "html-webpack-plugin": "^4.3.0", "phaser": "^3.24.1", "webpack": "^5.0.0-beta.24", "webpack-cli": "^3.3.12"
修改 package.json 中的 scripts：
"dev": "webpack --mode development"
创建必要文件：
webpack.config.js
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: { app: './src/web/index.ts' }, module: { rules: [ { test: /\.ts$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader' } } ] }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/web/index.html' }) ] }tsconfig.json
{ "compilerOptions": { "target": "ES5" }, "include": ["src"], "exclude": ["node_modules"] }.babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-typescript"] }创建 src/web 文件夹内的文件：
src/web/index.html
h5 game
src/web/index.ts
import { AUTO, Game, Scene } from 'phaser'; class Demo extends Scene { constructor() { super("demo"); } public preload() { this.load.setBaseURL("http://labs.phaser.io"); this.load.image("sky", "assets/skies/space"); this.load.image("red", "assets/skies/space"); this.load.image("logo", "assets/skies/space"); } public create() { this.add.image(400, 300, "sky"); const particles = this.add.particles("red"); const emitter = particles.createEmitter({ speed: 100, scale: { start: 1, end: 0 }, blendMode: "ADD" }); const logo = this.physics.add.image(400, 100, "logo"); logo.setVelocity(100, 200); logo.setBounce(1, 1); logo.setCollideWorldBounds(true); emitter.startFollow(logo); } } const config: Phaser.Types.Core.GameConfig = { type: AUTO, width: 800, height: 600, parent: "main", physics: { default: "arcade", arcade: { gravity: { y: 200 } } } }; const game = new Game(config);转载地址：http://lafmz.baihongyu.com/