超小白的 入门 phaser
npm init -y
安装如下的依赖
"dependencies": {
"@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"
}
修改 script 命令
"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"]
}
- web / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h5 game</title>
</head>
<body>
<div id="main"></div>
</body>
</html>
- 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
}
}
},
scene: Demo
}
const game = new Game(config)
