原生Js 经典横版2D超级玛丽

请你们关注个人github repo，但愿多多互相学习交流！ github.com/mia1232/Cla…javascript

喜欢的话就请多多支持Star 🌹🌹 会持续更新的！java

超级玛丽一直是咱们童年的回忆之一，那经典的背景音乐，熟悉的游戏画面和丰富的可玩性使其成为90年代最流行的游戏之一，也是游戏史上的一个经典IP。不管在红白机上仍是电脑上，马里奥是九十年代左右最多见的游戏，它既简单又困难，不一样的关卡塑造了不一样的主题营造了一个丰富独特的游戏世界。git

当我编写这个经典的2D横版过关游戏的时候，我突发其想可否不借助任何市面上流行的库和框架，使用javascript原生的API 编写？github

当没有一个相似Vue的双向绑定框架的时候，如何使得游戏中人物的位置变化实时反应到canvas上成为了一个挑战canvas

显然咱们须要一个 Timer，这里 requestAnimationFrame 就派上了用场。它能够按照浏览器本身的节奏来不断的重绘游戏画面。关于图形，咱们可使用 Canvas的原生api借助雪碧图定义游戏中不一样的元素，不管是马里奥自己，仍是砖块/地面/天空/敌人。而后再根据 config文件把他们绘制到游戏的画布上。对于马里奥的人物，咱们对其的速度，重力等熟悉进行建模，将其行走跳跃等动做绑定到相应的鼠标事件上，使其可以在关卡里灵活活动。api

在每一帧游戏的进行，咱们进行碰撞检测，若是马里奥碰到了砖块和地面，咱们应该将其对应方向上的速度设置为0，中止其的运动。同时，要考虑若是马里奥向上顶到砖块，如何消除砖块。浏览器

目前只编写了游戏的第一关，还有更多的游戏特性等待扩展，敬请期待！markdown