GithubHelp home page GithubHelp logo

Phaser 3 Webpack Project Template

A Phaser 3 project template with ES6 support via Babel 7 and Webpack 4 that includes hot-reloading for development and production-ready builds.

Loading images via JavaScript module import is also supported.

Requirements

Node.js is required to install dependencies and run scripts via npm.

Available Commands

Command Description
npm install Install project dependencies
npm start Build project and open web server running project
npm run build Builds code bundle with production settings (minification, uglification, etc..)

Writing Code

After cloning the repo, run npm install from your project directory. Then, you can start the local development server by running npm start.

After starting the development server with npm start, you can edit any files in the src folder and webpack will automatically recompile and reload your server (available at http://localhost:8080 by default).

Customizing Template

Babel

You can write modern ES6+ JavaScript and Babel will transpile it to a version of JavaScript that you want your project to support. The targeted browsers are set in the .babelrc file and the default currently targets all browsers with total usage over "0.25%" but excludes IE11 and Opera Mini.

"browsers": [
  ">0.25%",
  "not ie 11",
  "not op_mini all"
]

Webpack

If you want to customize your build, such as adding a new webpack loader or plugin (i.e. for loading CSS or fonts), you can modify the webpack/base.js file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of `package.json'.

Deploying Code

After you run the npm run build command, your code will be built into a single bundle located at dist/bundle.min.js along with any other assets you project depended.

If you put the contents of the dist folder in a publicly-accessible location (say something like http://mycoolserver.com), you should be able to open http://mycoolserver.com/index.html and play your game.

Kate Sandler's Projects

js-digital-clock icon js-digital-clock

Project: Create a clock that runs in the browser using JavaScript and jQuery

js-testing icon js-testing

A resource used in teaching vanilla JavaScript testing using Jest

linked-list icon linked-list

A singly linked list with each node containing integer data. Methods on the singly linked list

lizard-maze icon lizard-maze

A maze algorithm library (TypeScript) wrapped in a game (JavaScript) that you play by in your browser (HTML5).

nes.css icon nes.css

NES-style CSS Framework | ファミコン風CSSフレームワーク

oo-ride-share icon oo-ride-share

Project: Ride Share App practicing Object-Oriented Programming patterns and testing

portmanteau-generator icon portmanteau-generator

Project: Create the code for a simplified portmanteau generator, practicing iteration, conditional logic, methods

react-chatlog icon react-chatlog

Basic React project for displaying a chat log from static data

react-timeline icon react-timeline

Basic React project for displaying a social media timeline from static data

reactmazes icon reactmazes

A repo for a maze game in React. Maze generators are my favorite programs so I like to code them whenever I need to brush up on a skill. This is me practicing React programming after a bit of time away from the front-end.

restricted-arrays-part1 icon restricted-arrays-part1

Assignment to work with array data structure or restricted arrays (as compared to Ruby Array class).

ride-share icon ride-share

Exercise: Practice working with nested arrays, nested hashes, and performing data transformations

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.