下面這張是效果圖:
先立個flag,一個星期內把這個坑填了
今天7月1號,建黨節,在這個偉大的節日,我來填坑了。
這個游戲有以下幾個難點:
1、禮品的位置
2、小怪獸位置的變化(走路、轉身和回退)
3、小怪獸的跳躍弧度
接下來就是逐個擊破:
1、獲取獎品數據后,建一個數組存放獎品的位置,通過遍歷數據把獎品循環輸出到頁面上對應的位置。
2、小怪獸的位置變化:
- 搖完骰子后,判斷位置的變化是前進還是后退。后台接口需要返回兩個位置的數據,一個是第一次的位置,一個是第二次的位置。判斷兩個位置是否相等。如果相等,則小怪獸只前進,無后退。否則,小怪獸先到達第一個位置之后,函數回調傳入第二個位置,小怪獸再跳到第二個位置。
- 轉身動畫。把每個位置小怪獸身體方向記錄到獎品位置那個數組里面去,到達位置的同時,追加相應的css改變小怪獸身體的方向。
3、 小怪獸跳躍的弧度。可以采用半步半步的跳法,運動軌跡如下可見。可以做到跳躍的效果。(注意:圖中第三個坐標寫錯了,應該是(120,-40))
代碼改天有時間再上傳到github給大家看,這個大富翁游戲大致就是這樣了。