J2ME 低級 UI 核心：Canvas 繪圖、事件處理與拼圖遊戲完整實現

javax.microedition.lcdui.Canvas 是 J2ME 低級 UI 基石，提供像素級繪圖控制 (繼承實現 paint(Graphics)) 與鍵盤/指針事件回調。本文從零構建 Canvas 框架，演示獲取屏幕尺寸、清屏、繪製文本/圖形，並擴展為完整的 3×4 拼圖遊戲：圖片切割載入、隨機打亂、方向鍵移動、步數統計、繪製網格與圖片，代碼結構清晰，適合作為遊戲開發入門範本。

1. Canvas 基礎框架三類架構

• MyCanvas extends Canvas：實現 paint()、輔助 clearBackground()、業務邏輯 (遊戲狀態、觸控處理)。
• CanvasTest extends MIDlet：生命周期管理，startApp() 設置當前顯示為 Canvas，註冊命令監聽器。
• MyCommandListener implements CommandListener：處理「退出」命令，銷毀 MIDlet。

2. 拼圖遊戲核心邏輯 (MyCanvas 完整代碼節選)

public class MyCanvas extends Canvas {
    int[][] pics = new int[4][3]; // 4行3列 + 1空位
    Image[] images = new Image[13]; // 0.png(空白) + 1-12.png
    int step = 0, spaceX = 3, spaceY = 0;

    public MyCanvas() {
        // 初始化有序數組 1-12, 空位置於 [0][3]
        for (int i=0;i<4;i++) for(int j=0;j<3;j++) pics[i][j]=i*3+j+1;
        pics[0][3]=0;
        // 隨機打亂 10 次交換
        Random r=new Random();
        for(int i=0;i<10;i++) swap(r.nextInt(3),r.nextInt(4),r.nextInt(3),r.nextInt(4));
        // 載入圖片 (放入項目 resources/pictures/ 並配置打包)
        for(int i=0;i<13;i++) images[i]=Image.createImage("/"+i+".png");
    }

    void swap(int x1,int y1,int x2,int y2){ int t=pics[y1][x1]; pics[y1][x1]=pics[y2][x2]; pics[y2][x2]=t; }

    public void paint(Graphics g) {
        clearBackground(g);
        // 繪製網格線
        g.setColor(0x000000);
        g.drawRect(1,3,236,284);
        // 繪製圖片 (58x70 每塊)
        for(int i=0;i<4;i++) for(int j=0;j<3;j++)
            g.drawImage(images[pics[i][j]], j*59+2, i*71+4, Graphics.TOP|Graphics.LEFT);
        g.drawImage(images[pics[0][3]], 179, 4, Graphics.TOP|Graphics.LEFT);
        // 步數顯示
        g.drawString("步數:",182,140,Graphics.TOP|Graphics.LEFT);
        g.setColor(0xffffff); g.fillRect(182,158,50,18);
        g.setColor(0xff0000); g.drawString(String.valueOf(step),187,160,Graphics.TOP|Graphics.LEFT);
    }

    protected void keyPressed(int keyCode) {
        switch(getGameAction(keyCode)){
            case RIGHT: right(); break;
            case LEFT:  left();  break;
            case UP:    up();    break;
            case DOWN:  down();  break;
        }
        repaint();
    }
    // up/down/left/right 移動空位交換邏輯，step++ ...
}

3. 關鍵技術點

• 雙緩衝：Canvas 默認雙緩衝，repaint() 觸發系統回調 paint()，無閃爍。
• 鍵盤映射：getGameAction(keyCode) 將設備物理鍵映射為標準遊戲動作 (UP/DOWN/LEFT/RIGHT/FIRE)，屏蔽機型差異。
• 資源打包：圖片置於 src/resources/pictures/，專案屬性 → Libraries & Resources → Add Folder 打包進 JAR。
• 隨機打亂：多次隨機交換確保可解 (拼圖奇偶性保證)，或引入專業打亂算法。

4. 運行效果

• 啟動顯示 3×4 打亂拼圖 + 右側空白塊 + 步數計數器。
• 方向鍵移動相鄰圖片進空位，步數遞增。
• 拼圖完成可自行添加判邏輯 (比對 pics 與有序數組) 彈出提示。

此框架可直接擴展為貪食蛇、推箱子、俄羅斯方塊等經典 2D 遊戲。