Starter Template: Phaser + Vue + Pinia + Vite for HTML5 GamesThis is a starter template for creating HTML5 games.

This is a starter template for creating HTML5 games. Optimized for PC and platforms like itch.io. Supports fullscreen mode.

Github: https://github.com/pavel-alpinweb/phaser-vue-start-template

Tech Stack:

• Phaser – used for game logic and graphics rendering
• Vue – used for building user interfaces
• Pinia – used for managing game state
• Vite – used for project bundling and development

Authors:

• Pavel Bezdornov
• Mark Bezdornov

Art is sourced from open resources.
Character design and animation by Pavel Bezdornov.

Built-in Game Mechanics:

• Top-down movement (WASD)
• Platformer movement (WAD)
• Level transitions powered by Vue Router
• Health gain and loss system

Installation and Build:

• Requires Node.js version 20+
• Install dependencies: npm i
• Start development server: npm run dev
• Build the project: npm run build
• Serve the built project: npm serve dist
  (This allows running the template on a regular hosting or platforms like itch.io)

Project Structure:

• composition – contains files for game logic using the Phaser engine
• configs – contains constants for engine settings, game logic, and event names
• scenes – contains files for managing Phaser scenes (Phaser.Scene)
• screens – contains Vue components responsible for rendering game screens
• store – contains files for working with Pinia
• ui-components – contains Vue components for rendering the HUD
• utils – contains helper functions
• public/assets – contains all assets