[HTML] 纯文本查看 复制代码
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>404 - 围住小猫 (原版魔性跑动复刻)</title>
<style>
body { margin: 0; background-color: #f7f8fa; display: flex; flex-direction: column; align-items: center; font-family: "Microsoft YaHei", sans-serif; padding-top: 40px; }
.container { background: white; padding: 40px 50px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); text-align: center; width: 600px; }
h1 { font-size: 72px; margin: 0; color: #333; font-weight: bold; }
.msg-top { color: #666; font-size: 16px; margin: 10px 0; }
.status-area { height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10px; }
.status-text { font-size: 18px; color: #1890ff; font-weight: bold; }
.status-text.win { color: #52c41a; }
.status-text.lose { color: #f5222d; }
.restart-hint { font-size: 13px; color: #999; margin-top: 5px; opacity: 0; transition: 0.3s; }
.restart-hint.show { opacity: 1; }
.canvas-box { padding: 5px; display: inline-block; overflow: visible; }
canvas { display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.link-row { margin-top: 25px; display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 13px; color: #666; }
.reset-text { cursor: pointer; color: #333; }
.site-url { color: #999; text-decoration: none; }
.button-group { margin-top: 35px; display: flex; justify-content: center; gap: 20px; }
.pill-btn { padding: 10px 45px; border-radius: 25px; border: none; font-size: 15px; cursor: pointer; transition: 0.3s; font-weight: bold; text-decoration: none; }
.btn-blue { background: #1890ff; color: white; }
.btn-blue:hover { background: #40a9ff; }
.btn-grey { background: #f0f2f5; color: #666; }
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<div class="msg-top">您所访问的页面不存在或者已删除</div>
<div class="status-area">
<div id="status" class="status-text">点击小圆点，围住小猫</div>
<div id="restartHint" class="restart-hint">点击游戏区域重开一局</div>
</div>
<div class="canvas-box">
<canvas id="catCanvas"></canvas>
</div>
<div class="link-row">
<span class="reset-text">重置</span>
<a href="https://www.52pojie.cn" class="site-url">www.52pojie.cn</a>
</div>
<div class="button-group">
<a href="#" class="pill-btn btn-blue">返回首页</a>
<a href="#" class="pill-btn btn-grey">查看版规</a>
</div>
</div>
<script>
const canvas = document.getElementById('catCanvas');
const ctx = canvas.getContext('2d');
const statusText = document.getElementById('status');
const restartHint = document.getElementById('restartHint');
const ROWS = 11, COLS = 11, RADIUS = 18, GAP = 8;
canvas.width = COLS * (RADIUS * 2 + GAP) + RADIUS + 15;
canvas.height = ROWS * (RADIUS * 2 + 4) + 15;
let map = [], catPos = { r: 5, c: 5 }, catDrawPos = { x: 0, y: 0 }, catDir = 1;
let isOver = false, isAnimating = false;
let aniId = null;
function initMap() {
if (aniId) cancelAnimationFrame(aniId);
isOver = false; isAnimating = false;
statusText.innerText = "点击小圆点，围住小猫";
statusText.className = "status-text";
restartHint.className = "restart-hint";
map = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
let count = 12 + Math.floor(Math.random() * 6);
while (count > 0) {
let r = Math.floor(Math.random() * ROWS), c = Math.floor(Math.random() * COLS);
if (map[r][c] === 0 && !(r === 5 && c === 5)) { map[r][c] = 1; count--; }
}
catPos = { r: 5, c: 5 };
catDrawPos = getXY(catPos.r, catPos.c);
startLoop();
}
function getXY(r, c) {
const x = RADIUS + 8 + c * (RADIUS * 2 + GAP) + (r % 2 === 1 ? RADIUS : 0);
const y = RADIUS + 8 + r * (RADIUS * 2 + 4);
return { x, y };
}
// 【核心重构】绘制原版风格的橘猫，并实现魔性弹跳跑
function drawCat(x, y, dir, isRunning) {
if (isNaN(x) || isNaN(y)) return;
ctx.save();
// 1. 计算弹跳幅度
const t = Date.now();
let bobY = 0;
if (isRunning) {
// 跑动时：快速、大幅度的上下颠簸 (魔性核心!)
bobY = Math.sin(t / 30) * 3.5;
} else {
// 静止时：非常缓慢的呼吸感
bobY = Math.sin(t / 400) * 0.8;
}
// 应用位置和弹跳
ctx.translate(x, y + bobY);
ctx.scale(dir, 1); // 水平翻转
// --- 开始绘制卡通橘猫 Sprite ---
const furColor = "#FF8C00"; // 橘色
const bellyColor = "#FFB347"; // 浅橘色肚子
// 身体 (圆润的矩形)
ctx.fillStyle = furColor;
ctx.beginPath();
ctx.roundRect(-14, -8, 28, 16, 8);
ctx.fill();
// 肚子 (浅色斑纹)
ctx.fillStyle = bellyColor;
ctx.beginPath();
ctx.ellipse(0, 2, 10, 5, 0, 0, Math.PI*2);
ctx.fill();
// 头 (圆形)
ctx.fillStyle = furColor;
ctx.beginPath();
ctx.arc(12, -6, 11, 0, Math.PI * 2);
ctx.fill();
// 耳朵 (三角形)
ctx.beginPath(); ctx.moveTo(8, -14); ctx.lineTo(16, -14); ctx.lineTo(12, -24); ctx.fill();
ctx.beginPath(); ctx.moveTo(14, -12); ctx.lineTo(22, -10); ctx.lineTo(19, -20); ctx.fill();
// 眼睛 (眼白和眼珠)
ctx.fillStyle = "#FFF";
ctx.beginPath(); ctx.arc(16, -7, 2.5, 0, Math.PI*2); ctx.fill();
ctx.fillStyle = "#000";
ctx.beginPath(); ctx.arc(17, -7, 1.2, 0, Math.PI*2); ctx.fill();
// 腿 (简单的圆柱体，固定在身体下方，随身体一起弹跳)
ctx.fillStyle = furColor;
// 前腿
ctx.beginPath(); ctx.roundRect(8, 5, 5, 10, 2.5); ctx.fill();
// 后腿
ctx.beginPath(); ctx.roundRect(-12, 5, 5, 10, 2.5); ctx.fill();
// 尾巴
ctx.lineWidth = 4; ctx.strokeStyle = furColor; ctx.lineCap = "round";
ctx.beginPath(); ctx.moveTo(-14, -2); ctx.quadraticCurveTo(-24, -8, -22, -18); ctx.stroke();
ctx.restore();
}
function startLoop() {
const loop = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const { x, y } = getXY(r, c);
ctx.beginPath(); ctx.arc(x, y, RADIUS, 0, Math.PI * 2);
ctx.fillStyle = map[r][c] === 1 ? "#34495e" : "#b3d9ff"; ctx.fill();
}
}
const catBase = getXY(catPos.r, catPos.c);
if (!isAnimating || (isAnimating && !isOver)) {
ctx.beginPath(); ctx.arc(catBase.x, catBase.y, RADIUS, 0, Math.PI*2);
ctx.fillStyle = "#b3d9ff"; ctx.fill();
}
// 持续传递 isRunning 状态给绘图函数
drawCat(catDrawPos.x, catDrawPos.y, catDir, isAnimating && !isOver);
aniId = requestAnimationFrame(loop);
};
loop();
}
function getAdj(r, c) {
let n = [[r, c-1], [r, c+1]];
if (r % 2 === 0) n.push([r-1, c-1], [r-1, c], [r+1, c-1], [r+1, c]);
else n.push([r-1, c], [r-1, c+1], [r+1, c], [r+1, c+1]);
return n.filter(p => p[0]>=0 && p[0]<ROWS && p[1]>=0 && p[1]<COLS);
}
function findPath(startR, startC) {
let queue = [{ r: startR, c: startC, path: [] }], visited = new Set([`${startR},${startC}`]);
while (queue.length > 0) {
let curr = queue.shift();
if (curr.r === 0 || curr.r === ROWS - 1 || curr.c === 0 || curr.c === COLS - 1) return curr.path;
for (let [nr, nc] of getAdj(curr.r, curr.c)) {
if (map[nr][nc] === 0 && !visited.has(`${nr},${nc}`)) {
visited.add(`${nr},${nc}`);
queue.push({ r: nr, c: nc, path: curr.path.concat({ r: nr, c: nc }) });
}
}
}
return null;
}
function catMove() {
if (isOver || isAnimating) return;
let path = findPath(catPos.r, catPos.c);
if (!path) {
isOver = true; statusText.innerText = "猫已经无路可走，你赢了";
statusText.className = "status-text win"; restartHint.className = "restart-hint show";
return;
}
isAnimating = true;
const next = path[0], startXY = { ...catDrawPos }, endXY = getXY(next.r, next.c);
catDir = endXY.x < startXY.x ? -1 : 1;
catPos = next;
let startTime = null;
const duration = 180; // 跑动速度
const aniStep = (time) => {
if (!startTime) startTime = time;
const p = Math.min((time - startTime) / duration, 1);
catDrawPos.x = startXY.x + (endXY.x - startXY.x) * p;
catDrawPos.y = startXY.y + (endXY.y - startXY.y) * p;
if (p < 1) requestAnimationFrame(aniStep);
else {
isAnimating = false;
if (catPos.r === 0 || catPos.r === ROWS-1 || catPos.c === 0 || catPos.c === COLS-1) {
isOver = true; statusText.innerText = "猫已经跑到地图边缘了，你输了";
statusText.className = "status-text lose"; restartHint.className = "restart-hint show";
}
}
};
requestAnimationFrame(aniStep);
}
canvas.addEventListener('click', (e) => {
if (isOver) { initMap(); return; }
if (isAnimating) return;
const rect = canvas.getBoundingClientRect();
const mX = e.clientX - rect.left, mY = e.clientY - rect.top;
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const { x, y } = getXY(r, c);
if (Math.hypot(mX - x, mY - y) < RADIUS - 2) {
if (map[r][c] === 0 && !(r === catPos.r && c === catPos.c)) {
statusText.innerText = `您点击了 (${r}, ${c})`;
map[r][c] = 1; catMove();
}
}
}
}
});
initMap();
</script>
</body>
</html>
[复制链接]
发表于 2026-2-14 07:28
分享到朋友圈
