用p5js玩俄羅斯方塊
騙人的；；但其實我不太會玩俄羅斯方塊所以看看就好
～「方塊分割」的課程作品衍伸～
作品展示
作品介紹及緣由
在上上週的課堂中，老師展示了幾個很有趣的作品，總而言之是跟「方塊分割」有關，我覺得這些作品都是利用動態圖形與數據視覺化相結合的、很漂亮的設計。畫面中流動的幾何圖形不斷變化，彷彿在演繹著某種規律與秩序，但同時也帶著隨機與混亂的美感。看著這個作品，我腦海裡突然閃過了「俄羅斯方塊」的畫面。
俄羅斯方塊是一個大家都很熟悉的遊戲，但它不僅僅是遊戲本身，而是某種有序與混亂之間的平衡。每一個掉落的方塊都有它自己的形狀與特性，我們需要在有限的空間裡快速思考，找到最適合它的位置，這讓我聯想到作品中動態變化的幾何形狀以及如何在視覺空間中安排它們的過程。
這次作品設計的緣由，就是想透過 p5.js 製作一款俄羅斯方塊遊戲動畫，結合課堂中學到的程式與動態視覺的表現力，並在畫面上重現那種有序中帶有隨機的美感。同時，我也希望這個作品不僅僅是模仿經典遊戲，而是能讓畫面呈現出色彩的豐富與多樣性，讓每個方塊的掉落都像是一場視覺的即興演出。
程式碼解讀～～～
整體結構與初始設定
這裡我們定義了網格大小（cols 和 rows），以及用 pieces 陣列儲存不同形狀的方塊，每個方塊由 0 和 1 的矩陣表示，1 代表方塊的形狀。activePieces 則是一個清單，儲存目前正在畫面上移動的方塊。
畫面初始化與方塊生成
在 setup() 裡，我們用 createCanvas 定義畫布大小，並初始化一個空白網格。然後用 setInterval 每秒新增一個新的方塊到畫面中，這樣遊戲就可以不斷有方塊掉下來。
繪製網格與更新畫面
在 draw() 函數中，每幀都會清空畫布並重繪整個遊戲畫面。我們會先畫出網格背景，然後再讓每個正在掉落的方塊自己更新位置並顯示出來。
這裡每個活動中的方塊都用 show() 來繪製，用 update() 來控制掉落的速度。當方塊觸底或與其他方塊碰撞（isStopped()），我們會把它固定到網格裡（addToGrid()），並從活動列表中移除。
生成方塊類別
this.shape 是隨機選擇的一個方塊形狀。
this.x 和 this.y 是方塊的位置，初始時放在畫面正中央的上方。
this.color 是隨機生成的顏色，讓每個方塊都有不同的視覺效果。
show() 用來畫出方塊，update() 則負責讓方塊每隔一定時間掉一格。
不過我這幾週好忙好忙，之後有空再改改能不能把它真的變成一個好玩ㄉ遊戲、、！！！