用 CodeBuddy 打造一张属于她的 520 刮刮乐，程序员的浪漫可以这么强大！
520 马上就要来了，作为一个程序员，除了发红包还能干点啥？你可能会觉得，发个红包是最省事的选择，可是，多少有点“没诚意”的味道。尤其是在这个仪式感爆棚的日子里，直接塞个 1314 元红包过去，虽然看起来挺大气，但终究少了点心思和惊喜。
不过，刚好我女朋友有个小爱好——她超爱刮刮乐。每次去便利店，她都忍不住买上几张，刮奖那几秒钟的期待，仿佛整个世界都只剩下她和那张彩票。哪怕只刮中个五块钱，她也能乐上半天。
所以，我突然就灵光一闪——不如自己做一张“520 专属刮刮乐”送给她？关键是，这一次，不用从零开始堆前端代码，我们可以直接用 CodeBuddy 这款开发神器，轻松搞定整套逻辑和交互，让技术变得浪漫，让爱意变得可视化！
刮乐基本功能需求
刮奖区域： 覆盖层设计（通常为银色涂层效果） 刮开效果模拟（鼠标移动或触摸移动时显示底层内容） 结果显示： 中奖金额显示区域 中奖动画效果 交互控制： 开始刮奖按钮 重置/再来一次按钮 刮开面积达到一定比例自动显示结果
样式太丑了，重新优化一下吧。
🎁 项目构想：一张充满惊喜的刮刮乐
✅ 功能亮点
1. 刮奖区域设计
- 银色遮罩模拟：视觉上还原真实的彩票涂层，营造神秘感。
- 真实刮开交互：支持鼠标拖动或手机触屏操作，涂层随着用户操作逐步揭开，底层“中奖信息”逐渐显现，让人充满期待。
2. 中奖内容呈现
- 动态显示：比如“520元大红包”、“今晚带你去看星星”或者“无限次亲亲券”等，随你定义！
- 炫酷动画：刮开后自动触发特效动画，比如爱心飞舞、烟花绽放等，让氛围拉满。
3. 人性化交互设计
- 开始按钮控制：点击“开始刮奖”才进入操作状态，避免无意触发。
- 再来一次功能：支持重新生成新的彩票，给用户无限惊喜的可能。
- 智能判断刮开比例：系统会判断刮开面积是否超过设定阈值（比如 70%），一旦达标，自动展示完整结果，让体验更加流畅自然。
💡 为什么用 CodeBuddy？
如果说以往做这种互动页面需要写一堆前端代码、调 UI、测事件监听，那么在 CodeBuddy 上，这一切都变得异常简单。你只需要：
- 说句话
- 讲好互动逻辑
- 写一点点代码（不夸张，真的只是“一点点”）
- 然后看着它像魔法一样跑起来
CodeBuddy 就像是程序员的魔术棒，尤其适合快速搭建有趣、温暖、有创意的小应用。关键是，它的学习曲线非常平缓，哪怕你只是会一点点 HTML 或 Vue，也能在它的引导下完成一个精致的项目。
🌟 结语
520，从来不只是秀数字的节日，更是用心去表达爱的机会。而程序员的爱，也完全可以通过代码被传递得妙趣横生。通过 CodeBuddy，我们不仅可以快速实现一个互动刮刮乐，更能让每一次刮开的瞬间，都藏着你为她写下的心意。
所以别犹豫了，打开 CodeBuddy，给她做一张只属于你们的专属刮刮乐吧。让这一次，她不仅收获惊喜，更看见你用技术表达的深情。
代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完整功能刮刮乐</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg') no-repeat center center;
background-size: cover;
overflow: hidden;
}
.scratch-container {
width: 300px;
text-align: center;
z-index: 100;
}
.card {
width: 100%;
height: 220px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 16px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
backdrop-filter: blur(2px);
}
.prize-content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
font-weight: bold;
color: #e74c3c;
background-color: rgba(255, 255, 255, 0.95);
z-index: 1;
padding: 20px;
text-align: center;
}
.scratch-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
cursor: grab;
}
.start-btn {
margin-top: 20px;
padding: 12px 24px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
z-index: 100;
}
.hidden {
display: none;
}
/* 动画效果 */
.particle {
position: absolute;
pointer-events: none;
}
/* 全屏撒花效果 */
.confetti {
position: fixed;
width: 12px;
height: 12px;
border-radius: 50%;
z-index: 999;
animation: confetti-fall 3s ease-in forwards;
}
@keyframes confetti-fall {
0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
/* 金钱动画 */
.coin {
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 8px gold;
animation: float 2s ease-in-out infinite;
}
/* 爱心动画 */
.heart {
width: 20px;
height: 20px;
background-color: #e74c3c;
transform: rotate(45deg);
animation: pulse 1.5s ease-in-out infinite;
}
.heart:before, .heart:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: #e74c3c;
border-radius: 50%;
}
.heart:before { top: -10px; left: 0; }
.heart:after { top: 0; left: -10px; }
@keyframes pulse {
0%, 100% { transform: rotate(45deg) scale(1); }
50% { transform: rotate(45deg) scale(1.3); }
}
</style>
</head>
<body>
<div class="scratch-container">
<div class="card">
<div class="prize-content hidden" id="prizeContent"></div>
<canvas class="scratch-canvas hidden" id="scratchCanvas"></canvas>
</div>
<button class="start-btn" id="startBtn">开始刮奖</button>
</div>
<script>
// 奖品分类系统
const prizes = [
{ text: "520元大红包", type: "money" },
{ text: "1314元恋爱基金", type: "money" },
{ text: "今晚带你去看星星", type: "romantic" },
{ text: "无限次亲亲券", type: "romantic" },
{ text: "周末免做家务券", type: "experience" },
{ text: "专属按摩服务", type: "experience" },
{ text: "神秘欧洲双人游", type: "special" }
];
// 核心刮奖功能
let canvas, ctx;
let isDrawing = false;
const scratchThreshold = 0.4;
const startBtn = document.getElementById('startBtn');
const scratchCanvas = document.getElementById('scratchCanvas');
const prizeContent = document.getElementById('prizeContent');
startBtn.addEventListener('click', startScratching);
function startScratching() {
// 重置状态
const prize = prizes[Math.floor(Math.random() * prizes.length)];
prizeContent.textContent = prize.text;
prizeContent.classList.add('hidden');
// 初始化画布
scratchCanvas.classList.remove('hidden');
canvas = scratchCanvas;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.fillStyle = '#c0c0c0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 事件监听
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('touchstart', handleTouchStart);
canvas.addEventListener('touchmove', handleTouchMove);
canvas.addEventListener('touchend', stopDrawing);
startBtn.classList.add('hidden');
}
function startDrawing(e) {
isDrawing = true;
const pos = getPosition(e);
lastX = pos.x;
lastY = pos.y;
}
function draw(e) {
if (!isDrawing) return;
const pos = getPosition(e);
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 25;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
lastX = pos.x;
lastY = pos.y;
checkScratchedArea();
}
function stopDrawing() {
isDrawing = false;
}
function handleTouchStart(e) {
e.preventDefault();
startDrawing(e.touches[0]);
}
function handleTouchMove(e) {
e.preventDefault();
draw(e.touches[0]);
}
function getPosition(e) {
const rect = canvas.getBoundingClientRect();
return {
x: (e.clientX || e.touches[0].clientX) - rect.left,
y: (e.clientY || e.touches[0].clientY) - rect.top
};
}
function checkScratchedArea() {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
let transparentPixels = 0;
for (let i = 3; i < data.length; i += 4) {
if (data[i] === 0) transparentPixels++;
}
const ratio = transparentPixels / (canvas.width * canvas.height);
if (ratio >= scratchThreshold) revealPrize();
}
function revealPrize() {
// 移除涂层和事件
scratchCanvas.remove();
// 显示奖品
prizeContent.classList.remove('hidden');
// 触发全屏撒花
createConfetti();
// 根据奖品类型触发动画
const prizeType = prizes.find(p => p.text === prizeContent.textContent).type;
createPrizeAnimation(prizeType);
// 重置按钮
startBtn.textContent = '再来一次';
startBtn.classList.remove('hidden');
}
// 全屏撒花效果
function createConfetti() {
const colors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#448AFF', '#40C4FF', '#64FFDA', '#69F0AE', '#EEFF41', '#FFD740'];
for (let i = 0; i < 100; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * window.innerWidth + 'px';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}
}
// 奖品专属动画
function createPrizeAnimation(type) {
const container = document.querySelector('.card');
const count = type === 'special' ? 30 : 15;
for (let i = 0; i < count; i++) {
const particle = document.createElement('div');
particle.className = 'particle ' +
(type === 'money' ? 'coin' :
type === 'romantic' ? 'heart' : 'star');
particle.style.left = Math.random() * container.offsetWidth + 'px';
particle.style.top = Math.random() * container.offsetHeight + 'px';
container.appendChild(particle);
setTimeout(() => particle.remove(), 2000);
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号