分类 🧑‍💻 代码下的文章 - Feng的小屋

找到 7 篇与 🧑‍💻 代码相关的结果

趣味web在线小游戏-五子棋图片探索 HTML、CSS 和 JavaScript 实现的五子棋游戏用 HTML、CSS 和 JavaScript 实现各种有趣的小游戏是一种既实用又有趣的学习方式。今天，我们就来深入探索一个用这三种技术打造的五子棋小游戏 {iframe src="https://code.juejin.cn/pen/7530293525473132596" height="70vh"/} 整体项目概述这个五子棋游戏是一个网页版应用，用户可以在浏览器中直接打开并进行对战。项目的整体结构清晰，由 HTML 构建页面结构，CSS 负责样式美化，JavaScript 实现游戏的核心逻辑。通过三者的协同工作，为玩家提供了一个流畅、有趣的游戏体验。 HTML：搭建游戏的骨架 HTML 文件为游戏搭建了基本的框架，包含了游戏的标题、控制按钮、棋盘区域、游戏信息展示和结果显示等部分。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>五子棋游戏</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">  </head> <body> <div class="max-w-5xl w-full bg-white rounded-2xl shadow-xl overflow-hidden">  <header class="bg-primary text-white p-4 text-center"> <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold tracking-wide">五子棋</h1> <p class="text-amber-100 mt-1">落子连五获胜</p> </header>  <main class="p-6 md:p-8">  <div class="flex flex-col lg:flex-row justify-between items-center mb-6 gap-4">  <div class="flex flex-col sm:flex-row items-center gap-3 w-full lg:w-auto"> <div class="flex items-center gap-3"> <div id="current-player" class="w-6 h-6 rounded-full piece-black piece-shadow"></div> <span class="text-lg font-medium">当前玩家: <span id="player-text" class="text-black font-bold">黑棋</span></span> </div> <div class="flex items-center gap-3 mt-2 sm:mt-0"> <span class="text-lg font-medium">游戏时间: <span id="timer" class="text-primary font-bold">00:00</span></span> </div> </div>  <div class="flex gap-3 w-full lg:w-auto justify-center lg:justify-end"> <button id="restart-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all flex items-center gap-2"> <i class="fa fa-refresh"></i> <span>重新开始</span> </button> <button id="undo-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition-all flex items-center gap-2"> <i class="fa fa-undo"></i> <span>悔棋</span> </button> <button id="hint-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-all flex items-center gap-2"> <i class="fa fa-lightbulb-o"></i> <span>提示</span> </button> </div> </div>  <div class="flex flex-col lg:flex-row gap-6">  <div class="relative mx-auto aspect-square max-w-md w-full bg-board rounded-lg board-shadow overflow-hidden grid-pattern" style="background-size: calc(100% / 14) calc(100% / 14);"> <div id="board" class="absolute inset-0 cursor-pointer"></div>  <div class="absolute w-2 h-2 bg-dark rounded-full" style="top: calc(3/14 * 100%); left: calc(3/14 * 100%);"></div>  </div>  <div class="w-full lg:w-80">  <div class="bg-gray-50 rounded-xl p-4 mb-4"> <h3 class="text-lg font-semibold mb-3 text-gray-800">游戏统计</h3> <div class="grid grid-cols-2 gap-2"> <div class="bg-white p-3 rounded-lg shadow-sm"> <div class="text-sm text-gray-500">黑棋胜场</div> <div id="black-wins" class="text-xl font-bold text-black">0</div> </div>  </div> </div>  <div class="bg-gray-50 rounded-xl p-4 h-64 overflow-hidden"> <div class="flex justify-between items-center mb-3"> <h3 class="text-lg font-semibold text-gray-800">走棋历史</h3> <button id="clear-history-btn" class="text-xs text-gray-500 hover:text-primary"> <i class="fa fa-trash-o"></i> 清空 </button> </div> <div id="move-history" class="overflow-y-auto h-48 text-sm space-y-1"> <div class="text-gray-500 italic text-center">游戏尚未开始</div> </div> </div> </div> </div>  <div id="result" class="hidden mt-6 text-center p-4 rounded-lg bg-green-100 border border-green-300"> <h2 id="result-text" class="text-xl font-bold text-green-800"></h2> <div class="mt-2 text-sm text-gray-600"> 用时: <span id="game-time">00:00</span> | 步数: <span id="move-count">0</span> </div> <button id="new-game-btn" class="mt-3 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-all"> 开始新游戏 </button> </div> </main>  <footer class="bg-gray-100 text-gray-600 p-4 text-center text-sm"> <p>© 2025 五子棋游戏 | 简约而不简单</p> </footer> </div> <script> // JavaScript 代码 </script> </body> </html>从这段代码中可以看出，HTML 页面使用了 Tailwind CSS 框架来快速实现样式布局，同时引入了 Font Awesome 图标库来增强视觉效果。页面结构层次分明，将游戏的各个部分清晰地展示出来，方便用户操作和查看信息。 CSS：美化游戏的外观 CSS 部分主要负责游戏界面的样式设计，通过自定义样式和 Tailwind CSS 的扩展，为游戏增添了丰富的视觉效果。 @layer utilities { .board-shadow { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .piece-shadow { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } .piece-white { background: radial-gradient(circle at 35% 35%, #ffffff, #e0e0e0); } .piece-black { background: radial-gradient(circle at 35% 35%, #505050, #000000); } .grid-pattern { background-image: linear-gradient(#8B4513 1px, transparent 1px), linear-gradient(90deg, #8B4513 1px, transparent 1px); } .animate-fadeIn { animation: fadeIn 0.5s ease-in-out; } .hover-indicator { position: absolute; width: 6px; height: 6px; border-radius: 50%; background-color: rgba(255, 215, 0, 0.7); opacity: 0; transition: opacity 0.2s ease; } .game-history-item { padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s; } .game-history-item:hover { background-color: rgba(0, 0, 0, 0.05); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }这里定义了棋盘的阴影效果、棋子的渐变背景、网格图案以及动画效果等。例如，piece-white 和 piece-black 类分别为白棋和黑棋设置了不同的径向渐变背景，使其看起来更加立体。而 animate-fadeIn 动画则为游戏结果的显示添加了淡入效果，提升了用户体验。 JavaScript：实现游戏的核心逻辑 JavaScript 是这个五子棋游戏的核心，它负责处理游戏的各种交互和逻辑判断。游戏状态管理 // 游戏常量 const BOARD_SIZE = 15; const CELL_SIZE = 100 / (BOARD_SIZE - 1); // 百分比单位 const WINNING_LENGTH = 5; // 游戏状态 let currentPlayer = 'black'; let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null)); let gameActive = true; let moveHistory = []; let gameStartTime = null; let gameTimer = null; let hintTimeout = null; let hintPosition = null; // 游戏统计 let stats = { blackWins: 0, whiteWins: 0, totalGames: 0, totalTime: 0 };这里定义了游戏的常量和状态变量，包括棋盘大小、获胜条件、当前玩家、游戏棋盘状态、走棋历史等。同时，还使用 stats 对象来记录游戏的统计信息，如黑棋和白棋的胜场数、总对局数和总游戏时间。初始化棋盘 function initializeBoard() { boardElement.innerHTML = ''; // 创建交叉点 for (let row = 0; row < BOARD_SIZE; row++) { for (let col = 0; col < BOARD_SIZE; col++) { const intersection = document.createElement('div'); intersection.className = 'absolute w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 hover:bg-black/5 -translate-x-1/2 -translate-y-1/2'; intersection.style.left = `${col * CELL_SIZE}%`; intersection.style.top = `${row * CELL_SIZE}%`; intersection.dataset.row = row; intersection.dataset.col = col; // 添加鼠标悬停指示器 const hoverIndicator = document.createElement('div'); hoverIndicator.className = 'hover-indicator'; intersection.appendChild(hoverIndicator); // 添加点击事件 intersection.addEventListener('click', () => handleIntersectionClick(row, col)); // 添加鼠标进入事件 intersection.addEventListener('mouseenter', () => { if (gameActive && gameBoard[row][col] === null) { hoverIndicator.style.opacity = '1'; } }); // 添加鼠标离开事件 intersection.addEventListener('mouseleave', () => { hoverIndicator.style.opacity = '0'; }); boardElement.appendChild(intersection); } } }initializeBoard 函数用于创建棋盘的交叉点，并为每个交叉点添加鼠标悬停指示器和点击事件。当鼠标悬停在空闲的交叉点上时，指示器会显示出来，提示玩家可以落子。处理落子事件 function handleIntersectionClick(row, col) { // 检查是否可以落子 if (gameBoard[row][col] !== null || !gameActive) { return; } // 清除提示 clearHint(); // 记录历史 moveHistory.push({row, col, player: currentPlayer}); // 更新走棋历史显示 addToMoveHistory(row, col, currentPlayer); // 落子 placePiece(row, col, currentPlayer); // 检查是否获胜 if (checkWin(row, col, currentPlayer)) { gameActive = false; stopTimer(); // 更新统计 if (currentPlayer === 'black') { stats.blackWins++; } else { stats.whiteWins++; } stats.totalGames++; stats.totalTime += getElapsedTime(); saveStats(); updateStatsDisplay(); showResult(`${currentPlayer === 'black' ? '黑棋' : '白棋'}获胜!`); return; } // 检查是否平局 if (checkDraw()) { gameActive = false; stopTimer(); showResult('平局!'); return; } // 切换玩家 currentPlayer = currentPlayer === 'black' ? 'white' : 'black'; updatePlayerIndicator(); }handleIntersectionClick 函数处理玩家点击交叉点的事件。它会先检查该位置是否可以落子，然后记录走棋历史，放置棋子，并检查是否获胜或平局。如果游戏结束，会更新统计信息并显示结果；否则，切换玩家继续游戏。检查获胜和平局 function checkWin(row, col, player) { const directions = [ [0, 1], // 水平 [1, 0], // 垂直 [1, 1], // 对角线 [1, -1] // 反对角线 ]; for (const [dx, dy] of directions) { let count = 1; // 当前位置已经有一个棋子 // 正向检查 for (let i = 1; i < WINNING_LENGTH; i++) { const newRow = row + i * dx; const newCol = col + i * dy; if ( newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE && gameBoard[newRow][newCol] === player ) { count++; } else { break; } } // 反向检查 for (let i = 1; i < WINNING_LENGTH; i++) { const newRow = row - i * dx; const newCol = col - i * dy; if ( newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE && gameBoard[newRow][newCol] === player ) { count++; } else { break; } } // 检查是否连成五子 if (count >= WINNING_LENGTH) { // 高亮显示获胜的棋子 highlightWinningPieces(row, col, dx, dy, count); return true; } } return false; } function checkDraw() { for (let row = 0; row < BOARD_SIZE; row++) { for (let col = 0; col < BOARD_SIZE; col++) { if (gameBoard[row][col] === null) { return false; // 还有空位，不是平局 } } } return true; // 棋盘已满，平局 }checkWin 函数通过检查四个方向（水平、垂直、对角线和反对角线）上是否有连续五个相同颜色的棋子来判断是否获胜。如果获胜，会调用 highlightWinningPieces 函数高亮显示获胜的棋子。checkDraw 函数则遍历整个棋盘，检查是否还有空位，如果没有则判定为平局。总结通过这个五子棋游戏项目，我们可以看到 HTML、CSS 和 JavaScript 是如何协同工作来创建一个完整的 Web 应用的。HTML 提供了页面的结构，CSS 美化了界面，而 JavaScript 实现了游戏的核心逻辑和交互功能。这个项目不仅适合初学者学习 Web 开发的基础知识，还可以作为一个基础，进一步扩展和优化，例如添加 AI 对手、在线对战等功能。

🧑‍💻 代码

Feng 7月23日

0 15 3

趣味web在线小游戏-贪吃蛇🐍

趣味web在线小游戏-贪吃蛇🐍 图片 web贪吃蛇小游戏介绍一、项目概述 {iframe src="https://code.juejin.cn/pen/7529911569736532006" height="100vh"/} “贪吃蛇”是一个简单而有趣的项目。它基于 HTML、CSS 和 JavaScript 构建，运用了 Tailwind CSS 进行样式设计，为玩家提供了一个经典贪吃蛇游戏的现代版本。玩家通过控制蛇的移动方向，吃掉随机生成的食物，使蛇不断变长，同时要避免撞到墙壁或自己的身体。游戏还设有难度调整功能，增加了游戏的趣味性和挑战性。二、项目结构与技术栈 1. HTML 结构 HTML 文件 snake-game.html 是整个项目的基础，它负责搭建游戏的页面结构。以下是部分关键 HTML 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简约贪吃蛇</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">  </head> <body class="bg-darker min-h-screen flex flex-col items-center justify-center p-4 font-game text-light overflow-x-hidden">  <div class="fixed inset-0 -z-10 opacity-10"> <div class="absolute top-10 left-10 w-64 h-64 rounded-full bg-primary/30 blur-3xl"></div> <div class="absolute bottom-10 right-10 w-80 h-80 rounded-full bg-secondary/30 blur-3xl"></div> <div class="absolute top-1/2 left-1/4 w-40 h-40 rounded-full bg-accent/30 blur-3xl"></div> </div> <div class="w-full max-w-3xl flex flex-col items-center"> <header class="w-full text-center mb-8 relative"> <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-primary mb-2 text-shadow text-glow tracking-tight"> <span class="inline-block transform hover:scale-105 transition-transform duration-300">简</span> <span class="inline-block transform hover:scale-105 transition-transform duration-300">约</span> <span class="inline-block transform hover:scale-105 transition-transform duration-300">贪</span> <span class="inline-block transform hover:scale-105 transition-transform duration-300">吃</span> <span class="inline-block transform hover:scale-105 transition-transform duration-300">蛇</span> </h1> <p class="text-light/70 text-[clamp(1rem,2vw,1.2rem)] max-w-2xl mx-auto"> 控制蛇移动，吃掉食物，避开墙壁和自己的身体，挑战最高分！ </p> </header> <main class="w-full flex flex-col md:flex-row gap-8"> <div class="w-full md:w-2/3 relative"> <div class="game-gradient rounded-2xl shadow-2xl p-3 mb-6 relative overflow-hidden"> <canvas id="gameCanvas" class="w-full aspect-square rounded-xl bg-dark/70"></canvas> </div> <div class="flex justify-center gap-4 mt-4"> <button id="startBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg flex items-center justify-center button-pulse"> <i class="fa fa-play mr-2"></i> 开始游戏 </button> <button id="pauseBtn" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg flex items-center justify-center" disabled> <i class="fa fa-pause mr-2"></i> 暂停游戏 </button> <button id="resetBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-medium py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg flex items-center justify-center"> <i class="fa fa-refresh mr-2"></i> 重置游戏 </button> </div> </div> <div class="w-full md:w-1/3 glass-effect rounded-2xl p-6 shadow-xl border border-white/10"> <div class="mb-6"> <h2 class="text-2xl font-bold text-primary mb-3 flex items-center"> <i class="fa fa-trophy mr-3 text-secondary"></i> 游戏数据 </h2> <div class="space-y-4"> <div class="bg-dark/50 rounded-xl p-4 flex justify-between items-center hover-lift"> <span class="text-light/80 flex items-center"> <i class="fa fa-star text-yellow-400 mr-2"></i> 当前得分: </span> <span id="score" class="text-3xl font-bold text-secondary">0</span> </div> <div class="bg-dark/50 rounded-xl p-4 flex justify-between items-center hover-lift"> <span class="text-light/80 flex items-center"> <i class="fa fa-crown text-yellow-500 mr-2"></i> 最高分: </span> <span id="highScore" class="text-3xl font-bold text-primary">0</span> </div> <div class="bg-dark/50 rounded-xl p-4 flex justify-between items-center hover-lift"> <span class="text-light/80 flex items-center"> <i class="fa fa-bolt text-accent mr-2"></i> 蛇长: </span> <span id="snakeLength" class="text-3xl font-bold text-accent">3</span> </div> </div> </div> <div class="mb-6"> <h2 class="text-2xl font-bold text-primary mb-3 flex items-center"> <i class="fa fa-info-circle mr-3 text-secondary"></i> 游戏说明 </h2> <ul class="text-light/80 space-y-3"> <li class="flex items-start"> <i class="fa fa-keyboard-o text-primary mt-1 mr-3"></i> <span>使用方向键或WASD控制蛇的移动</span> </li> <li class="flex items-start"> <i class="fa fa-apple text-primary mt-1 mr-3"></i> <span>吃到食物增加分数和蛇的长度</span> </li> <li class="flex items-start"> <i class="fa fa-ban text-primary mt-1 mr-3"></i> <span>撞到墙壁或自己的身体游戏结束</span> </li> <li class="flex items-start"> <i class="fa fa-pause text-primary mt-1 mr-3"></i> <span>游戏暂停时可以调整难度</span> </li> </ul> </div> <div> <h2 class="text-2xl font-bold text-primary mb-3 flex items-center"> <i class="fa fa-bolt mr-3 text-secondary"></i> 游戏难度 </h2> <div class="bg-dark/50 rounded-xl p-4 hover-lift"> <div class="flex items-center justify-between mb-3"> <span class="text-light/80">速度级别:</span> <div class="flex items-center"> <button id="speedDown" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-l-lg transition-all duration-300"> <i class="fa fa-minus"></i> </button> <span id="speedValue" class="bg-dark/80 px-6 py-3 text-lg font-medium">中等</span> <button id="speedUp" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-r-lg transition-all duration-300"> <i class="fa fa-plus"></i> </button> </div> </div> <div class="w-full bg-dark/70 rounded-full h-2.5"> <div id="speedBar" class="bg-gradient-to-r from-green-400 via-yellow-400 to-red-500 h-2.5 rounded-full" style="width: 50%"></div> </div> </div> </div> </div> </main> <footer class="w-full mt-10 text-center text-light/50 text-sm"> <p>© 2025 简约贪吃蛇 | 使用键盘或屏幕按钮控制 | 享受游戏乐趣</p> </footer> </div> <script> // JavaScript 代码 </script> </body> </html>这段代码创建了游戏的整体布局，包括标题、游戏画布、控制按钮、游戏数据显示区、游戏说明和难度调整区等。使用了 Tailwind CSS 类名进行样式设计，使页面具有响应式布局和美观的外观。 2. CSS 样式通过 Tailwind CSS 和自定义样式，为游戏界面添加了丰富的视觉效果。例如，使用渐变背景、阴影、动画等： <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.25); } .text-glow { text-shadow: 0 0 10px rgba(76, 175, 80, 0.5); } .game-gradient { background: linear-gradient(135deg, #2C3E50 0%, #1A202C 100%); } .button-pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } } .food-pulse { animation: food-pulse 1.5s infinite; } @keyframes food-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 152, 0, 0.5); } 50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 152, 0, 0.7); } } .snake-head { border-radius: 4px; } .snake-body { border-radius: 3px; } .glass-effect { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } } </style>这些样式规则定义了游戏界面的各种效果，如按钮的脉冲动画、食物的缩放动画、玻璃效果等，增强了游戏的视觉吸引力。 3. JavaScript 逻辑 JavaScript 代码负责游戏的核心逻辑，包括蛇的移动、食物的生成、碰撞检测、游戏状态管理等。以下是部分关键 JavaScript 代码及其解释：初始化游戏 function initGame() { // 清空蛇和食物 snake = []; food = {}; specialFood = null; // 设置蛇的初始位置和方向 const centerX = Math.floor((canvas.width / 2) / gridSize) * gridSize; const centerY = Math.floor((canvas.height / 2) / gridSize) * gridSize; snake = [ {x: centerX, y: centerY}, {x: centerX - gridSize, y: centerY}, {x: centerX - gridSize * 2, y: centerY} ]; direction = 'right'; nextDirection = 'right'; score = 0; scoreElement.textContent = score; updateSnakeLength(); // 生成第一个食物 generateFood(); // 绘制初始状态 draw(); }initGame 函数用于初始化游戏状态，包括清空蛇和食物数组，设置蛇的初始位置和方向，重置分数，生成第一个食物，并绘制游戏的初始状态。移动蛇 function moveSnake() { // 更新方向 direction = nextDirection; // 获取蛇头位置 const head = {x: snake[0].x, y: snake[0].y}; // 根据方向移动蛇头 switch (direction) { case 'up': head.y -= gridSize; break; case 'down': head.y += gridSize; break; case 'left': head.x -= gridSize; break; case 'right': head.x += gridSize; break; } // 检查是否吃到普通食物 let ateFood = false; if (head.x === food.x && head.y === food.y) { // 增加分数 score += 10; scoreElement.textContent = score; // 更新最高分 if (score > highScore) { highScore = score; highScoreElement.textContent = highScore; localStorage.setItem('snakeHighScore', highScore); } // 生成新食物 generateFood(); ateFood = true; } // 检查是否吃到特殊食物 if (specialFood && head.x === specialFood.x && head.y === specialFood.y) { // 增加更多分数 score += 50; scoreElement.textContent = score; // 更新最高分 if (score > highScore) { highScore = score; highScoreElement.textContent = highScore; localStorage.setItem('snakeHighScore', highScore); } // 移除特殊食物 specialFood = null; if (specialFoodTimer) { clearTimeout(specialFoodTimer); specialFoodTimer = null; } ateFood = true; } if (!ateFood) { // 如果没吃到食物，移除尾部 snake.pop(); } else { // 吃到食物后更新蛇长度 updateSnakeLength(); } // 检查碰撞 if (checkCollision(head)) { gameOver(); return; } // 添加新头部 snake.unshift(head); // 绘制游戏 draw(); }moveSnake 函数是游戏的核心逻辑之一，它根据当前方向移动蛇头，检查蛇是否吃到食物（普通食物或特殊食物），如果吃到食物则增加分数、更新最高分、生成新食物并更新蛇的长度；如果没吃到食物则移除蛇的尾部。最后检查蛇是否发生碰撞，如果碰撞则游戏结束，否则添加新的蛇头并重新绘制游戏。检查碰撞 function checkCollision(head) { // 检查是否碰到墙壁 if ( head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height ) { return true; } // 检查是否碰到自己 for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { return true; } } return false; }checkCollision 函数用于检查蛇头是否碰到墙壁或自己的身体，如果碰到则返回 true，表示游戏结束。三、游戏特色 1. 特殊食物机制游戏中有 20% 的概率生成特殊食物，特殊食物会在 10 秒后消失。吃到特殊食物可以获得 50 分，比普通食物的 10 分更多，增加了游戏的趣味性和挑战性。 2. 难度调整功能玩家可以通过点击“+”和“-”按钮来调整游戏速度，速度级别分为“很慢”、“慢”、“中等”、“快”、“很快”。游戏速度的调整会实时更新速度条的显示，并在游戏运行时动态更新游戏循环的间隔时间。 3. 本地存储最高分游戏使用 localStorage 来保存玩家的最高分，即使关闭浏览器或刷新页面，最高分也不会丢失，激励玩家不断挑战自己的记录。四、总结 “贪吃蛇”小游戏是一个简单而有趣的项目，它通过 HTML、CSS 和 JavaScript 实现了经典贪吃蛇游戏的核心功能，并添加了一些现代的视觉效果和特色机制。对于初学者来说，这个项目是一个很好的学习示例，可以帮助他们了解 HTML、CSS、JavaScript 的基本用法，以及如何使用 Canvas 元素进行图形绘制和动画实现。同时，项目的代码结构清晰，易于理解和扩展，开发者可以根据自己的需求添加更多的功能和特色，如不同的游戏模式、关卡设计等。

🧑‍💻 代码

Feng 7月22日

0 16 2

趣味web在线小游戏-扫雷💣 图片扫雷游戏：一个基于 HTML、CSS 和 JavaScript 的网页小游戏引言扫雷游戏作为一款经典的单机游戏，以其简单易上手却又充满挑战的玩法深受玩家喜爱。今天要介绍的扫雷游戏是一个基于 HTML、CSS 和 JavaScript 构建的网页小游戏，它不仅保留了传统扫雷游戏的核心玩法，还添加了一些新的特性和交互效果，让玩家有更好的游戏体验。 {iframe src="https://code.juejin.cn/pen/7524327272602402816" height="90vh"/} 项目概述这个扫雷游戏项目使用了 Tailwind CSS 进行样式设计，利用 Font Awesome 图标库添加了一些美观的图标。游戏界面简洁美观，响应式设计使得游戏在不同设备上都能有良好的显示效果。主要特性多种难度选择：提供初级、中级和高级三种难度，满足不同水平玩家的需求。玩家可以根据自己的喜好随时切换难度。主题切换：支持黑暗模式和明亮模式的切换，让玩家可以根据自己的环境和喜好调整界面风格。游戏统计：记录游戏次数、胜率和最佳时间，激励玩家不断挑战自我，提高游戏成绩。动画效果：在游戏过程中添加了许多动画效果，如点击单元格、标记地雷、游戏结束等，增强了游戏的趣味性和交互性。代码结构 HTML 部分 HTML 文件定义了游戏的整体结构，包括游戏标题、状态栏、难度选择、游戏区域、游戏统计和帮助模态框等。使用了 Tailwind CSS 的类名来快速构建界面，同时引入了 Font Awesome 图标库来显示图标。 CSS 部分通过 Tailwind CSS 的配置文件，自定义了一些颜色、字体和阴影效果。同时，使用自定义工具类来控制单元格的大小、游戏容器的宽度等。 JavaScript 部分 JavaScript 代码实现了游戏的核心逻辑，包括游戏初始化、棋盘创建、地雷生成、单元格点击处理、游戏结束判断等。主要函数 initGame()：初始化游戏状态，重置计时器和统计信息，创建游戏板。 createBoard()：根据游戏配置创建游戏板，为每个单元格添加点击事件。 handleCellClick()：处理单元格的左键点击事件，第一次点击时生成地雷，揭示单元格，检查游戏是否结束。 handleRightClick()：处理单元格的右键点击事件，标记或取消标记地雷，检查游戏是否结束。 generateMines()：随机生成地雷，确保第一次点击的周围没有地雷。 calculateNeighbors()：计算每个单元格周围的地雷数量。 revealCell()：揭示单元格，如果周围没有地雷，则递归揭示周围的单元格。 gameOver()：处理游戏结束的逻辑，更新游戏状态图标和统计信息。交互体验游戏的交互体验非常好，通过鼠标点击和右键点击来操作，同时支持键盘快捷键。按下空格键可以重置游戏，按下 H 键可以打开帮助模态框。小结这个扫雷游戏用 HTML、CSS 和 JavaScript 构建，以 Tailwind CSS 设计样式，借助 Font Awesome 图标库增添美观度。

🧑‍💻 代码

Feng 7月21日

2 11 2

彩虹屁猫猫Loading动画图片在网页设计的世界里，Loading 动画起着至关重要的作用。它不仅能够在页面加载时为用户提供反馈，减少等待的焦虑感，还能为网站增添独特的视觉魅力。代码演示 {iframe src="https://code.juejin.cn/pen/7523837884047048719" height="50vh"/} HTML 结构 HTML 部分负责搭建动画的基本结构，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>彩虹屁猫猫 Loading 动画</title> <style> /* 这里是 CSS 样式代码 */ </style> </head> <body> <div id="animation-container"> <svg class="animation-rainbow-cat" viewbox="0 0 70 20"> <defs> <linearGradient id="rainbow-colors" x1="0.5" x2="0.5" y2="1"> <stop class="rainbow-color1" offset="0" /> <stop class="rainbow-color1" offset="0.167" /> <stop class="rainbow-color2" offset="0.167" /> <stop class="rainbow-color2" offset="0.335" /> <stop class="rainbow-color3" offset="0.335" /> <stop class="rainbow-color3" offset="0.5" /> <stop class="rainbow-color4" offset="0.5" /> <stop class="rainbow-color4" offset="0.669" /> <stop class="rainbow-color5" offset="0.669" /> <stop class="rainbow-color5" offset="0.833" /> <stop class="rainbow-color6" offset="0.833" /> <stop class="rainbow-color6" offset="1" /> </linearGradient> </defs> <g class="rainbow-cat"> <g class="rainbow"> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> </g> <g class="cat"> <g class="cat-tail" transform="translate(40, 5.5)"> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> </g> <g class="cat-legs" transform="translate(43, 5.5)"> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> </g> <g class="cat-bread" transform="translate(43, 5.5)"> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> </g> <g class="cat-head" transform="translate(43, 5.5)"> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> <rect /> </g> </g> </g> </svg> </div> </body> </html>在这个 HTML 代码中，可以看到以下几个关键部分： <svg> 元素：SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。在这里，我们使用 <svg> 元素来创建动画的画布，并通过 viewbox 属性设置画布的可视区域。 <linearGradient> 元素：用于创建线性渐变，这里定义了彩虹的颜色渐变效果。 <g> 元素：用于将多个图形元素组合在一起，方便对它们进行统一的操作和样式设置。在这个动画中，我们使用 <g> 元素将彩虹、猫猫的尾巴、腿、面包和头部等部分分别组合起来。 CSS 样式和动画效果 CSS 部分负责为动画添加样式和实现动画效果，代码如下： body { background-color: black; height: 100vh; display: flex; justify-content: center; align-items: center; } svg { mask-image: linear-gradient(to left, #000000 70%, #ffffff00 84%); -webkit-mask-image: linear-gradient( to left, #000000 70%, #ffffff00 84% ); width: 400px; } /* 彩虹部分样式和动画 */ .animation-rainbow-cat .rainbow-color1 { stop-color: #fc0101; } .animation-rainbow-cat .rainbow-color2 { stop-color: #fe9900; } /* 其他彩虹颜色样式... */ .animation-rainbow-cat .rainbow-cat .rainbow rect { width: 5px; stroke: transparent; fill: url(#rainbow-colors); } .animation-rainbow-cat .rainbow-cat .rainbow rect:nth-of-type(1) { height: 7px; transform: translate(40px, 6px); animation: rainbow-boost-1 0.2s linear 0.2s infinite alternate; } @keyframes rainbow-boost-1 { to { transform: translate(40px, 7px); } } /* 其他彩虹矩形的动画... */ /* 猫猫各部分样式和动画 */ /* 猫猫面包部分 */ .animation-rainbow-cat .rainbow-cat .cat .cat-bread rect:nth-of-type(1) { width: 9px; height: 9px; fill: black; transform: translate(1px, 0px); } /* 其他猫猫面包矩形样式... */ /* 猫猫尾巴部分 */ .animation-rainbow-cat .rainbow-cat .cat .cat-tail rect:nth-of-type(1) { width: 0.5px; height: 1.5px; fill: black; transform: translate(2.5px, 5.5px); } /* 其他猫猫尾巴矩形样式和动画... */ /* 猫猫头部部分 */ .animation-rainbow-cat .rainbow-cat .cat .cat-head rect:nth-of-type(1) { width: 8px; height: 2.5px; fill: black; transform: translate(5px, 5px); } /* 其他猫猫头部矩形样式和动画... */ /* 猫猫腿部部分 */ .animation-rainbow-cat .rainbow-cat .cat .cat-legs rect:nth-of-type(1) { width: 2px; height: 1.5px; fill: black; transform: translate(0px, 7.5px); } /* 其他猫猫腿部矩形样式和动画... */ /* 整个猫猫的动画 */ .animation-rainbow-cat .rainbow-cat .cat { animation: cat-move 0.35s linear 0.2s infinite; } @keyframes cat-move { 50% { transform: translate(0px, 0px); } 50% { transform: translate(0.3px, -0.5px); } 100% { transform: translate(1px, 0px); } } .animation-rainbow-cat .rainbow-cat .cat .cat-head { animation: cat-head-move 0.35s cubic-bezier(0.95, -0.11, 0.56, 0.67) 0.2s infinite; } @keyframes cat-head-move { 0% { transform: translate(43.5px, 5px); } 50% { transform: translate(44px, 5.5px); } 100% { transform: translate(43px, 5.5px); } } /* 其他部分的动画... */在 CSS 代码中，可以看到以下几个重要的方面：背景和布局：通过 body 元素的样式设置，将背景颜色设置为黑色，并使用 flexbox 布局将动画容器居中显示。 SVG 遮罩效果：使用 mask-image 和 -webkit-mask-image 属性为 SVG 元素添加遮罩效果，使动画看起来更加生动。颜色设置：通过 stop-color 属性为彩虹的每个颜色段设置不同的颜色。动画效果：使用 @keyframes 规则定义各种动画，如彩虹的上下移动、猫猫的整体移动、头部的摆动、腿部的运动等。通过 animation 属性将这些动画应用到相应的元素上。

🧑‍💻 代码

Feng 7月6日

2 25 1

3D电子数字时钟项目分享图片 HTML与CSS打造的3D数字时钟在网页开发的世界里，HTML 和 CSS 是构建网页基础与样式的强大工具。今天，我们要深入剖析一个由 HTML 和 CSS 实现的极具创意的项目，它包含了 3D 数字和方块动画效果，为网页增添了独特的视觉魅力。代码演示 {iframe src="https://code.juejin.cn/pen/7523518587215020041" height="50vh"/} 项目概述这个项目主要由一个包含多个数字容器和一个表面容器组成，表面容器内有众多方块元素。通过精心设计的 CSS 样式和动画，实现了 3D 效果和动态展示。整体项目的代码包含在 runoob - test.html 文件中，它充分展示了 HTML 和 CSS 在创建复杂视觉效果方面的能力。 HTML 结构分析数字容器 <div class="container"> <div class="digit"></div> <div class="digit"></div> <div class="digit"></div> <div class="digit"></div> <div class="digit"></div> <div class="digit"></div>container 类的 div 元素是整个项目的容器，它采用绝对定位并居中显示。内部的多个 digit 类的 div 元素可能用于后续展示数字效果，不过目前代码中未对其进行详细的样式和内容设置。表面容器与方块元素 <div class="surface">  <div class="block b1"> <div class="block-outer"> <div class="block-inner"> <div class="bottom"></div> <div class="front"></div> <div class="left"></div> <div class="right"></div> </div> </div> </div>  </div>surface 类的 div 元素用于承载众多的方块元素。每个方块元素由 block 类的 div 包裹，内部又分为 block-outer 和 block-inner 两层。block-inner 包含了 bottom、front、left 和 right 四个面，用于构建 3D 方块的外观。 CSS 样式与动画效果全局样式 * { box-sizing: border-box; margin: 0; padding: 0; } body { background: radial-gradient(circle at center, transparent, #000 95%), linear-gradient(#444 2px, transparent 0) 0 0/20px 20px, linear-gradient(90deg, #444 2px, #000 0) 0 0/20px 20px; height: 100vh; margin: 0; overflow: hidden; }全局样式设置了所有元素的盒模型为 border-box，并为 body 元素设置了独特的背景，包括径向渐变和线性渐变，营造出一种网格状的黑暗背景效果。同时，将 body 的高度设置为视口高度，并隐藏溢出部分。 3D 效果与容器样式 .container, .surface, .block, .block-outer, .block-inner { transform-style: preserve-3d; } .container { animation: bounce 2s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite; display: flex; margin: auto; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; width: 594px; height: 200px; perspective: 800px; }通过 transform-style: preserve-3d 属性，确保容器和内部元素能够正确呈现 3D 效果。container 元素使用了 bounce 动画，实现了上下弹跳的效果。同时，通过 perspective 属性设置了透视效果，增强了 3D 视觉感受。表面容器样式 .surface { animation: tilt 2s -1.5s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite; display: block; width: 540px; height: 20px; margin: auto; transform: translateY(50px) rotateX(105deg) rotateZ(0deg); will-change: transform; }surface 元素使用了 tilt 动画，使其产生倾斜的动态效果。通过 transform 属性对其进行位置和角度的调整，让表面呈现出特定的 3D 姿态。方块样式 .block-inner div { background-color: #74d447; } .block-inner > div { display: flex; flex-wrap: wrap; align-content: flex-start; position: absolute; width: 20px; height: 20px; }方块的内部元素使用绿色背景色，通过 position: absolute 进行绝对定位，并使用 flexbox 布局进行内部元素的排列。动画效果 @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); } } @keyframes tilt { 0%, 100% { transform: translateY(50px) rotateX(105deg) rotateZ(0deg); } 50% { transform: translateY(50px) rotateX(105deg) rotateZ(10deg); } }bounce 动画使 container 元素在垂直方向上上下弹跳，tilt 动画使 surface 元素在一定角度内倾斜，为整个项目增添了生动的动态效果。

🧑‍💻 代码

Feng 7月6日

0 10 2

分享一下评论头像呼吸灯CSS 图片这段代码我也是网上找的，方便记录，也为了分享所以解刨记录一下简单介绍目标元素选择器这段代码的开头部分，通过 CSS 选择器精准锁定了三类图像元素img.avatar-img.avatar-lg选择同时拥有avatar-img和avatar-lg两个类名的<img>元素。这种组合选择器能够精确匹配特定场景下的图像，比如网站用户头像中特定尺寸和样式的大头像。 img.avatar.lazyloaded针对同时具有avatar和lazyloaded类的图像。lazyloaded类通常用于实现图片的懒加载功能，该选择器确保懒加载完成后的头像元素也能应用相应样式。 img.avatar只要图像元素拥有avatar类，都会被选中。这是一个更宽泛的选择，作为前两个选择器的补充，覆盖了所有带有avatar类的图像。通过这种细致的选择器组合，开发者可以灵活地控制不同条件下的图像样式，避免样式的误应用，提升代码的可控性和维护性。基础样式设定 animation light 4s ease-in-out infinite这行代码应用了名为light的动画，动画时长为 4 秒，以ease-in-out的缓动函数运行，并且会无限循环播放。通过这个动画，图像将产生不断变化的发光效果。 transition0.5s设置了 0.5 秒的过渡效果。这意味着当图像的样式发生改变时（比如后续的悬停状态），样式变化不会瞬间完成，而是会在 0.5 秒内平滑过渡，让用户的视觉体验更加流畅自然。悬停效果接下来的代码块定义了图像在悬停状态下的样式变化： img.avatar-img.avatar-lg:hover, img.avatar.lazyloaded:hover, img.avatar:hover { transform: scale(1.15) rotate(720deg); /* 悬停时放大15%并旋转两周(720度) */ }hover伪类是 CSS 中用于检测鼠标指针是否悬停在元素上的重要特性。当用户将鼠标悬停在之前选中的图像上时，transform属性发挥作用，使图像放大 15% 并旋转 720 度（即两周）。结合之前设置的过渡效果，这个变化过程会显得非常平滑，给用户带来惊喜的交互体验，增强用户与网页之间的互动感。动画关键帧最后，@keyframes规则定义了名为light的动画关键帧，这是实现图像发光效果的核心部分： @keyframes light { 0% { box-shadow: 0 0 4px #f00; } /* 起始状态：红色小光晕 */ 25% { box-shadow: 0 0 16px #0f0; } /* 25%进度：绿色大光晕 */ 50% { box-shadow: 0 0 4px #00f; } /* 50%进度：蓝色小光晕 */ 75% { box-shadow: 0 0 16px #0f0; } /* 75%进度：绿色大光晕 */ 100% { box-shadow: 0 0 4px #f00; } /* 结束状态：回到红色小光晕 */ }@keyframes规则允许开发者定义动画在不同阶段的样式变化。在light动画中：动画开始（0%）时，图像周围产生一个红色的小光晕（box-shadow: 0 0 4px #f00;）。当动画进行到 25% 时，光晕变为绿色且尺寸变大（box-shadow: 0 0 16px #0f0;）。 50% 时，光晕切换为蓝色小光晕。 75% 时，再次出现绿色大光晕。动画结束（100%）时，回到初始的红色小光晕状态。由于设置了infinite无限循环，这个过程会一直持续，使图像始终散发着光晕。完整代码展示 /* 目标元素选择器组：指定样式仅应用于以下三类图像元素 */ img.avatar-img.avatar-lg, /* 同时拥有avatar-img和avatar-lg类的图像 */ img.avatar.lazyloaded, /* 同时拥有avatar和lazyloaded类的图像 */ img.avatar { /* 拥有avatar类的图像 */ /* 使图像呈现圆形效果 */ animation: light 4s ease-in-out infinite; /* 应用4秒循环的发光动画 */ transition: 0.5s; /* 设置0.5秒的过渡效果，用于平滑响应悬停动作 */ } /* 目标元素的悬停状态样式 */ img.avatar-img.avatar-lg:hover, img.avatar.lazyloaded:hover, img.avatar:hover { transform: scale(1.15) rotate(720deg); /* 悬停时放大15%并旋转两周(720度) */ } /** * 发光动画定义 * 实现图像周围的光晕效果，在红、绿、蓝之间循环变化 */ @keyframes light { 0% { box-shadow: 0 0 4px #f00; } /* 起始状态：红色小光晕 */ 25% { box-shadow: 0 0 16px #0f0; } /* 25%进度：绿色大光晕 */ 50% { box-shadow: 0 0 4px #00f; } /* 50%进度：蓝色小光晕 */ 75% { box-shadow: 0 0 16px #0f0; } /* 75%进度：绿色大光晕 */ 100% { box-shadow: 0 0 4px #f00; } /* 结束状态：回到红色小光晕 */ }

🧑‍💻 代码

Feng 7月3日

2 16 3

分享一个黑客风404的HTML

分享一个黑客风404的HTML 图片代码演示 {iframe src="https://code.juejin.cn/pen/7523277833087483945" height="100vh"/} 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>404 Error | Access Denied</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">  <script> tailwind.config = { theme: { extend: { colors: { neon: '#39FF14', dark: '#0F172A', darker: '#020617', terminal: '#0D1117', }, fontFamily: { matrix: ['"Courier New"', 'monospace'], }, } } } </script>  <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .glow { text-shadow: 0 0 10px rgba(57, 255, 20, 0.7); } .matrix-code { background-image: linear-gradient(rgba(13, 17, 23, 0.9), rgba(13, 17, 23, 0.9)), url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2339FF14' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, transparent, rgba(57, 255, 20, 0.8), transparent); animation: scan 3s linear infinite; } @keyframes scan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } } .noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } .typewriter { overflow: hidden; white-space: nowrap; animation: typing 2s steps(40, end); } @keyframes typing { from { width: 0; } to { width: 100%; } } .blink { animation: blink 1s step-end infinite; } @keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } } } </style> </head> <body class="bg-darker text-neon font-matrix min-h-screen flex flex-col matrix-code overflow-hidden">  <div class="noise"></div>  <div class="scan-line"></div>  <header class="py-4 px-6 border-b border-neon/20 backdrop-blur-sm bg-darker/80"> <div class="flex justify-between items-center"> <div class="text-neon text-xl font-bold"> <i class="fa fa-shield mr-2"></i>SYSTEM PROTECTION </div> <div class="flex space-x-6"> <span class="text-neon/70">STATUS: SECURE</span> <span class="text-neon/70">TIME: <span id="current-time">00:00:00</span></span> <span class="text-neon/70">ID: <span id="session-id">XK-78239</span></span> </div> </div> </header>  <main class="flex-grow p-8 md:p-16 overflow-hidden"> <div class="max-w-4xl mx-auto">  <div class="mb-12"> <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold mb-4 glow">404</h1> <p class="text-[clamp(1rem,3vw,1.5rem)] mb-8">ACCESS DENIED</p> <div class="bg-terminal/50 border border-neon/30 rounded-lg p-6 mb-8 shadow-lg shadow-neon/10"> <div class="flex items-center mb-4"> <span class="text-neon/70 mr-2">ERROR</span> <span class="text-neon">404</span> <span class="text-neon/70 ml-2">|</span> <span class="text-neon/70">RESOURCE NOT FOUND</span> </div> <p class="text-neon/80 mb-4">The requested resource could not be located on this system.</p> <div class="text-neon/60"> <p class="mb-1">Status Code: 404 Not Found</p> <p class="mb-1">Timestamp: <span id="error-timestamp">2023-05-12T14:30:45Z</span></p> <p class="mb-1">Request ID: <span id="request-id">3a4b5c6d-7e8f-9a0b-1c2d-3e4f5a6b7c8d</span></p> <p>Session Terminated: <span id="session-terminated">TRUE</span></p> </div> </div> </div>  <div class="bg-terminal/80 border border-neon/30 rounded-lg p-4 mb-8 shadow-lg shadow-neon/10"> <div class="flex items-center mb-2"> <span class="text-neon">user@system</span> <span class="text-neon/50">:</span> <span class="text-neon/70">~$</span> <span class="ml-2 typewriter">ls -la</span> <span class="ml-1 blink">_</span> </div> <div class="text-neon/60 text-sm"> <p class="mb-1">total 0</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 .</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 ..</p> <p class="mb-1">lrwxrwxrwx 1 root root 7 Jan 1 00:00 bin -> usr/bin</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 boot</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 dev</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 etc</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 home</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 lib</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 media</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 mnt</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 opt</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 proc</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 root</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 run</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 sbin</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 srv</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 sys</p> <p class="mb-1">drwxrwxrwt 1 root root 4096 Jan 1 00:00 tmp</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 usr</p> <p>drwxr-xr-x 1 root root 4096 Jan 1 00:00 var</p> </div> </div>  <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button id="back-btn" class="bg-neon/20 hover:bg-neon/30 text-neon border border-neon/50 px-6 py-3 rounded-md transition-all duration-300 flex items-center justify-center"> <i class="fa fa-arrow-left mr-2"></i> Return to Safety </button> <button id="retry-btn" class="bg-transparent hover:bg-neon/10 text-neon/80 border border-neon/30 px-6 py-3 rounded-md transition-all duration-300 flex items-center justify-center"> <i class="fa fa-refresh mr-2"></i> Retry Connection </button> </div> </div> </main>  <footer class="py-4 px-6 border-t border-neon/20 text-neon/50 text-sm backdrop-blur-sm bg-darker/80"> <div class="flex flex-col md:flex-row justify-between items-center"> <div class="mb-2 md:mb-0"> <i class="fa fa-lock mr-2"></i>SYSTEM PROTECTION NETWORK </div> <div> <span>UNAUTHORIZED ACCESS ATTEMPTS WILL BE LOGGED AND REPORTED</span> </div> </div> </footer>  <div id="matrix-code" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div> <script> // 更新当前时间 function updateTime() { const now = new Date(); const timeString = now.toLocaleTimeString(); document.getElementById('current-time').textContent = timeString; } // 生成随机ID function generateRandomId() { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; let result = ''; for (let i = 0; i < 8; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)); } return result; } // 生成随机请求ID function generateRequestId() { const parts = []; for (let i = 0; i < 5; i++) { const length = i === 0 ? 8 : i === 4 ? 12 : 4; let part = ''; for (let j = 0; j < length; j++) { part += Math.floor(Math.random() * 16).toString(16); } parts.push(part); } return parts.join('-'); } // 初始化页面 function initPage() { // 更新时间 updateTime(); setInterval(updateTime, 1000); // 更新会话ID document.getElementById('session-id').textContent = generateRandomId(); // 更新请求ID document.getElementById('request-id').textContent = generateRequestId(); // 更新时间戳 const now = new Date(); document.getElementById('error-timestamp').textContent = now.toISOString(); // 设置按钮点击事件 document.getElementById('back-btn').addEventListener('click', function() { // 模拟返回安全区域的动画 this.classList.add('animate-pulse'); setTimeout(() => { window.history.back(); }, 500); }); document.getElementById('retry-btn').addEventListener('click', function() { // 模拟重试连接的动画 this.classList.add('animate-spin'); setTimeout(() => { location.reload(); }, 1000); }); // 初始化矩阵代码背景 initMatrixCode(); } // 矩阵代码背景动画 function initMatrixCode() { const canvas = document.getElementById('matrix-code'); const ctx = canvas.getContext('2d'); // 设置画布大小 function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); // 字符集 const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+-=[]{}|;:,.<>?'; const fontSize = 16; const columns = Math.floor(canvas.width / fontSize); const drops = []; // 初始化下落位置 for (let i = 0; i < columns; i++) { drops[i] = Math.floor(Math.random() * canvas.height); } // 绘制函数 function draw() { // 半透明黑色背景，创造轨迹效果 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 设置文本样式 ctx.fillStyle = '#39FF14'; ctx.font = `${fontSize}px Courier New`; // 绘制每个字符 for (let i = 0; i < columns; i++) { const text = chars.charAt(Math.floor(Math.random() * chars.length)); ctx.fillText(text, i * fontSize, drops[i] * fontSize); // 随机重置位置 if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } // 开始动画 setInterval(draw, 33); } // 页面加载完成后初始化 window.addEventListener('DOMContentLoaded', initPage); </script> </body> </html>

🧑‍💻 代码

Feng 6月21日

2 30 6

SSL