摘要:這是一個用原生語法和新特性寫成的游戲。通過這個項目,你可以在實踐中對的主要內(nèi)容相關(guān)以及的基礎(chǔ)配置有一個直觀的認(rèn)識。主體結(jié)構(gòu)學(xué)習(xí)自非常感謝原作者,從他那里學(xué)到了很多人生經(jīng)驗。移動端兼容為了支持目前互聯(lián)網(wǎng)的主流。
? ES6-Mario
這是一個用原生ES6語法和HTML5新特性寫成的Web 游戲。
通過這個項目,你可以在實踐中對ES6的主要內(nèi)容、HTML Canvas 相關(guān)API以及Webpack的基礎(chǔ)配置有一個直觀的認(rèn)識。
主體結(jié)構(gòu)學(xué)習(xí)自 Meth Meth Method On Youtube @Meth Meth Method.
非常感謝原作者 @pomler,從他那里學(xué)到了很多人生經(jīng)驗。
項目地址: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 // 國內(nèi)推薦cnpm,速度更快 npm run dev // 在 http://localhost:8080 啟動開發(fā)服務(wù)器 npm run build // 打包編譯源代碼至 ./public/dist npm run prod // 打包編譯源代碼至 ./public/dist 并且 在 http://localhost:666 啟動生產(chǎn)環(huán)境服務(wù)器經(jīng)驗總結(jié)
經(jīng)常整理代碼
可以通過借助module語法分離聲明和實現(xiàn),構(gòu)建類等來實現(xiàn)。
(More.........)
關(guān)鍵點總結(jié)記錄Es6 語法
<1> Module
import {loadLevel} from "./loader.js" import {loadBackgroundSprites, loadMarioSprite} from "./sprites.js"
<2> Super Class - 超類
(More.........)
ToDo-ListNo. | Content | Finish Date | Extra |
---|---|---|---|
0 | 基礎(chǔ)結(jié)構(gòu) | 2018/2/14 | 春節(jié)前日 |
1 | 打包工具 | 2018/3/1 | 為了實現(xiàn)更好的兼容性和性能。 |
2 | 移動端兼容 | 2018/3/4 | 為了支持目前互聯(lián)網(wǎng)的主流。 |
3 | 原版地圖和游戲內(nèi)容 | 2018/3/1 | |
4 | 性能優(yōu)化 | 嘗試讓低端設(shè)備(iPhone se,...)也能以較為流暢的幀數(shù)運行 | |
5 | 游戲體驗相關(guān)優(yōu)化 | ...... | 讓游戲更有趣! |
6 | Webpack 環(huán)境配置 | ...... |
|__ public 主文件夾 |__ index.html |__ assets |__ img |__ characters.gif |__ font.png |__ tiles.png |__ levels 關(guān)卡內(nèi)容配置 |__ 1-1.json |__ sound |__ overworld-bgm.mp3 |__ sprites 角色精靈(雪碧圖)配置 |__ goomba.json |__ koopa.json |__ mario.json |__ overworld.json |__ underworld.json |__ build |__ prod-server.js 生產(chǎn)環(huán)境服務(wù)器 |__ 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 游戲內(nèi)角色特性 |__ 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結(jié)語
這個項目還在開發(fā)之中,仍有許多不足之處,請原諒我迫不及待地分(pian)享(zan),我會盡快修復(fù)這些問題,也很歡迎你來幫助我。
非常渴望聽到你的意見!歡迎通過各種方式聯(lián)系我:
My GitHub: @JuniorTour.
My Email: juniortour@qq.com.
歡迎給我點個贊??GitHub: es6-mario
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/93202.html
摘要:時間永遠都過得那么快,一晃從年注冊,到現(xiàn)在已經(jīng)過去了年那些被我藏在收藏夾吃灰的文章,已經(jīng)太多了,是時候把他們整理一下了。那是因為收藏夾太亂,橡皮擦給設(shè)置私密了,不收拾不好看呀。 ...
摘要:什么是是一個利用語法在命令行下工作的文件傳輸工具,年首次發(fā)行。它支持文件上傳和下載,所以是綜合傳輸工具,但按傳統(tǒng),習(xí)慣稱為下載工具。支持的通信協(xié)議有和。今天就這樣我要去篩選一下我下載的那些照片了 今天在看 增長刺客 的時候,看到一款推廣方案上是通過curl命令下載圖片之后應(yīng)用到自己的網(wǎng)站上,頓時感覺很有趣,于是自己也試了一試,最后,我的電腦上就多了4000張圖片。我給大家展示幾張吧(都...
摘要:什么是是一個利用語法在命令行下工作的文件傳輸工具,年首次發(fā)行。它支持文件上傳和下載,所以是綜合傳輸工具,但按傳統(tǒng),習(xí)慣稱為下載工具。支持的通信協(xié)議有和。今天就這樣我要去篩選一下我下載的那些照片了 今天在看 增長刺客 的時候,看到一款推廣方案上是通過curl命令下載圖片之后應(yīng)用到自己的網(wǎng)站上,頓時感覺很有趣,于是自己也試了一試,最后,我的電腦上就多了4000張圖片。我給大家展示幾張吧(都...
閱讀 1317·2021-11-11 10:57
閱讀 3737·2021-09-07 10:10
閱讀 3454·2021-08-03 14:03
閱讀 3081·2019-08-30 13:45
閱讀 695·2019-08-29 11:19
閱讀 1050·2019-08-28 18:07
閱讀 3111·2019-08-26 13:55
閱讀 821·2019-08-26 12:17