微信營銷互動開發：基於 wScratchPad 實現刮刮樂抽獎功能

前言

刮刮樂是微信營銷活動中極具吸引力的互動形式。本文基於 jQuery 擴展 wScratchPad，詳細講解如何整合刮刮卡效果、精準獲取刮開面積百分比、觸發中獎邏輯，並修正網上流傳教程中常見的事件綁定錯誤。

準備工作

1. 下載 wScratchPad (官方頁面已失效，建議從可信鏡像源獲取 wScratchPad-2.1.0.zip)。
2. 引入 jQuery 1.7+ 與 jquery.wScratchPad.js。
3. 準備兩張圖片：遮罩層圖 (灰色塗層) 與底圖 (獎品/資訊)。

核心 HTML 結構

<div id="scratch-card" style="width: 300px; height: 150px; position: relative;">
    <img src="prize.jpg" alt="獎品" style="width: 100%; height: 100%; display: block;">
    <canvas id="wScratchPad" width="300" height="150"></canvas>
</div>
<button id="reset-btn" style="display:none;">重新刮獎</button>

JavaScript 初始化與關鍵配置

<script src="jquery.min.js"></script>
<script src="jquery.wScratchPad.js"></script>
<script>
$(function () {
    var $pad = $('#wScratchPad');
    var scratched = false; // 防重複觸發

    $pad.wScratchPad({
        width: 300,
        height: 150,
        cursor: 'crosshair',      // 自定義游標
        color: '#cccccc',         // 遮罩顏色 (與 image2 二擇一)
        // image: 'mask.png',      // 或使用圖片遮罩
        // image2: 'prize.jpg',    // 底圖 (若不在 HTML 預載)
        realtimePercent: true,    // 即時回傳百分比 (預設 false 僅 scratchUp 觸發)
        scratchUp: function (e, percent) {
            // 【關鍵修正】網上多數教程錯用 scratchMove
            // 源碼中只有 realtimePercent=true 或 event=='Up' 才觸發回調
            if (scratched) return;
            console.log('刮開百分比:', percent.toFixed(2) + '%');

            if (percent > 60) { // 閾值可配置
                scratched = true;
                triggerWin(); // 觸發中獎邏輯
            }
        }
    });

    function triggerWin() {
        alert('恭喜中獎！'); // 實際應呼叫後端 API 驗證並記錄
        $('#reset-btn').show();
    }

    $('#reset-btn').click(function () {
        $pad.wScratchPad('reset'); // 重置畫布
        scratched = false;
        $(this).hide();
    });
});
</script>

源碼級解析：為何必須用 scratchUp？

查看 jquery.wScratchPad.js 核心邏輯：

scratchFunc: function (e, $this, event) {
    // ... 計算座標 ...
    $this['scratch' + event](e, $this); // 呼叫 scratchDown / scratchMove / scratchUp

    // 只有 realtimePercent=true 或 event=='Up' 才執行回調
    if (this.settings.realtimePercent || event == 'Up') {
        if ($this.settings['scratch' + event]) {
            $this.settings['scratch' + event].apply($this, [e, $this.scratchPercentage($this)]);
        }
    }
}

• scratchMove 預設不觸發回調，除非設定 realtimePercent: true (會大量觸發，影響效能)。
• scratchUp (滑鼠釋放/手指離開) 必定觸發，且此刻刮開面積已穩定，最適合判斷中獎。

後端驗證與防作弊建議

1. 前端僅負責交互：刮開面積達標後，呼叫後端 API /api/scratch/verify，攜帶 openid、activity_id、percent。
2. 後端核心邏輯：
   • 驗證用戶參與資格 (次數限制、時間窗口)。
   • 根據預設機率 (如 10% 中獎) 判定結果，寫入中獎記錄表。
   • 返回 {won: true, prize: '優惠券', code: 'ABC123'} 或 {won: false}。
3. 防重放攻擊：每次活動生成唯一 nonce，前端刮獎請求必須攜帶，後端驗證後標記已用。
4. 圖片資源防盜鏈：獎品圖簽名 URL 限時訪問，避免直接下載。

樣式微調技巧

/* 確保 Canvas 覆蓋圖片且無邊距 */
#scratch-card { overflow: hidden; }
#scratch-card canvas { position: absolute; top: 0; left: 0; pointer-events: auto; }
#scratch-card img { pointer-events: none; } /* 滑鼠事件穿透給 Canvas */

結語

wScratchPad 輕量易用，核心在於正確使用 scratchUp 回調配合 realtimePercent 策略。前端負責流暢體驗，後端把控中獎邏輯與安全，即可打造高轉化的微信刮刮樂活動。記得在活動上線前進行壓力測試，確保高併發下 Canvas 渲染與 API 響應穩定！