原生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 启动生产环境服务器
经验总结
- 经常整理代码
可以通过借助module语法分离声明和实现
,构建类
等来实现。
关键点总结记录
- 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 - 超类
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,小美女,小帅哥快来玩啊~~的更多相关文章
- 原生canvas写的飞机游戏
一个原生canvas写的飞机游戏,实用性不大,主要用于熟悉canvas的一些熟悉用法. 项目地址:https://github.com/BothEyes1993/canvas_game
- 使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
- [原创]使用vscode+es6写nodejs服务端调试配置
前端的小伙伴们在babel等的加持下,已经可以愉快的使用es6来写代码了. 然后对于服务端的nodejs就有点坑爹了,虽然原生支持了es6,但是只是部分支持,一些不支持的特性(比如module)使用了 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 如何构建一个多人(.io) Web 游戏,第 1 部分
原文:How to Build a Multiplayer (.io) Web Game, Part 1 GitHub: https://github.com/vzhou842/example-.io ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 每周荐书:云原生、Docker、Web算法(评论送书)
每周荐书:云原生.Docker.Web算法(评论送书) 感谢大家对每周荐书栏目的支持,先公布下上周中奖名单 名优秀评论可以免费获得此书. 云原生应用架构实践 云原生架构,关注简化开发流程.提升研发 ...
- 原生JS写的ajax函数
参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...
- 20 个使用原生 JavaScript 实现的 Web 项目
20 个使用原生 JavaScript 实现的 Web 项目 20 vanilla JavaScript Web Projects https://github.com/learning-js-by- ...
随机推荐
- 矩池云上cifar10使用说明
矩池云将 keras 预训练模型保存目录为 /public/keras_pretrained_model/ 使用方法: 先执行命令,创建目录 mkdir -p ~/.keras/models/ 然后将 ...
- ElasticSearch集成SpringBoot与常见使用方法
目录 一.导包 二.核对导入的ES版本 修改导入版本 三.写配置类 四.开始测试 索引操作 1.创建索引 2.查看索引是否存在 3.删除索引 文档操作 1.添加文档 2.查看文档是否存在 3.修改文档 ...
- think php 框架下拉分页
//以对象的形式获取数据库$data变量的信息,将lastPage()传输至页面 $lastpage = $data->lastPage(); $this->assign('lastpag ...
- php 23种设计模型 - 桥接模式
桥接模式(Bridge) 桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦. 这种模式涉 ...
- 怎么做好企业IT运维工作
维的工作层次来分,又分为硬件运维.桌面运维.系统运维.数据库运维和应用运维.他们运维的设备,小的从个人电脑,大的到数以亿计的高精尖计算设备(比如 大型机 ). 根据公司 IT 系统规模的不同,运维团队 ...
- C#处理医学影像(三):基于漫水边界自动选取病灶范围的实现思路
开发背景: 医生在实际使用PACS软件观察病灶时,经常会测量不规则病灶的周长和面积,使用画笔工具勾勒比较耗时且准度欠佳, 或者在标记人工智能训练样本时少则几百张,多则几千张,为极大减少耗时和极大提高工 ...
- C++ 接口的实现方式
一.接口的定义 有时候,我们得提供一些接口给别人使用.接口的作用,就是提供一个与其他系统交互的方法.其他系统无需了解你内部细节,并且也无法了解内部细节,只能通过你提供 给外部的接口来与你进行通信.根据 ...
- SpringBoot巧用 @Async 提升API接口并发能力
异步调用几乎是处理高并发Web应用性能问题的万金油,那么什么是"异步调用"? "异步调用"对应的是"同步调用",同步调用指程序按照定义顺序依 ...
- Docker——网络
docker0 查看主机的ip [root@iZwz908j8pbqd86doyrez5Z test]# ip addr #本机回环地址 1: lo: <LOOPBACK,UP,LOWER_UP ...
- python写一个数字字典生成器
#数字字典生成器 by qianxiao996 #博客地址:https://blog.csdn.net/qq_36374896 #此程序输入开始结束和位数即可在程序所在目录下生成字典 #只支持数字生成 ...