超小白的 入门 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"
},

根目录下新建以下文件及文件夹

超小白的 入门 phaser_第1张图片

  1. 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'
    })
  ]
}
  1. tsconfig.json
{
  "compilerOptions": {
    "target": "ES5"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}
  1. .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
  1. 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>
  1. 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)

超小白的 入门 phaser_第2张图片

你可能感兴趣的:(Game)