C# 撰寫網頁小應用程式：彈跳球動畫展示

前言

Java Applet 曾是網頁豐富客戶端的代表，現今 Flash/Silverlight 已退場，WebAssembly 成主流。但 .NET 仍可透過舊版 <object> 標籤載入 WinForms 控制項於網頁（需客戶端安裝 .NET Framework），本文以彈跳球動畫為例展示基本原理，**僅供教學娛樂，生產環境請勿使用**。

完整程式碼：BallControl

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Threading;
using System.Windows.Forms;

namespace BallGame
{
    public class BallControl : Control
    {
        private Rectangle ballRegion = new Rectangle(0, 0, 50, 50);
        private Thread drawThread;
        private Image offscreenImage;
        private int speedX = 4, speedY = 6;

        public BallControl()
        {
            ClientSize = new Size(200, 300);
            BackColor = Color.Gray;
            drawThread = new Thread(Run) { IsBackground = true };
            drawThread.Start();
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            if (offscreenImage != null)
                e.Graphics.DrawImage(offscreenImage, 0, 0);
        }

        private void Run()
        {
            while (true)
            {
                offscreenImage = new Bitmap(ClientSize.Width, ClientSize.Height);
                using (Graphics g = Graphics.FromImage(offscreenImage))
                {
                    g.FillEllipse(Brushes.Blue, ballRegion);
                }

                if (ballRegion.X <= 0 || ballRegion.Right >= ClientSize.Width)
                    speedX = -speedX;
                if (ballRegion.Y <= 0 || ballRegion.Bottom >= ClientSize.Height)
                    speedY = -speedY;

                ballRegion.X += speedX;
                ballRegion.Y += speedY;

                Invalidate(); // 觸發重繪
                Thread.Sleep(30); // 約 33 FPS
            }
        }
    }
}

關鍵技術點

1. 雙重緩衝：離屏繪圖 Bitmap + Graphics.FromImage，再於 OnPaint 一次繪製，消除閃爍。
2. 獨立繪圖執行緒：避免阻塞 UI 執行緒，設定 IsBackground = true 隨應用程式結束自動終止。
3. Invalidate()：請求重繪，非同步觸發 OnPaint。
4. 邊界檢測：使用 Rectangle.Right/Bottom 簡化碰撞邏輯。

網頁嵌入方式（舊版）

<object id="ballCtrl" classid="http:BallGame.dll#BallGame.BallControl"
        width="200" height="300"></object>

• 需將專案編譯為 DLL，簽名並部署至 Web 伺服器。
• 客戶端須安裝對應 .NET Framework 版本，IE 需啟用「執行未經驗證的 ActiveX 控制項」。
• 現代瀏覽器**不再支援**此技術，僅供歷史參考。

現代替代方案

• Blazor WebAssembly：純 C# 運行於瀏覽器，無需外掛。
• Canvas / SVG + JavaScript：原生 Web 動畫標準。
• Unity WebGL / Godot Web：遊戲級圖形。

結語

雖然 WinForms 網頁控制項已成歷史，但雙重緩衝、多執行緒繪圖、碰撞檢測等核心技術在現代遊戲開發、即時視覺化應用中依然通用。建議改用 Blazor 或 Web 標準技術實作同類效果。