超小白的入门 phaser

电玩女神 2022-11-25 00:41 218阅读 0赞

#### `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"
    },

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

![在这里插入图片描述][20200806195145844.png_pic_center]

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)

![在这里插入图片描述][20200806195623725.gif_pic_center]

[20200806195145844.png_pic_center]: /images/20221124/00fd9bdeccec47889d36641907cf5d94.png
[20200806195623725.gif_pic_center]: /images/20221124/d317b0af60484db8962af793bc2e9291.png