请大家关注我的github repo，希望多多互相学习交流！ github.com/mia1232/Cla…
喜欢的话就请多多支持Star 🌹🌹 会持续更新的！
超级玛丽一直是我们童年的回忆之一，那经典的背景音乐，熟悉的游戏画面和丰富的可玩性使其成为90年代最流行的游戏之一，也是游戏史上的一个经典IP。 无论在红白机上还是电脑上，马里奥是 九十年代左右最常见的游戏，它既简单又困难， 不同的关卡塑造了不同的主题营造了一个丰富独特的游戏世界。
当我编写这个经典的2D横版过关游戏的时候，我突发其想能否不借助任何市面上流行的库和框架，使用javascript原生的API 编写？
当没有一个类似Vue的双向绑定框架的时候，如何使得游戏中人物的位置变化实时反应到canvas上成为了一个挑战
显然 我们需要一个 Timer， 这里 requestAnimationFrame 就派上了用场。 它可以按照浏览器自己的节奏来不断的重绘游戏画面。 关于图形，我们可以使用 Canvas的原生api借助雪碧图定义游戏中不同的元素， 无论是马里奥本身，还是砖块/地面/天空/敌人。然后再根据 config文件把他们绘制到游戏的画布上。 对于马里奥的人物， 我们对其的速度，重力等熟悉进行建模，将其行走跳跃等动作绑定到相应的鼠标事件上，使其能够在关卡里灵活活动。
在每一帧游戏的进行，我们进行碰撞检测，如果马里奥碰到了砖块和地面，我们应该将其对应方向上的速度设置为0， 停止其的运动。同时，要考虑如果马里奥向上顶到砖块， 如何消除砖块。
目前只编写了游戏的第一关，还有更多的游戏特性等待扩展，敬请期待！
