原生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