837 lines
32 KiB
HTML
837 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>抖音直播点赞爱心效果</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0a0a0f;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
|
||
touch-action: manipulation;
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
canvas {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 底部提示 */
|
||
.hint-bar {
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
pointer-events: none;
|
||
transition: opacity 0.6s;
|
||
}
|
||
|
||
.hint-bar .icon-heart {
|
||
font-size: 24px;
|
||
animation: hintPulse 1.2s ease-in-out infinite;
|
||
}
|
||
|
||
.hint-bar .text {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 15px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
@keyframes hintPulse {
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
opacity: 0.7;
|
||
}
|
||
50% {
|
||
transform: scale(1.35);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 点赞计数器 */
|
||
.like-counter {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) translateY(20px);
|
||
z-index: 5;
|
||
pointer-events: none;
|
||
text-align: center;
|
||
transition: transform 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||
}
|
||
|
||
.like-counter.pop {
|
||
transform: translate(-50%, -50%) translateY(20px) scale(1.25);
|
||
}
|
||
|
||
.like-counter .count {
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
text-shadow: 0 0 40px rgba(255, 45, 85, 0.7), 0 0 80px rgba(255, 45, 85, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5);
|
||
line-height: 1;
|
||
}
|
||
|
||
.like-counter .label {
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.55);
|
||
letter-spacing: 2px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 640px) {
|
||
.like-counter .count {
|
||
font-size: 42px;
|
||
}
|
||
.hint-bar {
|
||
bottom: 28px;
|
||
}
|
||
.hint-bar .text {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<canvas id="canvas"></canvas>
|
||
|
||
<!-- 点赞计数 -->
|
||
<div class="like-counter" id="likeCounter">
|
||
<div class="count" id="likeCount">0</div>
|
||
<div class="label">点 赞</div>
|
||
</div>
|
||
|
||
<!-- 底部提示 -->
|
||
<div class="hint-bar" id="hintBar">
|
||
<span class="icon-heart">❤️</span>
|
||
<span class="text">点击屏幕送出爱心</span>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
// ==================== DOM元素 ====================
|
||
const canvas = document.getElementById('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
const likeCountEl = document.getElementById('likeCount');
|
||
const likeCounter = document.getElementById('likeCounter');
|
||
const hintBar = document.getElementById('hintBar');
|
||
|
||
// ==================== 配置 ====================
|
||
const CONFIG = {
|
||
MAX_HEARTS: 55, // 最大同时存在的爱心数
|
||
MAX_SPARKS: 120, // 最大同时存在的火花粒子数
|
||
HEART_MIN_SIZE: 14, // 爱心最小尺寸(px)
|
||
HEART_MAX_SIZE: 34, // 爱心最大尺寸(px)
|
||
HEART_MIN_LIFE: 1400, // 爱心最短寿命(ms)
|
||
HEART_MAX_LIFE: 2600, // 爱心最长寿命(ms)
|
||
RISE_SPEED_MIN: 70, // 最小上升速度(px/s)
|
||
RISE_SPEED_MAX: 150, // 最大上升速度(px/s)
|
||
DRIFT_AMP_MIN: 8, // 最小水平漂移振幅(px)
|
||
DRIFT_AMP_MAX: 45, // 最大水平漂移振幅(px)
|
||
LONG_PRESS_DELAY: 130, // 长按持续生成间隔(ms)
|
||
GLOW_BLUR: 10, // 发光模糊半径
|
||
GLOW_ALPHA: 0.55, // 发光透明度
|
||
DPR_CAP: 2, // 设备像素比上限
|
||
};
|
||
|
||
// ==================== 颜色调色板 ====================
|
||
const HEART_COLORS = [
|
||
'#ff2442', '#ff2d55', '#ff3b6e', '#ff4770',
|
||
'#ff5e82', '#ff6b8a', '#ff3c5c', '#ff1a3d',
|
||
'#e8223e', '#ff5079', '#ff3860', '#ff4d6d',
|
||
'#ff3355', '#ff4466', '#ff597f',
|
||
];
|
||
|
||
// 高光颜色（比主色更亮更粉）
|
||
const GLOW_COLORS = [
|
||
'#ff6b8a', '#ff7b99', '#ff8da6', '#ff9ab3',
|
||
'#ff7090', '#ff85a0', '#ff7795',
|
||
];
|
||
|
||
/**
|
||
* 随机选取数组元素
|
||
*/
|
||
function pick(arr) {
|
||
return arr[Math.floor(Math.random() * arr.length)];
|
||
}
|
||
|
||
/**
|
||
* 随机范围
|
||
*/
|
||
function rand(min, max) {
|
||
return min + Math.random() * (max - min);
|
||
}
|
||
|
||
// ==================== Canvas尺寸管理 ====================
|
||
let W, H, dpr;
|
||
|
||
function resizeCanvas() {
|
||
dpr = Math.min(window.devicePixelRatio || 1, CONFIG.DPR_CAP);
|
||
const rect = canvas.getBoundingClientRect();
|
||
W = rect.width;
|
||
H = rect.height;
|
||
canvas.width = W * dpr;
|
||
canvas.height = H * dpr;
|
||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||
ctx.scale(dpr, dpr);
|
||
}
|
||
|
||
window.addEventListener('resize', resizeCanvas);
|
||
window.addEventListener('orientationchange', () => {
|
||
setTimeout(resizeCanvas, 100);
|
||
});
|
||
resizeCanvas();
|
||
|
||
// ==================== 爱心绘制函数 ====================
|
||
/**
|
||
* 在指定位置绘制爱心路径
|
||
* 使用贝塞尔曲线构建标准心形
|
||
* @param {CanvasRenderingContext2D} context
|
||
* @param {number} cx - 中心x
|
||
* @param {number} cy - 中心y
|
||
* @param {number} size - 爱心大小（约为宽度的一半）
|
||
*/
|
||
function drawHeartPath(context, cx, cy, size) {
|
||
const s = size;
|
||
// 爱心底部尖端
|
||
const bottomY = cy + s * 0.55;
|
||
// 爱心顶部凹陷
|
||
const topDipY = cy - s * 0.65;
|
||
// 左凸起控制点
|
||
const leftOuterX = cx - s * 0.95;
|
||
const leftOuterY = cy - s * 0.2;
|
||
const leftInnerX = cx - s * 0.45;
|
||
const leftInnerY = cy - s * 1.05;
|
||
// 右凸起控制点
|
||
const rightInnerX = cx + s * 0.45;
|
||
const rightInnerY = cy - s * 1.05;
|
||
const rightOuterX = cx + s * 0.95;
|
||
const rightOuterY = cy - s * 0.2;
|
||
|
||
context.beginPath();
|
||
// 从底部尖端开始
|
||
context.moveTo(cx, bottomY);
|
||
// 左半心形
|
||
context.bezierCurveTo(
|
||
cx - s * 0.85, cy + s * 0.25, // 左下控制点
|
||
leftOuterX, leftOuterY, // 左外控制点
|
||
leftInnerX, leftInnerY // 左内终点（顶部凹陷左侧）
|
||
);
|
||
// 右半心形（从顶部凹陷右侧回到尖端）
|
||
context.bezierCurveTo(
|
||
rightInnerX, rightInnerY, // 右内控制点
|
||
rightOuterX, rightOuterY, // 右外控制点
|
||
cx + s * 0.85, cy + s * 0.25 // 右下控制点
|
||
);
|
||
context.closePath();
|
||
}
|
||
|
||
/**
|
||
* 绘制带发光和渐变的爱心
|
||
*/
|
||
function drawGlowHeart(context, cx, cy, size, color, glowColor, opacity, glowAlpha) {
|
||
if (opacity <= 0.01 || size <= 1) return;
|
||
|
||
const globalAlpha = Math.min(opacity, 1);
|
||
|
||
context.save();
|
||
context.globalAlpha = globalAlpha;
|
||
|
||
// 发光层（先绘制，在底层）
|
||
if (glowAlpha > 0.01) {
|
||
context.save();
|
||
context.shadowColor = glowColor;
|
||
context.shadowBlur = CONFIG.GLOW_BLUR * (size / 20);
|
||
context.fillStyle = glowColor;
|
||
context.globalAlpha = glowAlpha * globalAlpha;
|
||
drawHeartPath(context, cx, cy, size);
|
||
context.fill();
|
||
context.restore();
|
||
}
|
||
|
||
// 主体填充 - 使用径向渐变模拟立体感
|
||
const gradient = context.createRadialGradient(
|
||
cx - size * 0.15, cy - size * 0.35, size * 0.08,
|
||
cx, cy, size * 0.9
|
||
);
|
||
gradient.addColorStop(0, glowColor);
|
||
gradient.addColorStop(0.45, color);
|
||
gradient.addColorStop(1, '#9a0018');
|
||
|
||
context.fillStyle = gradient;
|
||
context.shadowColor = 'transparent';
|
||
context.shadowBlur = 0;
|
||
drawHeartPath(context, cx, cy, size);
|
||
context.fill();
|
||
|
||
// 高光点（顶部小亮斑）
|
||
const highlightX = cx - size * 0.12;
|
||
const highlightY = cy - size * 0.42;
|
||
const highlightR = size * 0.14;
|
||
context.save();
|
||
context.globalAlpha = 0.5 * globalAlpha;
|
||
const hlGrad = context.createRadialGradient(
|
||
highlightX, highlightY, highlightR * 0.1,
|
||
highlightX, highlightY, highlightR
|
||
);
|
||
hlGrad.addColorStop(0, '#ffffff');
|
||
hlGrad.addColorStop(0.5, 'rgba(255,255,255,0.4)');
|
||
hlGrad.addColorStop(1, 'rgba(255,255,255,0)');
|
||
context.fillStyle = hlGrad;
|
||
context.beginPath();
|
||
context.arc(highlightX, highlightY, highlightR, 0, Math.PI * 2);
|
||
context.fill();
|
||
context.restore();
|
||
|
||
context.restore();
|
||
}
|
||
|
||
// ==================== 粒子类 ====================
|
||
/**
|
||
* 爱心粒子
|
||
*/
|
||
class HeartParticle {
|
||
constructor(x, y, now) {
|
||
this.startX = x;
|
||
this.startY = y;
|
||
this.birthTime = now;
|
||
this.maxAge = rand(CONFIG.HEART_MIN_LIFE, CONFIG.HEART_MAX_LIFE);
|
||
this.baseSize = rand(CONFIG.HEART_MIN_SIZE, CONFIG.HEART_MAX_SIZE);
|
||
this.color = pick(HEART_COLORS);
|
||
this.glowColor = pick(GLOW_COLORS);
|
||
this.peakScale = rand(0.75, 1.35);
|
||
this.riseSpeed = rand(CONFIG.RISE_SPEED_MIN, CONFIG.RISE_SPEED_MAX);
|
||
this.driftAmp = rand(CONFIG.DRIFT_AMP_MIN, CONFIG.DRIFT_AMP_MAX);
|
||
this.driftFreq = rand(1.2, 2.8);
|
||
this.driftPhase = rand(0, Math.PI * 2);
|
||
this.rotation = rand(-0.4, 0.4);
|
||
this.rotationSpeed = rand(-0.35, 0.35);
|
||
// 微调：部分爱心有更大的初始偏移
|
||
this.extraDrift = (Math.random() < 0.25) ? rand(-25, 25) : 0;
|
||
this.alive = true;
|
||
this.spawnedSparks = false;
|
||
}
|
||
|
||
getAge(now) {
|
||
return now - this.birthTime;
|
||
}
|
||
|
||
getProgress(now) {
|
||
return Math.min(this.getAge(now) / this.maxAge, 1);
|
||
}
|
||
|
||
/**
|
||
* 获取当前缩放比例（弹入+渐出）
|
||
*/
|
||
getScale(now) {
|
||
const progress = this.getProgress(now);
|
||
// 弹入阶段：前18%生命周期
|
||
if (progress < 0.18) {
|
||
const t = progress / 0.18;
|
||
// 弹性缓出：快速弹到峰值
|
||
const elastic = 1 - Math.pow(1 - t, 3.5);
|
||
// 加入微小过冲
|
||
const overshoot = Math.sin(t * Math.PI) * 0.08 * (1 - t);
|
||
return this.peakScale * (elastic + overshoot);
|
||
}
|
||
// 稳定/缓慢缩小阶段：18%-65%
|
||
else if (progress < 0.65) {
|
||
const t = (progress - 0.18) / 0.47;
|
||
return this.peakScale * (1 - t * 0.25);
|
||
}
|
||
// 加速缩小阶段：65%-100%
|
||
else {
|
||
const t = (progress - 0.65) / 0.35;
|
||
const eased = t * t;
|
||
return this.peakScale * 0.75 * (1 - eased);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取当前透明度
|
||
*/
|
||
getOpacity(now) {
|
||
const progress = this.getProgress(now);
|
||
if (progress < 0.45) return 1;
|
||
if (progress < 0.78) {
|
||
const t = (progress - 0.45) / 0.33;
|
||
return 1 - t * 0.35;
|
||
}
|
||
const t = (progress - 0.78) / 0.22;
|
||
const eased = t * t;
|
||
return 0.65 * (1 - eased);
|
||
}
|
||
|
||
/**
|
||
* 获取发光透明度
|
||
*/
|
||
getGlowAlpha(now) {
|
||
const progress = this.getProgress(now);
|
||
if (progress < 0.5) return CONFIG.GLOW_ALPHA;
|
||
if (progress < 0.8) {
|
||
const t = (progress - 0.5) / 0.3;
|
||
return CONFIG.GLOW_ALPHA * (1 - t);
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
getY(now) {
|
||
const age = this.getAge(now);
|
||
const ageSec = age / 1000;
|
||
// 上升运动，后期略微加速
|
||
const speedMultiplier = 1 + (this.getProgress(now) > 0.7 ? (this.getProgress(now) - 0.7) / 0.3 *
|
||
0.4 : 0);
|
||
return this.startY - this.riseSpeed * ageSec * speedMultiplier;
|
||
}
|
||
|
||
getX(now) {
|
||
const age = this.getAge(now);
|
||
const ageSec = age / 1000;
|
||
const sinDrift = Math.sin(ageSec * this.driftFreq + this.driftPhase) * this.driftAmp;
|
||
const linearDrift = this.extraDrift * Math.min(ageSec / 1.5, 1);
|
||
return this.startX + sinDrift + linearDrift;
|
||
}
|
||
|
||
getRotation(now) {
|
||
const age = this.getAge(now);
|
||
return this.rotation + this.rotationSpeed * (age / 1000);
|
||
}
|
||
|
||
isDead(now) {
|
||
return this.getProgress(now) >= 1;
|
||
}
|
||
|
||
/**
|
||
* 判断是否应该产生火花（在生命末期）
|
||
*/
|
||
shouldSpawnSparks(now) {
|
||
return !this.spawnedSparks && this.getProgress(now) > 0.82;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 火花粒子（爱心消失时的小光点）
|
||
*/
|
||
class SparkParticle {
|
||
constructor(x, y, color, now) {
|
||
this.x = x;
|
||
this.y = y;
|
||
const angle = rand(0, Math.PI * 2);
|
||
const speed = rand(25, 90);
|
||
this.vx = Math.cos(angle) * speed;
|
||
this.vy = Math.sin(angle) * speed - rand(15, 50);
|
||
this.birthTime = now;
|
||
this.life = rand(250, 550);
|
||
this.color = color;
|
||
this.size = rand(1.5, 4.5);
|
||
this.alive = true;
|
||
}
|
||
|
||
getAge(now) {
|
||
return now - this.birthTime;
|
||
}
|
||
|
||
getProgress(now) {
|
||
return Math.min(this.getAge(now) / this.life, 1);
|
||
}
|
||
|
||
getOpacity(now) {
|
||
const p = this.getProgress(now);
|
||
return 1 - p * p;
|
||
}
|
||
|
||
getCurrentX(now) {
|
||
const age = this.getAge(now) / 1000;
|
||
return this.x + this.vx * age;
|
||
}
|
||
|
||
getCurrentY(now) {
|
||
const age = this.getAge(now) / 1000;
|
||
return this.y + this.vy * age + 0.5 * 80 * age * age; // 加入重力
|
||
}
|
||
|
||
isDead(now) {
|
||
return this.getProgress(now) >= 1;
|
||
}
|
||
}
|
||
|
||
// ==================== 全局状态 ====================
|
||
let hearts = [];
|
||
let sparks = [];
|
||
let totalLikes = 0;
|
||
let animationId = null;
|
||
let lastFrameTime = performance.now();
|
||
let longPressTimer = null;
|
||
let isPressing = false;
|
||
let lastClickTime = 0;
|
||
let rapidClickCount = 0;
|
||
const RAPID_CLICK_WINDOW = 400; // 快速点击窗口(ms)
|
||
const RAPID_CLICK_THRESHOLD = 3; // 触发爆发效果的点击次数
|
||
|
||
// ==================== 创建爱心 ====================
|
||
function spawnHeart(x, y, now) {
|
||
// 限制最大数量
|
||
if (hearts.length >= CONFIG.MAX_HEARTS) {
|
||
// 移除最老的爱心
|
||
const oldest = hearts.shift();
|
||
if (oldest && !oldest.spawnedSparks) {
|
||
spawnSparksForHeart(oldest, now);
|
||
}
|
||
}
|
||
const heart = new HeartParticle(x, y, now || performance.now());
|
||
hearts.push(heart);
|
||
return heart;
|
||
}
|
||
|
||
/**
|
||
* 为爱心生成火花粒子
|
||
*/
|
||
function spawnSparksForHeart(heart, now) {
|
||
if (heart.spawnedSparks) return;
|
||
heart.spawnedSparks = true;
|
||
const cx = heart.getX(now);
|
||
const cy = heart.getY(now);
|
||
const sparkCount = Math.floor(rand(3, 7));
|
||
for (let i = 0; i < sparkCount; i++) {
|
||
if (sparks.length >= CONFIG.MAX_SPARKS) {
|
||
sparks.shift();
|
||
}
|
||
const spark = new SparkParticle(cx, cy, heart.glowColor, now);
|
||
sparks.push(spark);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 爆发式生成多个爱心（快速点击时触发）
|
||
*/
|
||
function burstHearts(x, y, now) {
|
||
const count = Math.floor(rand(2, 5));
|
||
for (let i = 0; i < count; i++) {
|
||
const offsetX = rand(-30, 30);
|
||
const offsetY = rand(-25, 25);
|
||
const heart = spawnHeart(x + offsetX, y + offsetY, now);
|
||
// 爆发爱心有更大的初始速度和偏移
|
||
heart.riseSpeed *= rand(1.1, 1.5);
|
||
heart.driftAmp *= rand(1.2, 1.8);
|
||
heart.peakScale *= rand(0.9, 1.3);
|
||
}
|
||
}
|
||
|
||
// ==================== 更新点赞计数 ====================
|
||
function incrementLikes(count = 1) {
|
||
totalLikes += count;
|
||
likeCountEl.textContent = formatNumber(totalLikes);
|
||
// 弹跳动画
|
||
likeCounter.classList.add('pop');
|
||
setTimeout(() => likeCounter.classList.remove('pop'), 150);
|
||
}
|
||
|
||
function formatNumber(num) {
|
||
if (num >= 10000) {
|
||
const wan = num / 10000;
|
||
return wan >= 10 ? Math.floor(wan) + '万' : wan.toFixed(1) + '万';
|
||
}
|
||
return num.toLocaleString('zh-CN');
|
||
}
|
||
|
||
// ==================== 输入处理 ====================
|
||
function getEventPos(e) {
|
||
if (e.touches && e.touches.length > 0) {
|
||
return { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
||
}
|
||
if (e.changedTouches && e.changedTouches.length > 0) {
|
||
return { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };
|
||
}
|
||
return { x: e.clientX, y: e.clientY };
|
||
}
|
||
|
||
function handlePressStart(e) {
|
||
e.preventDefault();
|
||
const pos = getEventPos(e);
|
||
const now = performance.now();
|
||
isPressing = true;
|
||
|
||
// 检测快速点击
|
||
if (now - lastClickTime < RAPID_CLICK_WINDOW) {
|
||
rapidClickCount++;
|
||
} else {
|
||
rapidClickCount = 1;
|
||
}
|
||
lastClickTime = now;
|
||
|
||
// 触发快速点击爆发
|
||
if (rapidClickCount >= RAPID_CLICK_THRESHOLD) {
|
||
burstHearts(pos.x, pos.y, now);
|
||
incrementLikes(Math.floor(rand(2, 5)));
|
||
rapidClickCount = 0;
|
||
} else {
|
||
spawnHeart(pos.x, pos.y, now);
|
||
incrementLikes(1);
|
||
}
|
||
|
||
// 隐藏提示
|
||
if (hintBar.style.opacity !== '0') {
|
||
hintBar.style.transition = 'opacity 0.4s';
|
||
hintBar.style.opacity = '0';
|
||
}
|
||
|
||
// 长按定时器
|
||
if (longPressTimer) clearInterval(longPressTimer);
|
||
longPressTimer = setInterval(() => {
|
||
if (isPressing && hearts.length < CONFIG.MAX_HEARTS) {
|
||
// 长按时的位置有微小随机偏移
|
||
const offsetX = rand(-20, 20);
|
||
const offsetY = rand(-15, 15);
|
||
spawnHeart(pos.x + offsetX, pos.y + offsetY, performance.now());
|
||
incrementLikes(1);
|
||
}
|
||
}, CONFIG.LONG_PRESS_DELAY);
|
||
}
|
||
|
||
function handlePressMove(e) {
|
||
if (!isPressing) return;
|
||
e.preventDefault();
|
||
// 移动时也偶尔产生爱心（模拟滑动点赞）
|
||
const pos = getEventPos(e);
|
||
if (Math.random() < 0.35 && hearts.length < CONFIG.MAX_HEARTS) {
|
||
spawnHeart(pos.x, pos.y, performance.now());
|
||
incrementLikes(1);
|
||
}
|
||
}
|
||
|
||
function handlePressEnd(e) {
|
||
e.preventDefault();
|
||
isPressing = false;
|
||
rapidClickCount = 0;
|
||
if (longPressTimer) {
|
||
clearInterval(longPressTimer);
|
||
longPressTimer = null;
|
||
}
|
||
}
|
||
|
||
// 桌面端事件
|
||
canvas.addEventListener('mousedown', handlePressStart);
|
||
canvas.addEventListener('mousemove', handlePressMove);
|
||
canvas.addEventListener('mouseup', handlePressEnd);
|
||
canvas.addEventListener('mouseleave', handlePressEnd);
|
||
|
||
// 移动端事件
|
||
canvas.addEventListener('touchstart', handlePressStart, { passive: false });
|
||
canvas.addEventListener('touchmove', handlePressMove, { passive: false });
|
||
canvas.addEventListener('touchend', handlePressEnd);
|
||
canvas.addEventListener('touchcancel', handlePressEnd);
|
||
|
||
// 防止双击缩放
|
||
canvas.addEventListener('dblclick', (e) => e.preventDefault());
|
||
|
||
// ==================== 动画循环 ====================
|
||
function animate(timestamp) {
|
||
const now = timestamp || performance.now();
|
||
const deltaTime = Math.min(now - lastFrameTime, 50); // 限制最大deltaTime避免跳帧
|
||
lastFrameTime = now;
|
||
|
||
// 清除画布
|
||
ctx.clearRect(0, 0, W, H);
|
||
|
||
// 绘制半透明背景拖尾（可选：让画面有微弱的残影效果）
|
||
// 这里直接清除，保持干净
|
||
|
||
// 更新并绘制火花粒子（在爱心下方）
|
||
for (let i = sparks.length - 1; i >= 0; i--) {
|
||
const spark = sparks[i];
|
||
if (spark.isDead(now)) {
|
||
sparks.splice(i, 1);
|
||
continue;
|
||
}
|
||
const sx = spark.getCurrentX(now);
|
||
const sy = spark.getCurrentY(now);
|
||
const opacity = spark.getOpacity(now);
|
||
const size = spark.size * (1 - spark.getProgress(now) * 0.6);
|
||
|
||
ctx.save();
|
||
ctx.globalAlpha = opacity;
|
||
ctx.fillStyle = spark.color;
|
||
ctx.shadowColor = spark.color;
|
||
ctx.shadowBlur = 4;
|
||
ctx.beginPath();
|
||
ctx.arc(sx, sy, size, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.restore();
|
||
}
|
||
|
||
// 更新并绘制爱心
|
||
for (let i = hearts.length - 1; i >= 0; i--) {
|
||
const heart = hearts[i];
|
||
|
||
// 检查是否应该产生火花
|
||
if (heart.shouldSpawnSparks(now)) {
|
||
spawnSparksForHeart(heart, now);
|
||
}
|
||
|
||
// 移除死爱心
|
||
if (heart.isDead(now)) {
|
||
if (!heart.spawnedSparks) {
|
||
spawnSparksForHeart(heart, now);
|
||
}
|
||
hearts.splice(i, 1);
|
||
continue;
|
||
}
|
||
|
||
const cx = heart.getX(now);
|
||
const cy = heart.getY(now);
|
||
const scale = heart.getScale(now);
|
||
const size = heart.baseSize * scale;
|
||
const opacity = heart.getOpacity(now);
|
||
const glowAlpha = heart.getGlowAlpha(now);
|
||
const rotation = heart.getRotation(now);
|
||
|
||
// 检查是否在屏幕内
|
||
if (cy < -size * 2 || cy > H + size * 2 || cx < -size * 2 || cx > W + size * 2) {
|
||
if (!heart.spawnedSparks) {
|
||
spawnSparksForHeart(heart, now);
|
||
}
|
||
hearts.splice(i, 1);
|
||
continue;
|
||
}
|
||
|
||
// 绘制爱心
|
||
ctx.save();
|
||
ctx.translate(cx, cy);
|
||
ctx.rotate(rotation);
|
||
drawGlowHeart(ctx, 0, 0, size, heart.color, heart.glowColor, opacity, glowAlpha);
|
||
ctx.restore();
|
||
}
|
||
|
||
// 清理多余的火花
|
||
while (sparks.length > CONFIG.MAX_SPARKS) {
|
||
sparks.shift();
|
||
}
|
||
|
||
// 如果没有任何粒子且没有按压，逐渐显示提示
|
||
if (hearts.length === 0 && sparks.length === 0 && !isPressing) {
|
||
if (hintBar.style.opacity === '0' && totalLikes > 0) {
|
||
// 延迟显示提示
|
||
setTimeout(() => {
|
||
if (hearts.length === 0 && sparks.length === 0 && !isPressing) {
|
||
hintBar.style.opacity = '1';
|
||
}
|
||
}, 1500);
|
||
}
|
||
}
|
||
|
||
animationId = requestAnimationFrame(animate);
|
||
}
|
||
|
||
// ==================== 启动 ====================
|
||
function start() {
|
||
resizeCanvas();
|
||
lastFrameTime = performance.now();
|
||
if (animationId) cancelAnimationFrame(animationId);
|
||
animationId = requestAnimationFrame(animate);
|
||
}
|
||
|
||
// 初始显示提示
|
||
hintBar.style.opacity = '1';
|
||
|
||
// 自动生成几个爱心作为开场演示
|
||
function autoDemo() {
|
||
if (hearts.length > 0 || isPressing) return;
|
||
const now = performance.now();
|
||
const cx = W / 2 + rand(-40, 40);
|
||
const cy = H * 0.7 + rand(-30, 30);
|
||
spawnHeart(cx, cy, now);
|
||
incrementLikes(1);
|
||
hintBar.style.opacity = '0';
|
||
}
|
||
|
||
// 页面加载后延迟进行自动演示
|
||
setTimeout(() => {
|
||
autoDemo();
|
||
// 再延迟一下做第二次演示
|
||
setTimeout(() => {
|
||
if (hearts.length <= 1 && !isPressing) {
|
||
const now = performance.now();
|
||
const cx = W / 2 + rand(-50, 50);
|
||
const cy = H * 0.65;
|
||
spawnHeart(cx, cy, now);
|
||
spawnHeart(cx + rand(-25, 25), cy + rand(-20, 20), now);
|
||
incrementLikes(2);
|
||
}
|
||
}, 600);
|
||
}, 800);
|
||
|
||
start();
|
||
|
||
// ==================== 暴露API ====================
|
||
console.log('💖 抖音直播点赞爱心效果已就绪');
|
||
console.log(' - 点击屏幕产生爱心');
|
||
console.log(' - 长按持续产生爱心');
|
||
console.log(' - 快速连点触发爱心爆发');
|
||
console.log(' - 当前点赞数：' + totalLikes);
|
||
console.log(' 📐 Canvas尺寸：' + Math.round(W) + '×' + Math.round(H) + ' @' + dpr + 'x');
|
||
|
||
// 暴露方法到全局
|
||
window.heartEffect = {
|
||
spawn: (x, y) => {
|
||
const now = performance.now();
|
||
spawnHeart(x ?? W / 2, y ?? H * 0.6, now);
|
||
incrementLikes(1);
|
||
},
|
||
burst: (x, y) => {
|
||
const now = performance.now();
|
||
burstHearts(x ?? W / 2, y ?? H * 0.6, now);
|
||
incrementLikes(Math.floor(rand(3, 6)));
|
||
},
|
||
getTotalLikes: () => totalLikes,
|
||
resetLikes: () => {
|
||
totalLikes = 0;
|
||
likeCountEl.textContent = '0';
|
||
},
|
||
clear: () => {
|
||
hearts = [];
|
||
sparks = [];
|
||
},
|
||
getStats: () => ({
|
||
hearts: hearts.length,
|
||
sparks: sparks.length,
|
||
totalLikes,
|
||
canvasWidth: Math.round(W),
|
||
canvasHeight: Math.round(H),
|
||
dpr,
|
||
}),
|
||
};
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |