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

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

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hbccc0ki0ib

原生ES6写的Web游戏:ES6-Mario,小美女,小帅哥快来玩啊~~的更多相关文章

  1. 原生canvas写的飞机游戏

    一个原生canvas写的飞机游戏,实用性不大,主要用于熟悉canvas的一些熟悉用法. 项目地址:https://github.com/BothEyes1993/canvas_game

  2. 使用Node.js原生API写一个web服务器

    Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...

  3. [原创]使用vscode+es6写nodejs服务端调试配置

    前端的小伙伴们在babel等的加持下,已经可以愉快的使用es6来写代码了. 然后对于服务端的nodejs就有点坑爹了,虽然原生支持了es6,但是只是部分支持,一些不支持的特性(比如module)使用了 ...

  4. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  5. 如何构建一个多人(.io) Web 游戏,第 1 部分

    原文:How to Build a Multiplayer (.io) Web Game, Part 1 GitHub: https://github.com/vzhou842/example-.io ...

  6. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  7. 每周荐书:云原生、Docker、Web算法(评论送书)

    每周荐书:云原生.Docker.Web算法(评论送书) 感谢大家对每周荐书栏目的支持,先公布下上周中奖名单 名优秀评论可以免费获得此书.   云原生应用架构实践 云原生架构,关注简化开发流程.提升研发 ...

  8. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

  9. 20 个使用原生 JavaScript 实现的 Web 项目

    20 个使用原生 JavaScript 实现的 Web 项目 20 vanilla JavaScript Web Projects https://github.com/learning-js-by- ...

随机推荐

  1. Go代码规范梳理

    Go代码规范(Code Review) 总结几个开发过程中经常会犯的代码规范错误 参考链接:https://learnku.com/go/wikis/48375 注释语句 // Request 表示运 ...

  2. js数组用法

    去面试的时候问到我一个问题,你能说出来多少种数组的方法跟用法,我当时只说出来十一个,回来以后才想起来还有很多种,现在整理一下,没有排名,想起那个写那个 1:forEach 从头遍历数组,没有返回值,有 ...

  3. 彩色建模(四色原型) Object Modeling in Color学习心得

    定义4种类的原型,在UML中用不同颜色表示不同原型的对象     1. Party, Place, Thing Party: 事件的参与方,例如某人人.某组织等 Place: 事件的发生地,例如仓库. ...

  4. tensorflow源码解析之common_runtime拾遗

    把common_runtime中剩余的内容,按照文件名排序进行了简单的解析,时间原因写的很仓促,算是占个坑,后续有了新的理解再来补充. allocator_retry 有时候内存分配不可能一次完成,为 ...

  5. MySQL 查询处理

    当腰删除或者更新数据时,首先要雪薰出这些记录,然后再对其进行相应的 操作. 每一个操作都会产生一个虚拟表,该虚拟表作为处理的输入,这些虚拟表对用户的透明的,只有最后一步生成的虚拟表才会返回给用户.

  6. Mybatis结果集ResultMap映射

    基本使用: 解决属性名和数据库字段名不一致的问题 <resultMap id="user" type="com.guan.bean.UserBean"&g ...

  7. Kubernetes 使用kubeadm创建集群

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 实践环境 CentOS-7-x86_64-DVD-1810 Docker 19.03.9 Kubernetes version: v1.20.5 ...

  8. maltego的基本使用

    首次使用maltego需要注册 注册网站:https://www.paterva.com/web7/buy/maltego-clients/maltego-ce.php 填写好点注册就行了 1. 打开 ...

  9. Android 12(S) 图形显示系统 - 简单聊聊 SurfaceView 与 BufferQueue的关联(十三)

    必读: Android 12(S) 图形显示系统 - 开篇 一.前言 前面的文章中,讲解的内容基本都是从我们提供的一个 native demo Android 12(S) 图形显示系统 - 示例应用( ...

  10. GitHub如何选择合适的license(许可证)

    license译为许可证,也可作为开源协议,它可以将自己创作的东西,授权给他人使用,并约定了使用者可以有的权利和必须遵从的义务.现在很多优秀的开源项目都有设置license,不同的license所约束 ...