怎么用js写个刮刮乐

刮刮乐是一种常见的互动游戏，通常用于抽奖或者促销活动中。下面是一个简单的JavaScript实现刮刮乐效果的示例代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刮刮乐</title>
    <style>
        #scratchArea {
            width: 200px;
            height: 100px;
            background-color: #ddd;
            position: relative;
            overflow: hidden;
        }
        #scratchCanvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        #result {
            margin-top: 20px;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="scratchArea">
        <canvas id="scratchCanvas"></canvas>
    </div>
    <div id="result">刮开看看</div>

    <script src="scratch.js"></script>
</body>
</html>

JavaScript部分（scratch.js）

document.addEventListener('DOMContentLoaded', () => {
    const scratchArea = document.getElementById('scratchArea');
    const scratchCanvas = document.getElementById('scratchCanvas');
    const resultDiv = document.getElementById('result');

    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    // 设置画布大小和背景
    scratchCanvas.width = scratchArea.clientWidth;
    scratchCanvas.height = scratchArea.clientHeight;
    const ctx = scratchCanvas.getContext('2d');
    ctx.fillStyle = '#ddd';
    ctx.fillRect(0, 0, scratchCanvas.width, scratchCanvas.height);

    // 隐藏的结果
    const prize = '恭喜中奖！';
    ctx.font = '24px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.fillText(prize, scratchCanvas.width / 2, scratchCanvas.height / 2);

    // 鼠标按下事件
    scratchArea.addEventListener('mousedown', (e) => {
        isDrawing = true;
        lastX = e.offsetX;
        lastY = e.offsetY;
    });

    // 鼠标移动事件
    scratchArea.addEventListener('mousemove', (e) => {
        if (!isDrawing) return;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.lineWidth = 20;
        ctx.lineCap = 'round';
        ctx.strokeStyle = '#fff';
        ctx.stroke();
        lastX = e.offsetX;
        lastY = e.offsetY;
    });

    // 鼠标抬起事件
    scratchArea.addEventListener('mouseup', () => {
        isDrawing = false;
        checkResult();
    });

    // 检查是否刮开足够区域显示结果
    function checkResult() {
        const imageData = ctx.getImageData(0, 0, scratchCanvas.width, scratchCanvas.height);
        let transparentPixels = 0;
        for (let i = 0; i < imageData.data.length; i += 4) {
            if (imageData.data[i + 3] === 0) {
                transparentPixels++;
            }
        }
        const threshold = scratchCanvas.width * scratchCanvas.height * 0.7; // 70% 阈值
        if (transparentPixels > threshold) {
            resultDiv.textContent = prize;
        }
    }
});