520 的玫瑰会凋谢，巧克力会融化，
但程序员的浪漫，藏在永不报错的代码里。
521 这天，用几行代码，
向那个懂你 "BUG" 也懂你温柔的 TA，
递上一封专属情书吧～
点击先看看效果！
↓↓↓
①程序员521代码情书
不用谢，献上完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>❤️ 程序员520特别告白 ❤️</title>
<style>
body {
background: #0a192f;
color: #64ffda;
font-family: 'Courier New', monospace;
overflow: hidden;
margin: 0;
position: relative;
}
#container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
}
.heart {
position: absolute;
color: #ff4081;
font-size: 20px;
animation: fall 3s linear infinite;
opacity: 0;
}
@keyframes fall {
0% {
transform: translateY(-10vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(110vh) rotate(360deg);
opacity: 0;
}
}
.code-box {
background: #172a45;
padding: 20px;
border-radius: 5px;
margin: 20px 0;
position: relative;
}
#secret-message {
display: none;
color: #ff79c6;
font-size: 1.2em;
margin-top: 20px;
text-align: center;
}
button {
background: #44475a;
color: #50fa7b;
border: 2px solid #6272a4;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #6272a4;
transform: scale(1.1);
}
.matrix-effect {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
}
</style>
</head>
<body>
<canvas class="matrix-effect" id="matrix"></canvas>
<div id="container">
<div class="code-box">
<h1>💖 520 特别程序 💖</h1>
<pre id="code-animation"></pre>
<button onclick="showLove()">运行表白程序</button>
<div id="secret-message"></div>
</div>
<div class="code-box">
<h3>❤️ 我们的爱情日志 ❤️</h3>
<pre>
while (life.end) {
if (world.contains(you)) {
me.feel = LoveStatus.INFINITY;
me.happiness += you.smile();
}
me.love(you);
}</pre>
</div>
</div>
<script>
// 矩阵数字雨
const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const chars = '01';
const drops = Array(Math.floor(canvas.width/10)).fill(0);
function drawMatrix() {
ctx.fillStyle = 'rgba(0, 16, 32, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#64ffda';
ctx.font = '15px monospace';
drops.forEach((drop, i) => {
const text = chars[Math.floor(Math.random() * chars.length)];
ctx.fillText(text, i*10, drop*10);
drops[i] = (drop*10 > canvas.height || Math.random() > 0.95) ? 0 : drop + 1;
});
}
setInterval(drawMatrix, 70);
// 爱心生成
function createHearts() {
setInterval(() => {
const heart = document.createElement('div');
heart.className = 'heart';
heart.style.left = Math.random() * 100 + 'vw';
heart.textContent = '❤️';
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 3000);
}, 300);
}
// 打字机效果
const messages = [
"正在初始化情感引擎...",
"加载浪漫模块...",
"分析心跳频率...",
"编译爱情代码...",
"准备就绪！点击运行表白程序"
];
let msgIndex = 0;
function typeEffect() {
const elem = document.getElementById('code-animation');
let text = messages[msgIndex];
let i = 0;
function type() {
if (i < text.length) {
elem.innerHTML = text.substring(0, i+1);
i++;
setTimeout(type, 100);
} else {
msgIndex = (msgIndex + 1) % messages.length;
setTimeout(() => {
elem.innerHTML = '';
typeEffect();
}, 2000);
}
}
type();
}
// 显示表白信息
function showLove() {
const secret = document.getElementById('secret-message');
secret.style.display = 'block';
secret.innerHTML = `
<h2>💌 给最特别的你 💌</h2>
<p>你是我生命中的唯一BUG</p>
<p>我愿用余生为你调试</p>
<p>我们的爱情永远不会404</p>
<p>❤️ 我会永远爱你 ❤️</p>
<button onclick="location.reload()">重新表白</button>
`;
createHearts();
}
// 初始化
typeEffect();
document.body.onclick = () => new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU').play();
</script>
</body>
</html>
②【告白成功】版，看看哪个更能俘获TA的心吧！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- ...（保持其他head内容不变）... -->
</head>
<body>
<div id="game-container">
<!-- ...（保持游戏容器内容不变）... -->
<div id="end-game">
<h1 class="glow">💖 告白成功！ 💖</h1>
<!-- 修改按钮跳转链接 -->
<button onclick="window.location.href='https://jsj.top/f/o38ijj'">前往我们的秘密基地</button>
<p>(修改上述按钮的URL为你想要的地址)</p>
</div>
</div>
<script>
// 游戏配置（修改跳转地址）
const config = {
totalHearts: 10,
gameTime: 60,
playerSpeed: 8,
jumpUrl: 'https://jsj.top/f/o38ijj' // 已修改此处
};
// ...（保持其他JavaScript代码不变）...
// 游戏结束（使用配置的跳转地址）
function endGame(success) {
isGameOver = true;
clearInterval(timer);
document.getElementById('end-game').style.display = 'block';
document.querySelector('#end-game button').onclick = () => window.location.href = config.jumpUrl;
if (success) {
document.getElementById('end-game').innerHTML = `
<h1 class="glow">💌 解锁成功！ 💌</h1>
<pre style="text-align:left">
function ourLove() {
while (true) {
you.accept(myHeart);
we.build(life);
our.love++;
}
}
</pre>
<!-- 使用配置的跳转地址 -->
<button onclick="window.location.href='${config.jumpUrl}'">开启我们的未来</button>
`;
}
}
// ...（保持其他初始化代码不变）...
</script>
</body>
</html>
