来学习开发一个网页版马里奥小游戏吧

深藏阁楼爱情的钟 2023-10-01 09:48 5阅读 0赞

说起全球最有吸金能力的IP，大家会想到什么呢？是漫威？是哈利波特？还是王者荣耀（笑）？

其实很多印象都是主观的，根据Wikimili从上市公司财务数据、全球第三方权威数据统计平台等多方面汇总出来的数据，我们可以看到，目前全球最最吸金的IP，可是宝可梦哟！

![file][]

整整1000亿美元，不过我们今天要说的主角可不是宝可梦，TJ君今天想跟大家分享的是榜单上的第9名，力压哈利波特一头的，**super mario**，马里奥大叔~

毕竟，对于80后的TJ君来说，马里奥大叔就是童年FC的美好回忆，所以今天要和大家分享的就是一款完全由TypeScript完成的马里奥在线开源小游戏！

**MarioHTML**

![file][file 1]

项目需要安装TypeScript和相关依赖

npm install -g typescript

然后运行TSC编译器来构建JavaScript文件

> 这里整理了一波超级好用的[IDEA插件，一定有你喜欢的！][IDEA]

目前游戏一共有8关，就是8个level，每个level都有独立的文件对应。

![file][file 2]

整体来说，MarioHTML对于原作的还原还是蛮高的。

像水管、岩浆、小怪、金币、乌龟、库巴，以及最后的公主都有，操作还是传统的上下左右跑跳~

![file][file 3]

![file][file 4]

![file][file 5]

![file][file 6]

不过要提一点，最后的公主有点。。。嗯。。。大家还是自己体验吧。TJ君可是死了无数次才看到了公主~

想试下这款小游戏对马里奥致敬或者学习下TypeScript的小伙伴，赶快！

开源地址：[https://github.com/nbarkhina/MarioHTML][https_github.com_nbarkhina_MarioHTML]

> 欢迎关注我的公众号：程序猿DD，分享其他地方看不到的知识与思考

[file]: http://image.openwrite.cn/10006_EB4032209C3D42B6974CD10FAB28B7FE
[file 1]: https://img-blog.csdnimg.cn/20211216093610313.png
[IDEA]: https://mp.weixin.qq.com/s/A1Qs0EHD_20j55a69fAU3w
[file 2]: https://img-blog.csdnimg.cn/20211216093610680.png
[file 3]: https://img-blog.csdnimg.cn/20211216093611155.png
[file 4]: https://img-blog.csdnimg.cn/20211216093611541.png
[file 5]: https://img-blog.csdnimg.cn/20211216093611930.png
[file 6]: https://img-blog.csdnimg.cn/20211216093612229.png
[https_github.com_nbarkhina_MarioHTML]: https://github.com/nbarkhina/MarioHTML

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个网页版的简易猜数字游戏

练习小作品

曾经终败给现在/ 2024年05月06日 21:24/ 0 赞/ 48 阅读

相关来学习开发一个网页版马里奥小游戏吧

说起全球最有吸金能力的IP，大家会想到什么呢？是漫威？是哈利波特？还是王者荣耀（笑）？其实很多印象都是主观的，根据Wikimili从上市公司财务数据、全球第三方权威数据统计

深藏阁楼爱情的钟/ 2023年10月01日 09:48/ 0 赞/ 6 阅读

相关 Java之马里奥游戏完整版

Java版简单版马里奥游戏 -------------------- ⭐[本项目演示地址][Link 1]⭐ ⭐资源图片源代码私信博主⭐ --------------

忘是亡心i/ 2023年09月28日 11:18/ 0 赞/ 230 阅读

相关猜数字游戏网页版

猜数字游戏网页版本猜数字游戏页面展示：具体实现：猜数字游戏实现一个猜数字游戏。随机产生一个数字，输入数字猜这个数字

柔光的暖阳◎/ 2022年10月20日 05:28/ 0 赞/ 229 阅读

相关《游戏学习》超简单益智小游戏java版推箱子游戏

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rSb6Ziz5rOw5bGx_size_20

àì夳堔傛蜴生んèń/ 2022年09月09日 14:58/ 0 赞/ 275 阅读

相关【cocos3.x+box2d+tileMap】制作马里奥游戏（四）碰撞检测

转载请注明来源：[http://blog.csdn.net/pur\_e/article/details/50599344][http_blog.csdn.net_pur_e_

亦凉/ 2022年08月20日 03:24/ 0 赞/ 2505 阅读

相关【cocos3.x+box2d+tileMap】制作马里奥游戏（三）创世纪

转载请注明来源：[http://blog.csdn.net/pur\_e/article/details/50578741][http_blog.csdn.net_p

谁借莪１个温暖的怀抱￠/ 2022年08月19日 16:12/ 0 赞/ 429 阅读

相关【cocos3.x+box2d+tileMap】制作马里奥游戏（二）制作地图

一、概念 tileMap是一个开源的、跨平台的地图制作工具，地图存储为Tmx格式，而cocos则提供对tileMap的原生支持。相关概念网上资

梦里梦外;/ 2022年08月19日 15:21/ 0 赞/ 2577 阅读

相关【cocos3.9+box2d+tileMap】制作马里奥游戏（一）

前面接触了很多cocos的基本概念，普通的类似棋牌、捕鱼等交互、动画、碰撞等较少的游戏，其实已经可以做了。一、前因小时候玩的马里奥，让我印象深刻，所以想尝试着去做一个简

女爷i/ 2022年08月19日 15:10/ 0 赞/ 222 阅读

相关通过射击小游戏来学习Java

day01 1. 什么是类？什么是对象？ 1)现实世界是由很对对象组成的基于对象抽象出类 2)对象：正式存在的单个的个体人笔

不念不忘少年蓝@/ 2022年02月16日 13:15/ 0 赞/ 254 阅读