愛的魔力轉圈圈-不斷重複的迴圈動態

前一陣子同事丟了一個問題要我動動腦練習寫一個迴圈動態，規則如下

1. 以中心點做為起始點
2. 不斷重複
3. 不論版面是3x3、5x5、7x7、9x9甚至是以上都要能夠正常執行

開發歷程:

開發的時候在元素上標示上數字可以在開發時幫忙找出中點以及跑迴圈的相關邏輯,建議標上去

接下來就是找出所需的相關資訊，稍後會在說明要迴圈數、轉折點的主因

1. 起始點
2. 迴圈數
3. 轉折點

起始點直接除以2取最小整數即可

var now_pos = Math.floor(元素總數 / 2);

迴圈數思考一下可以發現3x3是跑一圈迴圈、5x5兩圈、7x7三圈…

由此得出以下關係

var looptimes = (Math.sqrt(元素總數) - 1) / 2;

轉折點是當中非常重要的關鍵，因為會需要轉折點讓程式判斷跑的方向

我是取中心點的左右斜對角作為轉折點，並透過迴圈數求出所有轉折點

  for (var i = 1; i <= looptimes; i++) {
    // 最後-1是為了對應陣列下標從0開始
    // 左上
    cp.push(Math.ceil(元素總數 / 2) - i * (Math.sqrt(元素總數) + 1) - 1);
    // 右上
    cp.push(Math.ceil(元素總數 / 2) - i * (Math.sqrt(元素總數) - 1) - 1);
    //右下
    cp.push(Math.ceil(元素總數 / 2) + i * (Math.sqrt(元素總數) + 1) - 1);
    // 左下
    cp.push(Math.ceil(元素總數 / 2) + i * (Math.sqrt(元素總數) - 1) - 1);
}

求出所有的轉折點後可以開始做迴圈的邏輯判斷了

計算當前所在的點 (最開始是中心點) 與轉折點之間的差值之後求差值得商數及餘數

• 餘數作為左右的判斷
• 商數作為上下的判斷
• 當前的點大於轉折點迴圈的方向就為左或上
• 當前的點小於轉折點迴圈的方向就為右或下

重複執行的部分則透過setInterval去做就可以了

在測試的時候可以改成7x7或9x9看看，一樣可以正常的執行

之後針對動態如果還有什麼問題都歡迎來找我討論~

執行結果: