https://github.com/jugshaurya/mario

https://github.com/jugshaurya/mario

babel es6 phaser3 vanilla-javascript webpack

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/jugshaurya/mario
• Owner: jugshaurya
• Created: 2019-08-10T05:45:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T10:30:28.000Z (about 2 years ago)
• Last Synced: 2024-10-31T16:08:22.448Z (2 months ago)
• Topics: babel, es6, phaser3, vanilla-javascript, webpack
• Language: JavaScript
• Size: 22.8 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# :octocat: mario Bros Lvl 1

   

## Resources

https://www.valentinog.com/blog/webpack/

What Is Webpack? - Module Builder

What Is Babel? Transpiler

Webpack takes all of your various project files, creates static assets, and Babel then transpiles those files for the vast majority of browsers to read.

## Setup

Webpack4

babel7 means for evry dependies there is a @ in front @babel/

npm init

npm install webpack webpack-cli webpack-dev-server --save-dev

npm install @babel/cli @babel/core @babel/node @babel/preset-env @babel/register --save-dev

JS/JSX & CSS Loaders and plugin:

---

npm install babel-loader html-loader style-loader css-loader html-webpack-plugin mini-css-extract-plugin --save-dev

## plugin

## add a .babelrc file with code:

{

"presets": [

"@babel/preset-env",

]

}

add a file named webpack.config.js and see code in that file

add scripts in package.json

"scripts": {

"start": "webpack-dev-server --mode development --open",

"dev": "webpack --mode development",

"build": "webpack --mode production"

},

## Added copy-webpack-plugin for assets

Bootscenes

GameScene

Made level with tiled app in JSON format with tile-gutter from internet

## Adding Mario

## ADDing level

```

	function preload(){

		this.load.image('gameTiles', 'tiles_spritesheet.png');

		this.load.tilemapTiledJSON('level1', 'map.json');

	}

	function create(){

		this.map = this.add.tilemap('level1');

		var tileset = this.map.addTilesetImage('tiles_spritesheet','gameTiles');

		this.backgroundLayer = this.map.createLayer('backgroundLayer', tileset);

}

```

## Run it

```

npm start

```