源碼位置：https://github.com/condorheroblog/My-Second/tree/master/Canvas
今天這個游戲是我學習 canvas 以來動手寫的第一個游戲挪挤，第一次動手我感覺寫的還不錯，有鑒于此关翎，保守打算要寫三個 canvas 游戲扛门。其他類型的游戲可能不寫出來但弄懂主要業(yè)務邏輯還是要的∽萸蓿可能是我構造函數(shù)學的好论寨，這次使用 canvas 加上面向編程寫這個游戲很順新星立，不會的地方，停下來想一想葬凳，時間可長可短但問題也就解決了绰垂。可能也是游戲的業(yè)務并不是太難吧火焰。
參照效果
Running Ninja : http://flash.7k7k.com/cms/cms10/20171212/1002107071/2/games/Running-Ninja/index.html
實現(xiàn)的思路分析
先從最基礎的寫劲装，一個背景房子，背景房子是不動的昌简，然后是暗樹占业，暗樹再上面是明樹，明樹和暗樹都在運動只不過暗樹的速度低于明樹纯赎。明樹下面有草地谦疾，草地的速度不是很快大約和暗樹的速度相同。
畫面底部的黑色區(qū)域犬金，因為圖片大小的原因念恍，我們的用 canvas 畫筆，手動繪制一個矩形進行填充晚顷。
繼續(xù)寫下來就是障礙物了峰伙，一共上下兩個。上下障礙物之間的距離是固定的该默，畫面有色的部分距離也是固定的瞳氓，我們讓上面的障礙物隨機產(chǎn)生一個隨機數(shù)來表示上障礙物的位置，從而改變上障礙物出現(xiàn)的長度权均，然后讓固定總長（除黑布以外有色區(qū)域）減去固定障礙物之間的長度和現(xiàn)在上障礙物的長度就是現(xiàn)在下障礙物的長度。
障礙物之間的星星：根據(jù)上一個步驟我們已經(jīng)知道上方障礙物的隨機長度和障礙物之間的固定長度锅锨，星星出現(xiàn)的地方就是障礙物的中心叽赊，canvas 移動左上角的坐標系，移動的距離 x 即是障礙物距離左邊框在加上障礙物寬度的一半必搞，距離的 y 值就是上障礙物的隨機出現(xiàn)長度加上兩障礙物之間固定長度的一半必指。
星星出現(xiàn)的位置：這個問題也是值得思考的，當時寫的時候真是才思如泉涌恕洲，瞬間想到讓星星和障礙物一起出現(xiàn)塔橡，沒錯每個障礙物之間其實都有星星，至于隨機留到后面解決霜第。怎么解決的葛家？很簡單隨機產(chǎn)生一個隨機數(shù)，范圍小點0~5泌类，在障礙物出現(xiàn)的時候癞谒，判斷星星隨機的這個數(shù)是否恒等于1（零到五隨便選一個數(shù)）條件為真，星星出現(xiàn)，條件為假弹砚，星星就不出現(xiàn)双仍。
星星的旋轉(zhuǎn)，用到 canvas 的旋轉(zhuǎn)rotate 這個 API桌吃。
忍者的效果朱沃，忍者看著是在一直跑，其實一直在原地更換背景茅诱，進行原地奔跑逗物。真正運動的是后面的背景圖。
忍者這個地方有兩個難點：
- 第一個難點就是入場動畫让簿，需要保持畫面整體靜止敬察，忍者從左邊跑入畫面，然后進行原地奔跑尔当，畫面也同時進行運動莲祸。這個我是在定時器那個地方進行控制的，游戲一開始就讓忍者運動椭迎，當忍者距離左邊框一定距離锐帜，打開其他類的控制。整個畫面同時運動了畜号。
- 第二個難點就是二級跳缴阎，解決方案如下：
完美解決忍者二級跳的功能：
因為之前寫這個游戲只寫了一個框架，整體上和原游戲大差不差简软，細節(jié)來不及琢磨蛮拔，游戲最能難道我的地方就是忍者的二級跳功能。剛開始寫的時候痹升，一級跳很快實現(xiàn)了建炫，二級跳也沒多久就完成了，等測試的時候發(fā)現(xiàn)忍者并不是簡單的點一下跳一下疼蛾，雙擊可以連跳兩次肛跌，但原游戲的忍者厲害的地方就是忍者可以在一級跳的過程中還沒落地的時候，再點擊一下察郁，可以在原基礎上在起跳一次衍慎。而我當時想了好多辦法，但只有兩個辦法是半成功皮钠，因為這兩個辦法只能各自獨立完成實際游戲效果的一半稳捆。
- 只能完成雙擊二級跳，單擊一級跳麦轰，單擊過程中不能實現(xiàn)二級跳眷柔。
- 雙擊二級跳失效期虾，變成雙擊單擊都是一級跳，但單擊過程中可以實現(xiàn)二級跳驯嘱。
- 正是這種情況造成镶苞，一級二級跳的時候的音樂也加不上。鞠评。茂蚓。
想了幾天沒思路，到這時思路有點混亂了剃幌，后來其他功能寫完了聋涨，才回來慢慢的去盤這個地方的思路，還是用條件判斷來控制鼠標點擊次數(shù)的不同來給不同的條件负乡，這次就完美解決了單擊跳牍白，單擊下落未落地二級跳，雙擊二連跳的問題抖棘，這個地方是整個游戲?qū)ξ襾碇v最大的難點茂腥，就是糊弄不出來。整的你沒脾氣切省。就得就得靜下心來想邏輯最岗，用命去盤思路，盤著盤著就盤出來了朝捆。
- 死亡畫面采用的是延遲清除定時器般渡，在這個空隙，更換死亡圖片芙盘，當完成 die 動作最后才清除定時器驯用。
- 開場的指引跳躍圖片，只需要放置一張儒老。更新完就沒了蝴乔。
- 使用本地存儲來記錄最高分數(shù)和吃到星星的數(shù)量。其中五個星星用來復活一次贷盲。
- canvas 事件綁定淘这，這個是除二級跳我認為第二個難得地方剥扣，這個 canvas 畫布上如何進行事件綁定巩剖。因為 canvas 畫布就一個 DOM 級標簽，點的地方都是 canvas 畫上去的圖钠怯。這就比較讓人頭疼了佳魔。為此專門寫了一篇文章。提供了兩種思路：
canvas 上添加事件綁定： http://www.reibang.com/p/013d910b2f94
- js 刷新當前頁面 參考： https://www.runoob.com/w3cnote/js-refresh-current-page.html
- 最后把音樂加上就大功告成了晦炊。
代碼思路
- 中介者模式控制 game 類來調(diào)控全部類的通信
- 接下來就是各個類之間的通信
多余文件
- line.html 是 Promise 阻止 animate 異步練習
- particle.html 是網(wǎng)站常見的動態(tài)粒子連線
另外鞠鲜，images 里面的圖片沒有用完宁脊，只用了部分，除了這些其他文件均是有用的贤姆。
