HTML5 刮刮乐游戏代码示例 - 前端开发教程 - 常规

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>刮刮乐游戏 - HTML5 Canvas 示例</title>
    <style>
        body {
            background-color: #fff;
        }
        canvas {
            margin: 50px auto;
            display: block;
            border: 1px solid #000;
        }
        #content {
            margin: 50px auto;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='400' height='400'></canvas>
<div id='content'>刮刮乐游戏</div>
<script>
    window.onload = function() {
        // 获取canvas元素
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
<pre><code>    // 绘制底层图像
    ctx.fillStyle = '#ccc';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制上层图像
    ctx.fillStyle = '#000';
    ctx.font = 'bold 40px Arial';
    ctx.fillText('刮刮乐', 100, 200);

    // 添加鼠标事件
    canvas.addEventListener('mousemove', function(e) {
        // 获取鼠标在canvas上的坐标
        var x = e.offsetX;
        var y = e.offsetY;

        // 判断是否刮开了足够多的区域
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixels = imageData.data;
        var count = 0;
        for (var i = 0; i &lt; pixels.length; i += 4) {
            if (pixels[i + 3] === 0) {
                count++;
            }
        }
        if (count &gt;= pixels.length / 8) {
            // 刮开了足够多的区域，显示中奖信息
            var content = document.getElementById('content');
            content.innerHTML = '恭喜你中奖了！';
        }

        // 绘制刮开的图像
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, Math.PI * 2);
        ctx.fill();
    });
};
</code></pre>
</script>
</body>
</html>