摘要:这是一个用原生语法和新特性写成的游戏。通过这个项目,你可以在实践中对的主要内容相关以及的基础配置有一个直观的认识。主体结构学习自非常感谢原作者,从他那里学到了很多人生经验。移动端兼容为了支持目前互联网的主流。
? 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 启动生产环境服务器经验总结
经常整理代码
可以通过借助module语法分离声明和实现,构建类等来实现。
(More.........)
关键点总结记录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 | 基础结构 | 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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93202.html
摘要:时间永远都过得那么快,一晃从年注册,到现在已经过去了年那些被我藏在收藏夹吃灰的文章,已经太多了,是时候把他们整理一下了。那是因为收藏夹太乱,橡皮擦给设置私密了,不收拾不好看呀。 ...
摘要:什么是是一个利用语法在命令行下工作的文件传输工具,年首次发行。它支持文件上传和下载,所以是综合传输工具,但按传统,习惯称为下载工具。支持的通信协议有和。今天就这样我要去筛选一下我下载的那些照片了 今天在看 增长刺客 的时候,看到一款推广方案上是通过curl命令下载图片之后应用到自己的网站上,顿时感觉很有趣,于是自己也试了一试,最后,我的电脑上就多了4000张图片。我给大家展示几张吧(都...
摘要:什么是是一个利用语法在命令行下工作的文件传输工具,年首次发行。它支持文件上传和下载,所以是综合传输工具,但按传统,习惯称为下载工具。支持的通信协议有和。今天就这样我要去筛选一下我下载的那些照片了 今天在看 增长刺客 的时候,看到一款推广方案上是通过curl命令下载图片之后应用到自己的网站上,顿时感觉很有趣,于是自己也试了一试,最后,我的电脑上就多了4000张图片。我给大家展示几张吧(都...
阅读 1268·2021-11-11 10:57
阅读 3690·2021-09-07 10:10
阅读 3429·2021-08-03 14:03
阅读 3046·2019-08-30 13:45
阅读 659·2019-08-29 11:19
阅读 1020·2019-08-28 18:07
阅读 3066·2019-08-26 13:55
阅读 774·2019-08-26 12:17