资讯专栏INFORMATION COLUMN

原生ES6写的Web游戏:ES6-Mario,小美女,小帅哥快来玩啊~~

yeyan1996 / 797人阅读

摘要:这是一个用原生语法和新特性写成的游戏。通过这个项目,你可以在实践中对的主要内容相关以及的基础配置有一个直观的认识。主体结构学习自非常感谢原作者,从他那里学到了很多人生经验。移动端兼容为了支持目前互联网的主流。

? 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-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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93202.html

相关文章

  • 首次公开,整理12年积累的博客收藏夹,零距离展示《收藏夹吃灰》系列博客

    摘要:时间永远都过得那么快,一晃从年注册,到现在已经过去了年那些被我藏在收藏夹吃灰的文章,已经太多了,是时候把他们整理一下了。那是因为收藏夹太乱,橡皮擦给设置私密了,不收拾不好看呀。 ...

    Harriet666 评论0 收藏0
  • 就这样,我把4000张美女帅哥照片下载本地了

    摘要:什么是是一个利用语法在命令行下工作的文件传输工具,年首次发行。它支持文件上传和下载,所以是综合传输工具,但按传统,习惯称为下载工具。支持的通信协议有和。今天就这样我要去筛选一下我下载的那些照片了 今天在看 增长刺客 的时候,看到一款推广方案上是通过curl命令下载图片之后应用到自己的网站上,顿时感觉很有趣,于是自己也试了一试,最后,我的电脑上就多了4000张图片。我给大家展示几张吧(都...

    lanffy 评论0 收藏0
  • 就这样,我把4000张美女帅哥照片下载本地了

    摘要:什么是是一个利用语法在命令行下工作的文件传输工具,年首次发行。它支持文件上传和下载,所以是综合传输工具,但按传统,习惯称为下载工具。支持的通信协议有和。今天就这样我要去筛选一下我下载的那些照片了 今天在看 增长刺客 的时候,看到一款推广方案上是通过curl命令下载图片之后应用到自己的网站上,顿时感觉很有趣,于是自己也试了一试,最后,我的电脑上就多了4000张图片。我给大家展示几张吧(都...

    ddongjian0000 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<