原生ES6寫的Web遊戲：ES6-Mario，小美女，小帥哥快來玩啊~~

? ES6-Mario

這是一個用原生ES6語法和HTML5新特性寫成的Web 遊戲。

經過這個項目，你能夠在實踐中對ES6的主要內容、HTML Canvas 相關API以及Webpack的基礎配置有一個直觀的認識。

主體結構學習自 Meth Meth Method On Youtube @Meth Meth Method.

很是感謝原做者 @pomler，從他那裏學到了不少人生經驗。

項目地址：GitHub: es6-mario

兼容性

• 較新版的Chrome 和 Firefox
• iOS 9.3.2+ Safari
• Android 7.0+
• NO IE

Demo

在線 Demo

在線試玩 es6-mario

掃碼試玩：

Gif Demo

運行

git clone https://github.com/JuniorTour/es6-mario

cd es6-mario

npm install        // 國內推薦cnpm，速度更快

npm run dev     // 在 http://localhost:8080 啓動開發服務器

npm run build   // 打包編譯源代碼至 ./public/dist

npm run prod    // 打包編譯源代碼至 ./public/dist 而且 在 http://localhost:666 啓動生產環境服務器

經驗總結

1. 常常整理代碼

能夠經過藉助module語法分離聲明和實現，構建類等來實現。

(More.........)

關鍵點總結記錄

1. Es6 語法

• <1> Module

<script type="module" src="/js/main.js"></script>

import {loadLevel} from './loader.js'
import {loadBackgroundSprites, loadMarioSprite} from './sprites.js'

• <2> Super Class - 超類

  (More.........)

ToDo-List

No.	Content	Finish Date	Extra
0	基礎結構	2018/2/14	春節前日
1	打包工具	2018/3/1	爲了實現更好的兼容性和性能。
2	移動端兼容	2018/3/4	爲了支持目前互聯網的主流。
3	原版地圖和遊戲內容	2018/3/1
4	性能優化		嘗試讓低端設備（iPhone se,...）也能以較爲流暢的幀數運行
5	遊戲體驗相關優化	......	讓遊戲更有趣！
6	Webpack 環境配置	......

文件結構

|__ public                          主文件夾
  |__ index.html
  |__ assets
      |__ img
        |__ characters.gif
        |__ font.png
        |__ tiles.png
      |__ levels                    關卡內容配置
        |__ 1-1.json
      |__ sound
        |__ overworld-bgm.mp3
      |__ sprites                   角色精靈（雪碧圖）配置
        |__ goomba.json
        |__ koopa.json
        |__ mario.json
        |__ overworld.json
        |__ underworld.json
  |__ build
    |__ prod-server.js          生產環境服務器
    |__ webpack.config.js     webpack配置文件
  |__ css
    |__ ......
  |__ js
    |__ entities
      |__ Goomba.js
      |__ Koopa.js
      |__ Mario.js
    |__ input                       鍵盤及觸控操做輸入控制
      |__ ......
    |__ layers
      |__ background.js
      |__ camera.js
      |__ collision.js
      |__ dashboard.js
      |__ sprites.js
    |__ loaders
      |__ font.js
      |__ level.js
    |__ polyfill                    兼容性墊片
      |__ ......
    |__ traits                      遊戲內角色特性
      |__ Go.js
      |__ Jump.js
      |__ Killable.js
      |__ PendulumMove.js
      |__ Physics.js
      |__ PlayerController.js
      |__ Solid.js
      |__ Stomer.js
      |__ Velocity.js
    |__ anim.js
    |__ BoundingBox.js
    |__ Camera.js
    |__ compositor.js
    |__ debug.js
    |__ entities.js
    |__ Entity.js
    |__ EntityCollider.js
    |__ input.js
    |__ KeyboardState.js
    |__ main.js
    |__ math.js
    |__ sprites.js
    |__ SpriteSheet.js
    |__ TileCollider.js
    |__ TileResolver.js
    |__ Timer.js
    |__ Level.js
    |__ loader.js
  |__ notes
    |__ ......
|__ .babelrc
|__ .gitignore
|__ package.json
|__ README.md

結語

這個項目還在開發之中，仍有許多不足之處，請原諒我火燒眉毛地分（pian）享（zan），我會盡快修復這些問題，也很歡迎你來幫助我。

很是渴望聽到你的意見！歡迎經過各類方式聯繫我：

My GitHub: @JuniorTour.

My Email: juniortour@qq.com.

歡迎給我點個贊⭐️GitHub: es6-mario