Thiết lập dự án xây dựng trò chơi JavaScript với Phaser

Thiết lập một dự án hiện đại và bắt đầu xây dựng một trò chơi JavaScript HTML5 bằng cách sử dụng Phaser 3

Trong hướng dẫn này, tôi muốn trình bày chi tiết cách thiết lập tối ưu để bắt đầu xây dựng trò chơi bằng cách sử dụngPhaser 3.

Hãy cài đặtphasertrong một thư mục bằng cách sử dụngnpm:

npm init -y
npm install phaser

Bây giờ chúng ta hãy thiết lậpBưu kiệnđể gói trò chơi của chúng tôi:

npm install -g parcel-bundler

Now create a game.js file with this content:

import Phaser from 'phaser'

new Phaser.Game()

Now run

parcel watch game.js

and Parcel will build our JavaScript in the dist/game.js file.

Now create an index.html file with this content:

<!DOCTYPE html>
<html>
  <head>
    <script src="./dist/game.js"></script>
  </head>
</html>

Install browser-sync to run an HTTP server with the content of this folder:

npm install -g browser-sync

then run

browser-sync start --server --files "."

The above command watches all files in the current folder (and all subfolders) for changes, and launches a web server on port 3000, automatically opening a browser window to connect to the server.

Any time you change a file, the browser will refresh.

This will be very useful while we prototype our games.

You should now see a blank screen in your browser, because we initialize Phaser:

import Phaser from 'phaser'

new Phaser.Game()

but nothing else happens.

Black screen

Copy this code in game.js:

import Phaser from 'phaser'

function preload() { this.load.setBaseURL(http://labs.phaser.io) this.load.image(‘sky’, ‘assets/skies/space3.png’) this.load.image(‘logo’, ‘assets/sprites/phaser3-logo.png’) this.load.image(‘red’, ‘assets/particles/red.png’) }

function 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 = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: ‘arcade’, arcade: { gravity: { y: 200 }, }, }, scene: { preload: preload, create: create, }, }

const game = new Phaser.Game(config)

and you should quickly see the Phaser demo app running in your browser:

The demo working