輕鬆10步用es6寫出俄羅斯方塊

目的

• 爲熟悉es6增長趣味性

• 提升開發動力

• balabalabala....編不下去了

注意

俄羅斯方塊用es6寫,無通過babel轉es5,示例請用支持es6的chrome
俄羅斯方塊用es6寫,無通過babel轉es5,示例請用支持es6的chrome.
俄羅斯方塊用es6寫,無通過babel轉es5,示例請用支持es6的chrome.

實現

第零步:構思俄羅斯方塊的形狀&規則

• 形狀
  

每一個方塊均可看做一個二維數組,須要填充的部分爲1,留空爲0.

• 規則

  • 上方向鍵 ===> 方塊順時針形變

  • 左方向鍵 ===> 方塊向左移動

  • 右方向鍵 ===> 方塊向右移動

  • 空格鍵 ===> 方塊加速下落

  • 方塊掉落自動掉落

  • 方塊集齊滿一排消除

  • 方塊到頂部視爲失敗

第一步:讓方塊出現&動起來

在`document.body`添加一個方塊,並綁定`document.onkeydown`,讓方塊跟隨鍵盤方向鍵動起來.

• 添加方塊樣式

• 添加js交互

• 本步驟示例

第二步:讓方塊在規定畫布上動起來

在`document.body`添加一個畫布,每次方塊運動前判斷對應方向可否移動

• 添加site樣式

• 添加邊界限定js

• 本步驟示例

第三步:根據數組矩陣畫出俄羅斯方塊

• 根據數組矩陣判斷值爲1的下標,利用獲得的下標對各個小方塊進行定位,從而得出一整塊俄羅斯方塊.

• 判斷可否移動則根據繪製出的俄羅斯方塊取最值,根據最值比對邊界便可.
  

• 矩陣判斷&最值與邊界對比js

• 本步驟示例

第四步:俄羅斯方塊形變

• 利用變量記錄俄羅斯方塊當前位置

• 數組矩陣順時針旋轉後返回數組矩陣&每一個方塊的偏移量

• 利用矩陣判斷俄羅斯方塊能移動的邊界
  

• 改用變量代替常量&方塊形變js

• 本步驟示例

第五步:俄羅斯方塊自由下落

• 利用setTimeout方法指定必定時間下方塊下落20px

• 每次下落期間判斷當前方塊可移動邊界

• 當前方塊不可再位移時,方塊變灰,新的方塊出現

• 方塊自由下落&統一邊界js

• 本步驟示例

第六步:俄羅斯方塊消除

• 每次俄羅斯方塊下落結束時,判斷每一行小方塊個數

• 方塊個數等於畫布寬度/方塊,則取出該行方塊集合並從document.body消除

• 消除後將高度高於該消除行的方塊掉落一個方塊高度
  

• 消除行js

• 本步驟示例

第七步:加速下落

• 讓方塊在按空格鍵的時候,下落2個單位的BLOCK_SIZE,也就是40px

• 須要在canMove函數中添加displacement(位移)參數標識方塊下落的位移量

• 判斷方塊是否到達最高位置,須要加上位移量的距離

• 加速下落js

• 本步驟示例

第八步:判斷遊戲GG

• 判斷已下落方塊是否到達畫布頂端

• 增長遊戲結束填充動畫

• 遊戲結束js

• 本步驟示例

第九步:增長隨機下落方塊

• 將第零步的形狀添加進變量arrs數組

• 用Math.random在每次初始化方塊時,隨機挑選arrs中的一個二維數組進行渲染

• 隨機方塊js

• 本步驟示例

第十步:增長遊戲信息

• 增長計分板

• 增長等級判斷

• 增長下一個方塊提示

• 增長操做提示

• 提示info css

• 遊戲信息js

• 本步驟示例

傳送門

• 寫到這裏無恥求star

• 寫到這裏無恥求star

• 寫到這裏無恥求star

• 若本教程對你有啓發或幫助,各位看官請到github上點star,給我動力

• github地址

• 本教程示例