我用JS开发一款超级玛丽游戏

主要观点总结

本文主要描述了一个超级玛丽的MVP版本实现过程，涉及技术包括Node.js开发游戏相关技术如框架leaverjs和vue的使用，物理引擎的实现等。

关键观点总结

关键观点1: 创建背景、场景和精灵

利用leaverjs实现背景的渲染，创建一个场景类用来承接游戏中的元素（精灵），并为这些元素创建基类Sprite类来表示精灵的各种属性和行为。

关键观点2: 实现物理引擎

先实现重力效果，然后是碰撞检测以及跳跃等功能。

关键观点3: 其他精灵间的碰撞检测与处理

包括人物顶问号、吃成长蘑菇、顶碎砖块等场景的实现逻辑。

关键观点4: 引入相机和分数系统

通过相机概念实现视口内的内容绘制，通过分数系统实现击杀怪物、吃道具等行为的数值显示。

关键观点5: 编辑地图和游戏胜利机制

使用vue创建地图编辑器进行关卡自定义，设定游戏胜利的条件。

关键观点6: 社区组织和学习资源分享

作者分享了源码地址和体验地址供读者学习和交流，并组建了一个Node.js社群供学习交流。

文章预览

大厂技术    高级前端    Node进阶 点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 原文链接: https://juejin.cn/post/7392116075674828827 作者： @hhzzcc  投稿，欢迎更多小伙伴投稿 前言 从刚接触编程起，作者就一直有一个做游戏的梦，奈何水平比较差，做不出啥太像样的游戏，最近趁着下班和周末时间折腾折腾，怀旧一下童年最爱玩的超级玛丽。本文将讲述如何用 js 写一个 MVP 版本的超级玛丽游戏，主要用到框架有 leaferjs + vue ， leaferjs 负责做图形渲染， vue 负责界面和地图编辑， leafer 的 api 用起来还是很舒服的，学习成本低，作者也非常热情，这里帮忙推荐一下~ 本文会尽可能简单的少贴代码，并把核心的流程讲清楚，先上一张运行后的效果图，源码和体验地址在最下面 开始我们的游戏梦 1、创建背景 就是游戏背后的蓝天白云背 ………………………………