HTML
快来分享你的内容吧～
2025-04-06·Java后端
2025-03-07·Java后端- 2025-03-06·Java后端
元素衰变2048小游戏代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素衰变2048</title> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #faf8ef; margin: 0; padding: 10px; touch-action: manipulation; } h1 { font-size: 24px; margin: 5px 0; color: #776e65; } .game-container { width: 280px; margin: 0 auto; position: relative; } .grid { background-color: #bbada0; border-radius: 5px; padding: 10px; position: relative; } .grid-row { display: flex; margin-bottom: 10px; } .grid-row:last-child { margin-bottom: 0; } .grid-cell { width: 60px; height: 60px; margin-right: 10px; background-color: rgba(238, 228, 218, 0.35); border-radius: 3px; position: relative; /* 添加相对定位 */ } .grid-cell:last-child { margin-right: 0; } .tile { position: absolute; width: 60px; height: 60px; border-radius: 3px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 24px; transition: all 0.1s ease-in-out; z-index: 10; top: 0; /* 确保从顶部开始 */ left: 0; /* 确保从左侧开始 */ } .score-container { display: flex; justify-content: space-between; margin: 10px 0; } .score-box { background-color: #bbada0; color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold; min-width: 60px; font-size: 14px; } .score-title { font-size: 12px; color: #eee4da; } .score-value { font-size: 18px; } .game-over { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(238, 228, 218, 0.73); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; border-radius: 5px; display: none; } .game-over-text { font-size: 30px; font-weight: bold; color: #776e65; margin-bottom: 10px; } .restart-button { background-color: #8f7a66; color: white; border: none; border-radius: 3px; padding: 8px 15px; font-size: 14px; cursor: pointer; } .decay-effect { animation: decayPulse 0.5s; } @keyframes decayPulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .instructions { margin-top: 10px; color: #776e65; font-size: 12px; line-height: 1.3; } </style> </head> <body> <div class="game-container"> <h1>元素衰变2048</h1> <div class="score-container"> <div class="score-box"> <div class="score-title">分数</div> <div class="score-value" id="score">0</div> </div> <div class="score-box"> <div class="score-title">最高元素</div> <div class="score-value" id="best-element">H</div> </div> </div> <div class="grid"> <div class="grid-row"> <div class="grid-cell" id="cell-0-0"></div> <div class="grid-cell" id="cell-0-1"></div> <div class="grid-cell" id="cell-0-2"></div> <div class="grid-cell" id="cell-0-3"></div> </div> <div class="grid-row"> <div class="grid-cell" id="cell-1-0"></div> <div class="grid-cell" id="cell-1-1"></div> <div class="grid-cell" id="cell-1-2"></div> <div class="grid-cell" id="cell-1-3"></div> </div> <div class="grid-row"> <div class="grid-cell" id="cell-2-0"></div> <div class="grid-cell" id="cell-2-1"></div> <div class="grid-cell" id="cell-2-2"></div> <div class="grid-cell" id="cell-2-3"></div> </div> <div class="grid-row"> <div class="grid-cell" id="cell-3-0"></div> <div class="grid-cell" id="cell-3-1"></div> <div class="grid-cell" id="cell-3-2"></div> <div class="grid-cell" id="cell-3-3"></div> </div> <div class="game-over"> <div class="game-over-text">游戏结束!</div> <button class="restart-button" onclick="startGame()">再来一局</button> </div> </div> <div class="instructions"> <p>方向键/WASD移动，相同元素合并，每次移动可能衰变</p> </div> </div> <script> // 游戏配置 const config = { size: 4, decayChance: 0.0065, chainDecayChance: 0.3 }; // 元素数据 (只显示符号) const elements = [ { value: 2, symbol: "H", color: "#EEE4DA", textColor: "#776e65" }, { value: 4, symbol: "He", color: "#EDE0C8", textColor: "#776e65" }, { value: 8, symbol: "Li", color: "#F2B179", textColor: "#f9f6f2" }, { value: 16, symbol: "Be", color: "#F59563", textColor: "#f9f6f2" }, { value: 32, symbol: "B", color: "#F67C5F", textColor: "#f9f6f2" }, { value: 64, symbol: "C", color: "#F65E3B", textColor: "#f9f6f2" }, { value: 128, symbol: "N", color: "#EDCF72", textColor: "#f9f6f2" }, { value: 256, symbol: "O", color: "#EDCC61", textColor: "#f9f6f2" }, { value: 512, symbol: "F", color: "#EDC850", textColor: "#f9f6f2" }, { value: 1024, symbol: "Ne", color: "#EDC53F", textColor: "#f9f6f2" }, { value: 2048, symbol: "Na", color: "#EDC22E", textColor: "#f9f6f2" } ]; // 获取元素属性 function getElement(value) { if (value <= 2048) { return elements.find(e => e.value === value); } // 高阶元素使用循环颜色 const colors = ["#3C3A32", "#B39379", "#7F7F7F", "#8B4513"]; const index = Math.floor(Math.log2(value) - 11) % colors.length; return { value: value, symbol: "E" + Math.floor(Math.log2(value)), color: colors[index], textColor: "#f9f6f2" }; } // 游戏状态 let grid = []; let score = 0; let bestElement = { value: 2, symbol: "H" }; let gameOver = false; let moving = false; // 初始化游戏 function startGame() { grid = Array(config.size).fill().map(() => Array(config.size).fill(0)); score = 0; bestElement = { value: 2, symbol: "H" }; gameOver = false; document.getElementById("score").textContent = "0"; document.getElementById("best-element").textContent = "H"; document.querySelector(".game-over").style.display = "none"; addRandomTile(); addRandomTile(); updateView(); } // 添加随机元素 function addRandomTile() { const emptyCells = []; for (let r = 0; r < config.size; r++) { for (let c = 0; c < config.size; c++) { if (grid[r][c] === 0) { emptyCells.push({ r, c }); } } } if (emptyCells.length > 0) { const { r, c } = emptyCells[Math.floor(Math.random() * emptyCells.length)]; grid[r][c] = Math.random() < 0.9 ? 2 : 4; return true; } return false; } // 更新视图 function updateView() { // 清除所有现有瓦片 document.querySelectorAll(".tile").forEach(tile => tile.remove()); // 添加新瓦片 - 现在直接放入对应的grid-cell中 for (let r = 0; r < config.size; r++) { for (let c = 0; c < config.size; c++) { const value = grid[r][c]; if (value !== 0) { const element = getElement(value); const cell = document.getElementById(`cell-${r}-${c}`); const tile = document.createElement("div"); tile.className = "tile"; tile.style.backgroundColor = element.color; tile.style.color = element.textColor; tile.textContent = element.symbol; cell.appendChild(tile); } } } document.getElementById("score").textContent = score; document.getElementById("best-element").textContent = bestElement.symbol; } // 移动处理 function move(direction) { if (gameOver || moving) return; moving = true; let moved = false; switch (direction) { case "up": for (let c = 0; c < config.size; c++) { moved = moveColumn(c, -1) || moved; } break; case "down": for (let c = 0; c < config.size; c++) { moved = moveColumn(c, 1) || moved; } break; case "left": for (let r = 0; r < config.size; r++) { moved = moveRow(r, -1) || moved; } break; case "right": for (let r = 0; r < config.size; r++) { moved = moveRow(r, 1) || moved; } break; } if (moved) { addRandomTile(); updateView(); setTimeout(() => { tryDecay(); updateView(); checkGameOver(); moving = false; }, 150); } else { moving = false; checkGameOver(); } } // 移动行 function moveRow(r, dir) { let moved = false; const row = grid[r].filter(val => val !== 0); if (dir === 1) row.reverse(); for (let i = 0; i < row.length - 1; i++) { if (row[i] === row[i + 1]) { row[i] *= 2; row[i + 1] = 0; score += row[i]; if (row[i] > bestElement.value) { bestElement = getElement(row[i]); } moved = true; } } const newRow = row.filter(val => val !== 0); while (newRow.length < config.size) newRow.push(0); if (dir === 1) newRow.reverse(); if (JSON.stringify(grid[r]) !== JSON.stringify(newRow)) { moved = true; } grid[r] = newRow; return moved; } // 移动列 function moveColumn(c, dir) { let moved = false; let column = []; for (let r = 0; r < config.size; r++) { if (grid[r][c] !== 0) column.push(grid[r][c]); } if (dir === 1) column.reverse(); for (let i = 0; i < column.length - 1; i++) { if (column[i] === column[i + 1]) { column[i] *= 2; column[i + 1] = 0; score += column[i]; if (column[i] > bestElement.value) { bestElement = getElement(column[i]); } moved = true; } } const newColumn = column.filter(val => val !== 0); while (newColumn.length < config.size) newColumn.push(0); if (dir === 1) newColumn.reverse(); for (let r = 0; r < config.size; r++) { if (grid[r][c] !== newColumn[r]) { moved = true; grid[r][c] = newColumn[r]; } } return moved; } // 尝试衰变 function tryDecay() { const decayCandidates = []; for (let r = 0; r < config.size; r++) { for (let c = 0; c < config.size; c++) { if (grid[r][c] > 2) { decayCandidates.push({ r, c, value: grid[r][c] }); } } } if (decayCandidates.length === 0) return; const decayProbabilities = decayCandidates.map(candidate => { return config.decayChance + (Math.log2(candidate.value) - 1) * 0.000025; }); for (let i = 0; i < decayCandidates.length; i++) { const { r, c, value } = decayCandidates[i]; if (Math.random() < decayProbabilities[i]) { decayElement(r, c); // 连锁衰变 const directions = [ { dr: 0, dc: 0 }, { dr: 0, dc: 0 }, { dr: 0, dc: 0 }, { dr: 0, dc: 0 } ]; for (const { dr, dc } of directions) { const nr = r + dr; const nc = c + dc; if (nr >= 0 && nr < config.size && nc >= 0 && nc < config.size && grid[nr][nc] === value && Math.random() < config.chainDecayChance) { decayElement(nr, nc); } } } } } // 衰变元素 function decayElement(r, c) { const cell = document.getElementById(`cell-${r}-${c}`); const tile = cell.querySelector(".tile"); if (tile) { tile.classList.add("decay-effect"); setTimeout(() => tile.classList.remove("decay-effect"), 500); } grid[r][c] /= 2; } // 检查游戏结束 function checkGameOver() { for (let r = 0; r < config.size; r++) { for (let c = 0; c < config.size; c++) { if (grid[r][c] === 0) return false; } } for (let r = 0; r < config.size; r++) { for (let c = 0; c < config.size; c++) { const value = grid[r][c]; if (c < config.size - 1 && grid[r][c + 1] === value) return false; if (r < config.size - 1 && grid[r + 1][c] === value) return false; } } gameOver = true; document.querySelector(".game-over").style.display = "flex"; return true; } // 键盘控制 document.addEventListener("keydown", function(event) { if (gameOver) return; switch (event.key) { case "ArrowUp": case "w": case "W": move("up"); event.preventDefault(); break; case "ArrowDown": case "s": case "S": move("down"); event.preventDefault(); break; case "ArrowLeft": case "a": case "A": move("left"); event.preventDefault(); break; case "ArrowRight": case "d": case "D": move("right"); event.preventDefault(); break; } }); // 触摸控制 let touchStartX = 0; let touchStartY = 0; document.querySelector(".grid").addEventListener("touchstart", function(e) { touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; e.preventDefault(); }, { passive: false }); document.querySelector(".grid").addEventListener("touchend", function(e) { if (gameOver) return; const touchEndX = e.changedTouches[0].clientX; const touchEndY = e.changedTouches[0].clientY; const dx = touchEndX - touchStartX; const dy = touchEndY - touchStartY; if (Math.abs(dx) > Math.abs(dy)) { if (dx > 0) move("right"); else move("left"); } else { if (dy > 0) move("down"); else move("up"); } e.preventDefault(); }, { passive: false }); // 开始游戏 startGame(); </script> </body> </html>
反常规工具类型设计文档 ——5 大「反向生活助手」创意
参考：反人类前端实验室 - 有趣产品咖啡馆 https://www.funnycafe.top/badflow/index.html <br/> > 本文为 AI 生成内容 以下是为「反常规工具」类型设计的**5个反向产品创意文档**，每个都遵循「颠覆传统正向功能+荒诞成就体系+自嘲式交互」的设计逻辑，可直接用于生成页面或进一步开发： ## 一、反向健身助手「懒癌健身房」 ### 核心反转点 - **传统目标**：鼓励运动、燃烧卡路里 - **反向目标**：记录「休息时长」「摸鱼姿势」，解锁「不动如山」成就 ### 功能设计 1. **核心功能** - **懒度打卡**： - 记录「连续躺平时长」（如：午休躺平2小时+下班躺平3小时） - 上传「葛优瘫」「沙发土豆」等姿势照片，AI识别姿势「放松指数」 - **能量守恒榜**： - 计算「24小时消耗卡路里」，排名越靠后奖励越高 - 展示「本周最懒时刻」：如「鼠标移动距离＜10cm的工作日」 - **成就系统**： |成就名称|解锁条件|奖励图标| |--|--|--| |沙发封印术|连续7天每日躺平＞5小时|🛋️ 金色沙发| |能量守恒大师|月消耗卡路里＜基础代谢的50%|⚖️ 懒惰天平| |办公室植物人|单日鼠标点击＜20次+键盘敲击＜100次|🌿 盆栽头像框| 2. **界面风格** - **主色调**：肉粉色+浅灰色（模拟「慵懒肉体」和「沙发质感」） - **交互元素**： - 打卡按钮设计成「再躺5分钟」「摸鱼开始」 - 成就勋章为「躺平证书」「摸鱼奖杯」等魔性插画 ## 二、反向理财工具「败家记账本PLUS」 ### 核心反转点 - **传统目标**：储蓄、理性消费 - **反向目标**：记录「无意义消费」，用「败家指数」解构理财焦虑 ### 功能设计 1. **核心功能** - **非理性消费记录**： - 分类标签：「直播间冲动」「深夜外卖」「网红智商税」 - 自动计算「后悔指数」：根据消费后24小时内的懊悔程度打分（1-10分） - **破产进度条**： - 实时显示「距离月光还有X天」「工资透支率XX%」 - 月消费超工资200%时，触发「破产预警」动画（钞票燃烧特效） - **成就系统**： |成就名称|解锁条件|奖励图标| |--|--|--| |月光战神|连续3个月工资月光|🌙 月亮碎钞机| |智商税收集者|累计购买5款网红无用商品|🧠 镀金税单| |破产先锋|月消费突破工资300%|💸 骷髅钱包| 2. **界面风格** - **主色调**：烫金色+霓虹粉（模拟「冲动消费」的短暂快感） - **交互元素**： - 消费记录用「烟花爆炸」动画庆祝「败家成功」 - 月度报告标题：《本月迷惑消费大赏：钱都花去哪儿了？》 ## 三、反向时间管理「拖延计时器」 ### 核心反转点 - **传统目标**：提高效率、拒绝拖延 - **反向目标**：记录「拖延时长」，用「摆烂效率」重新定义时间 ### 功能设计 1. **核心功能** - **拖延倒计时**： - 设置「任务拖延时长」（如：「距离DDL还有3天，先拖延2天12小时」） - 倒计时结束后，自动生成「紧急赶工」成就 - **摸鱼统计**： - 监测手机解锁次数、社交媒体使用时长，生成「摸鱼热力图」 - 展示「本周最佳拖延时段」：如「每天下午3-5点必刷短视频」 - **成就系统**： |成就名称|解锁条件|奖励图标| |--|--|--| |拖延艺术家|单次任务拖延时长＞48小时|🎨 拖延画笔| |摸鱼马拉松|连续7天每日摸鱼＞3小时|🏃 摸鱼跑鞋| |极限赶工王者|在DDL前1小时内完成任务并通过审核|⏱️ 金色闹钟| 2. **界面风格** - **主色调**：橙红色+黑色（模拟「 deadline压迫感+摸鱼刺激感」） - **交互元素**： - 拖延倒计时用「炸弹爆炸」动画显示剩余时间 - 摸鱼统计页配文：「恭喜！今天摸鱼时长打败80%同龄人」 ## 四、反向学习工具「学渣成长手册」 ### 核心反转点 - **传统目标**：专注学习、提升自我 - **反向目标**：记录「学习分心行为」，解锁「摆烂式学习」成就 ### 功能设计 1. **核心功能** - **分心记录**： - 手动打卡「学习时的分心操作」：如「发呆10分钟」「刷手机20分钟」 - 自动统计「有效学习时间占比」（如：3小时学习中仅20分钟专注） - **摆烂课程表**： - 推荐「轻松学习内容」：如「边听播客边画画」「用追剧学外语」 - 生成「本周学习摆烂报告」：如「成功将3门考试延期至下学期」 - **成就系统**： |成就名称|解锁条件|奖励图标| |--|--|--| |学习分心大师|单次学习分心＞5种类型|📱 分心手机勋章| |摆烂式学习标兵|用「非正经方式」完成作业并得分＞60|🎨 彩色蜡笔勋章| |学渣保护协会会长|连续5门考试低空飘过|🛡️ 学渣盾牌勋章| 2. **界面风格** - **主色调**：浅蓝色+白色（模拟「轻松躺平」的视觉感受） - **交互元素**： - 分心记录按钮设计成「玩一会儿」「休息一下」 - 成就勋章为「咸鱼奖状」「摸鱼笔记本」等卡通形象 ## 五、反向社交工具「社恐保护盾」 ### 核心反转点 - **传统目标**：拓展人脉、积极社交 - **反向目标**：记录「社交逃避行为」，打造「社恐舒适区」 ### 功能设计 1. **核心功能** - **社交拒绝打卡**： - 记录「拒绝无效社交」的次数：如「推掉3场聚会」「拒接5个陌生电话」 - 生成「社交能量消耗报告」：计算「本月社交时长/独处时长」比例 - **社恐场景库**： - 提供「拒绝话术」模板：如「突然有事，去不了啦」「最近想专注搞钱」 - 模拟「虚拟忙碌状态」：自动发送「正在加班」「手机没电」等状态 - **成就系统**： |成就名称|解锁条件|奖励图标| |--|--|--| |社恐防御大师|连续14天零社交|🛡️ 金色盾牌| |社交绝缘体|成功避开所有「非必要社交邀请」|🌫️ 透明人勋章| |独处艺术家|单次独处时长＞72小时|🏡 温馨小屋勋章| 2. **界面风格** - **主色调**：淡绿色+米色（模拟「安全、放松」的氛围） - **交互元素**： - 社交拒绝按钮设计成「一键隐身」「开启静音」 - 成就页面配文：「恭喜！你已进入社恐安全区」 ## 三、统一设计要素 ### 1. 视觉语言 - **色彩体系**：高饱和度亮色（粉/橙/黄）+ 中性灰，营造「狂欢式摆烂」氛围 - **插画风格**：圆润线条、夸张表情（如：躺着的咸鱼、翻白眼的社恐小人） - **字体设计**：手写体+卡通字体，搭配「爆炸」「闪烁」等动态效果 ### 2. 交互原则 - **反焦虑文案**： - 「摆烂不是错，是对世界的温柔抵抗」 - 「今日堕落已达标，你真棒！」 - **魔性动效**： - 打卡成功时播放「撒花+懒羊羊叫声」动画 - 成就解锁时弹出「奖状飞落」特效 ### 3. 用户心理洞察 - **自嘲式接纳**：用幽默消解「自律焦虑」，让用户在摆烂中感到被理解 - **轻量化记录**：无需长期坚持，单次打卡即可获得即时反馈 - **群体认同感**：通过成就排行榜，形成「摆烂互助社区」的归属感 这些工具均围绕「反向激励→荒诞成就→自我观察」逻辑设计，可根据目标用户偏好选择具体方向（如学生群体适合「学渣成长手册」，职场人适合「拖延计时器」）。需要进一步细化某个工具的页面布局或功能逻辑，可以随时告知！
jsp+servlet做的超市商品管理系统
# 超市商品管理系统 ## 项目介绍 这是一个基于JavaWeb技术栈开发的超市商品管理系统，采用传统的MVC架构模式，使用Servlet作为控制器，JSP作为视图层，通过JDBC进行数据库操作。系统提供了商品管理和类别管理的基本功能，并实现了基于角色的访问控制。 ## 技术栈 - 后端：JavaWeb (Servlet + JSP) - 数据库：MySQL 5.7 - 前端：原生JavaScript + CSS - 连接池：JDBC直连 - 项目管理：Eclipse IDE ## 系统特点 1. **用户权限管理** - 支持用户注册和登录功能 - 实现了基于角色的访问控制（RBAC） - 区分普通用户和管理员权限 2. **商品管理功能** - 商品的增删改查操作 - 支持按类别管理商品 - 用户只能管理自己添加的商品 - 管理员可以查看所有商品 3. **类别管理功能** - 商品类别的增删改查操作 - 仅管理员可以管理类别 4. **界面设计** - 清晰的布局结构（header、left menu、content、footer） - 响应式设计，适配不同屏幕尺寸 - 统一的页面风格和操作体验 ## 项目结构 ``` supermarket/ ├── WebContent/ # Web资源目录 │ ├── WEB-INF/ # Web配置目录 │ │ └── web.xml # Web应用配置文件 │ ├── css/ # 样式文件 │ │ └── style.css # 全局样式 │ ├── login.jsp # 登录页面 │ ├── register.jsp # 注册页面 │ ├── product_list.jsp # 商品列表页面 │ ├── product_form.jsp # 商品编辑页面 │ ├── category_list.jsp # 类别列表页面 │ └── category_form.jsp # 类别编辑页面 ├── src/ # Java源代码目录 │ └── com/supermarket/ │ ├── entity/ # 实体类 │ │ ├── User.java │ │ ├── Product.java │ │ └── Category.java │ ├── dao/ # 数据访问层 │ │ ├── UserDao.java │ │ ├── ProductDao.java │ │ └── CategoryDao.java │ ├── servlet/ # 控制器层 │ │ ├── UserServlet.java │ │ ├── ProductServlet.java │ │ └── CategoryServlet.java │ └── util/ # 工具类 │ └── DBUtil.java # 数据库连接工具 └── supermarket.sql # 数据库脚本 ``` ## 代码特点 1. **规范的代码组织** - 采用标准的MVC分层架构 - 清晰的包结构和命名规范 - 统一的编码风格 2. **安全性考虑** - 登录状态验证 - SQL注入防护 - 权限检查机制 3. **用户体验优化** - 表单验证 - 友好的错误提示 - 操作确认提示 4. **代码复用** - 通用的数据库连接工具 - 统一的页面布局 - 可重用的CSS样式 ## 部署说明 1. 创建MySQL数据库，执行`supermarket.sql`脚本 2. 配置`DBUtil.java`中的数据库连接信息 3. 使用Eclipse导入项目 4. 配置Tomcat服务器 5. 部署运行项目 ## 注意事项 1. 请确保MySQL 5.7已正确安装并运行 2. 数据库字符集使用utf8mb4 3. 请根据实际情况修改数据库连接配置 4. 建议使用Eclipse IDE进行开发和调试 <img src="https://pic.code-nav.cn/post_picture/1900441785166540802/4TIgDP3KOcqrUDbH.png" alt="1.png" width="395px" /> <img src="https://pic.code-nav.cn/post_picture/1900441785166540802/dvgILY6Yay2Ar5Xo.png" alt="2.png" width="348px" /> <img src="https://pic.code-nav.cn/post_picture/1900441785166540802/byHxr23xx6r2YHE0.webp" alt="3.png" width="100%" /> <img src="https://pic.code-nav.cn/post_picture/1900441785166540802/eRFXTkkgdnnjK1Bn.webp" alt="4.png" width="100%" /> <img src="https://pic.code-nav.cn/post_picture/1900441785166540802/37NlR5YErZIGKvFq.webp" alt="5.png" width="100%" /> <img src="https://pic.code-nav.cn/post_picture/1900441785166540802/5g564pNy9VWujayh.webp" alt="6.png" width="100%" />
【HTML】小游戏-愤怒的小鸟
参考： [【一统江湖的大前端（8）】matter.js 经典物理 - 大史不说话 - 博客园](https://www.cnblogs.com/dashnowords/p/12458335.html) https://github.com/dashnowords/blogs/blob/master/Demo/matterjs-demo/readme.md 在线地址：[愤怒的小鸟](https://html.xn--4gqta1h0zg9yuu7a.fun/%E6%84%A4%E6%80%92%E7%9A%84%E5%B0%8F%E9%B8%9F/index.html) 这是一个使用 Matter.js 物理引擎实现的愤怒的小鸟网页游戏克隆版。 ## 功能特点 - 🎯 弹弓发射机制 - 🏗️ 物理引擎驱动的真实物理效果 - 🎮 默认关卡和随机关卡两种模式 - 🎲 随机关卡自动生成不同的障碍物组合 - 💥 障碍物被击飞出画布后自动消失 - 🏆 所有障碍物清除后显示胜利画面
【HTML】小游戏-打弹珠
> 没戴耳机，没有加弹珠碰撞的声音（但这个应该是灵魂） > > 有很多 Bug 在线地址：[弹珠挑战赛](https://html.xn--4gqta1h0zg9yuu7a.fun/%E6%89%93%E5%BC%B9%E7%8F%A0/%E6%89%93%E5%BC%B9%E7%8F%A0.html) ## 效果 <img src="https://pic.code-nav.cn/post_picture/1631847729158258689/KbnMpVHwKYhPwUnY.webp" alt="PixPin_2025-03-07_15-58-39.png" width="100%" /> <br/> > 以下为 AI 生成 ## 童年回忆：弹珠游戏 🔮 这是一个基于 HTML5 Canvas 开发的经典弹珠游戏，旨在重现童年时期玩弹珠的美好记忆。 ## 项目简介 在这个数字化的时代，我们试图通过这个网页游戏重现童年时期最纯粹的游戏乐趣。 弹珠游戏不仅是一个游戏，更是承载着无数人童年美好回忆的媒介。 ## 游戏特色 ### 1. 双模式玩法 - **经典模式**：在三角形区域内进行的传统弹珠对战 - **对掏模式**：两个弹珠之间的直接对抗 ### 2. 真实物理模拟 - 精确的碰撞检测 - 流畅的物理运动 - 逼真的摩擦力效果 ### 3. 游戏规则 #### 经典模式 - 当玩家弹珠完全停止时： - 如果停在三角形外：继续游戏 - 如果停在三角形内： - 0 个敌方弹珠被击出 → 失败 - 1 个敌方弹珠被击出 → 转移控制权 - 2 个或更多敌方弹珠被击出 → 失败 #### 对掏模式 - 两个弹珠相互对抗 - 击中对方即获胜 ## 操作方式 1. 鼠标点击并按住弹珠 2. 拖动鼠标调整发射方向和力度 3. 释放鼠标发射弹珠 ## 技术特点 - 使用原生 HTML5 Canvas 开发 - 无需任何外部依赖 - 流畅的动画效果 - 响应式设计 ## 项目理念 这个项目的核心理念是： 1. **传承经典**：将传统的弹珠游戏以数字化的方式保存和传播 2. **简单有趣**：保持游戏的简单性，专注于最纯粹的游戏乐趣 3. **教育意义**： - 培养空间思维能力 - 锻炼手眼协调 - 学习基础物理知识 ## 未来展望 - [ ] 添加多人在线对战模式 - [ ] 引入更多趣味玩法 - [ ] 增加弹珠收藏系统 - [ ] 添加排行榜功能 ## 快速开始 1. 克隆项目到本地 2. 直接在浏览器中打开 `打弹珠.html` 文件 3. 开始享受童年的乐趣！ ## 贡献 欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！ ## 许可证 MIT License
【HTML】文本换行转换工具
在线地址：[文本换行转换工具](https://html.xn--4gqta1h0zg9yuu7a.fun/%E6%96%87%E6%9C%AC%E6%8D%A2%E8%A1%8C%E8%BD%AC%E6%8D%A2%E5%B7%A5%E5%85%B7.html) 【项目背景】 鉴于个人文字表达能力有限，需借助 AI 生成文本 同时对短句表达的偏好，特此开发「文本换行优化工具」，实现自然断行。 ## 效果 <img src="https://pic.code-nav.cn/post_picture/1631847729158258689/1XRMWVCj6ozh0qfl.webp" alt="PixPin_2025-03-06_14-27-23.png" width="100%" />
【HTML】圆形图片墙
在线地址：[圆形图片墙](https://html.xn--4gqta1h0zg9yuu7a.fun/%E5%9C%86%E5%BD%A2%E5%9B%BE%E7%89%87%E5%A2%99.html) ## 效果 <img src="https://pic.code-nav.cn/post_picture/1631847729158258689/jc1Bum7JZoSJU48k.webp" alt="PixPin_2025-03-05_14-39-23.png" width="100%" /> ## 圆形图片墙 介绍 一个简洁优雅的圆形图片展示墙，支持多种展示场景，让您的图片展示更具美感和创意。 ## 🌟 主要特点 - 圆形展示：完美适配各类图片，突出核心视觉重点 - 智能识别：支持图片 URL 和文字输入，自动创建对应展示效果 - 拖拽排序：自由调整展示顺序 - 分组管理：支持创建多个列表，方便分类管理 - 批量导入：支持批量添加图片或文字 - 即时响应：添加、删除操作即时生效 - 数据持久：自动保存所有更改 ## 🎯 适用场景 1. **人物头像展示** - 团队成员展示 - 社群用户展示 - 粉丝墙展示 2. **书籍/影视作品展示** - 图书封面展示 - 电影海报展示 - 视频封面展示 3. **风景/艺术作品展示** - 旅行照片集锦 - 艺术作品展示 - 摄影作品展示 4. **品牌/产品展示** - 品牌 Logo 墙 - 产品展示墙 - 合作伙伴展示 ## 💡 使用方法 ### 基本操作 1. **添加图片** - 直接输入图片 URL - 支持任何在线图片链接 - 自动优化显示效果 2. **添加文字** - 直接输入文字（建议 4 个字以内） - 自动创建文字头像 - 支持中英文混合 3. **批量添加** - 点击"批量添加"按钮 - 每行输入一个 URL 或文字 - 支持混合添加图片和文字 ### 列表管理 1. **创建新列表** - 点击"新建"按钮 - 输入列表名称 - 开始添加内容 2. **切换列表** - 使用顶部下拉菜单 - 快速切换不同分组 - 独立保存每个列表内容 3. **编辑列表** - 支持重命名列表 - 可以删除非默认列表 - 拖拽调整展示顺序 ## 🎨 展示效果 - 圆形裁剪：自动将图片裁剪为圆形 - 悬停效果：鼠标悬停时显示删除按钮 - 阴影效果：立体感展示 - 平滑动画：所有操作都有流畅过渡效果 ## 💻 技术特点 - 响应式布局：自适应各种屏幕尺寸 - 本地存储：使用 localStorage 保存数据 - 现代化设计：简洁优雅的 UI 风格 - 流畅交互：平滑的动画过渡效果 ## 🚀 使用建议 1. **图片选择** - 选择清晰度较高的图片 - 建议使用正方形或接近正方形的图片 - 核心内容居中效果最佳 2. **文字使用** - 建议文字长度控制在 4 个字符以内 - 可用于无图片资源时的替代显示 - 适合简短的标识或编号 3. **分组管理** - 根据内容类型创建不同分组 - 合理命名便于管理 - 定期整理更新内容 ## 🔄 更新维护 - 定期检查图片链接有效性 - 及时更新过期内容 - 备份重要的展示列表 ## 📝 注意事项 1. 图片 URL 需要是可直接访问的链接 2. 建议使用 https 链接以确保安全 3. 图片加载失败会自动从列表中移除 4. 默认列表不可删除，建议保留为备份用途 --- 通过这个圆形图片墙，您可以创建出独具特色的展示页面，无论是用于头像、展示团队成员、作品集锦，还是创建有趣的图片收藏，都能呈现出专业而美观的效果。
【HTML】 问题解决方案记录系统
在线地址：[问题解决方案记录](https://html.xn--4gqta1h0zg9yuu7a.fun/problem-list/index.html) 效果： <img src="https://pic.code-nav.cn/post_picture/1631847729158258689/229GHOR1qlxKV66q.webp" alt="PixPin_2025-03-03_18-10-57.png" width="100%" /> ## 项目背景 在日常生活和工作中，我们经常会遇到各种各样的问题。有些问题可能很常见，有些则比较特殊。 虽然我们最终都能找到解决方案，但这些宝贵的经验往往没有被很好地记录和分享。 ## 现状分析 ### 不记录不分享的原因 有些人选择不记录、不分享解决方案的原因可能是： - 觉得问题太简单不值得记录 - 直接保存了一个相关链接，未做其他额外的记录 - 懒得整理和记录，没有养成记录的习惯 - 问题涉及隐私 - 找不到合适的平台来分享 ### 分散式记录与分享的困境 另一些人则积极寻求和分享解决方案： - 在问答平台上提问和回答 - 通过即时通讯工具分享解决方法 - 在各类博客平台发表技术文章 - 在社交媒体上分享经验心得 但这种分散式的记录方式存在以下问题： - 内容分散在各个平台，难以统一管理 - 历史记录查找困难 - 无法建立个人知识体系 - 平台数据可能丢失 - 隐私难以保护 ## 项目目标 这个系统旨在提供一个简单、私密的平台，让用户能够： 1. 记录自己遇到的问题 2. 记录对应的解决方案 3. 方便地查看和管理历史记录 4. 随时编辑和更新内容 ## 设计理念 ### 1. 强制解决方案 - 若要新建问题，之前的问题需配备对应的解决方案 ### 2. 聊天式界面 - 采用类似 AI 对话的界面设计 - 问题显示在右侧，解决方案显示在左侧 - 直观的展示方式让内容更容易阅读和理解 ### 3. 简单操作 - 简洁的界面设计 - 最小化的操作步骤 - 专注于内容而不是形式 - 支持问题标题重命名，方便快速识别和分类 - 可以为复杂的问题设置简短的标识符 - 保持原问题内容不变 - 通过更贴切的命名优化问题列表的可读性 - 清晰的操作提示 - 显示快捷键说明（Enter 发送，Shift + Enter 换行） - 即时的用户反馈 - 引导式的操作流程 ### 4. 内容格式化 - 支持 Markdown 语法 - 支持标题、列表、代码块等富文本格式 - 保持原始 Markdown 文本便于编辑 - 美观的渲染显示效果 - 自动格式化 - 统一的排版样式 - 代码高亮显示 - 链接可点击 ### 5. 本地存储 - 数据存储在用户本地 - 保护用户隐私 - 无需担心数据泄露 ## 使用建议 1. 及时记录：问题解决后立即记录，保证细节的准确性 2. 清晰描述：简明扼要地描述问题和解决方案 3. 定期回顾：养成定期查看历史记录的习惯 4. 持续更新：如果发现更好的解决方案，及时更新记录 ## 未来展望 > 工作忙完了、立马摸鱼，但现在摸鱼变得有意思了，搞项目；但看似在开发项目，实则是指挥 AI 玩代码拼贴游戏。
【HTML】视频缩略图生成器
效果： <img src="https://pic.code-nav.cn/post_picture/1631847729158258689/wePcZkFPsE9thF4F.webp" alt="PixPin_2025-02-24_16-18-30.png" width="100%" /> 在线地址：[视频缩略图生成器](https://html.xn--4gqta1h0zg9yuu7a.fun/video-thumbnail-generator/index.html) 代码：页面右键 AI：cursor <br/> > 以下为 AI 生成内容 ## 视频缩略图生成器 这是一个基于 Web 技术开发的视频缩略图生成器，支持精确的时间控制和灵活的时间格式输入。 ## 主要功能 - **文件选择**： - 支持 `.mp4` 和 `.flv` 格式的视频文件 - 支持拖拽上传 - 文件选择区域视觉反馈 - **时间控制**： - 可设置开始时间和结束时间 - 支持秒数和时分秒两种格式（如：`5.1` 或 `00:00:05.1`） - 一键切换时间输入格式 - 支持精确到 0.1 秒的时间间隔设置 - **缩略图生成**： - 在指定时间范围内生成缩略图 - 实时进度显示 - 缩略图时间标签显示 - 根据时间间隔自动调整时间显示格式（整数秒或小数秒） - **缩略图展示**： - 网格布局展示 - 悬停动画效果 - 点击放大预览 - 支持响应式布局 ## 技术特性 - **前端技术**： - HTML5 视频处理 - CSS Grid 和 Flexbox 布局 - 现代 JavaScript ES6+ - CSS 变量实现主题定制 - **用户体验**： - 拖放文件上传 - 实时输入验证 - 进度条反馈 - 响应式设计 - **第三方库**： - Fancybox：用于图片预览 ## 使用说明 1. **选择视频**： - 点击上传区域选择视频文件 - 或直接将视频文件拖拽到上传区域 2. **设置时间**： - 设置开始时间：视频开始截取的时间点 - 设置结束时间：视频结束截取的时间点 - 设置时间间隔：两张缩略图之间的时间间隔 - 可点击"切换格式"在秒数和时分秒格式之间切换 3. **生成缩略图**： - 点击"生成缩略图"按钮 - 等待进度条完成 - 查看生成的缩略图列表 4. **查看缩略图**： - 将鼠标悬停在缩略图上可以看到放大效果 - 点击缩略图可以全屏预览 - 缩略图底部显示对应的时间点 ## 注意事项 - 支持的视频格式：`.mp4` 和 `.flv` - 时间输入格式： - 秒数格式：直接输入数字（如：5.1） - 时分秒格式：HH:MM:SS.S（如：00:00:05.1） - 时间间隔最小支持 0.1 秒 - 开始时间必须小于结束时间 - 建议使用现代浏览器以获得最佳体验 ## 未来计划 - [ ] 支持更多视频格式（如 WebM、AVI 等） - [ ] 添加缩略图尺寸调整功能 - [ ] 支持批量导出缩略图 - [ ] 添加暗色主题 - [ ] 支持自定义缩略图质量 - [ ] 添加键盘快捷键支持
【HTML】记忆录 - 为逝去的时光留下印记
> 感觉太复杂了，先不搞了 半成品：[记忆录](https://html.xn--4gqta1h0zg9yuu7a.fun/%E8%AE%B0%E5%BF%86%E5%BD%95/index.html) <br/> 效果： <img src="https://pic.code-nav.cn/post_picture/1631847729158258689/9GkrukgIHudp0fTk.webp" alt="1740123438032.png" width="474px" /> <img src="https://pic.code-nav.cn/post_picture/1631847729158258689/UIL2CSs4J0vHT6MP.webp" alt="1740123459985.png" width="507px" /> <br/> <br/> 过程： 我： 创意：手机微信有联系人，可以跟他们聊天，但现实实际上我们和某些人都没有这种聊天方式，例如已经去世的奶奶，搬家前的邻居小孩等等等，这些人在微信上是没有他们的联系方式的 所以这个项目的意义是添加这些微信上没有联系方式的 人，聊天详情，每一次对话，记录曾经发生的事情 所以请帮我重构这个项目，所有文件 <br/> > 以下为 AI 生成内容 <br/> 在这个数字化的时代,我们的社交关系被简化为通讯录里的一个个联系人。然而,生命中最珍贵的一些连接,却往往无法在微信上找到。 ## 遗失的联系人 - 已经离世的至亲,如慈祥的奶奶 - 儿时的玩伴,如搬家前的邻居小孩 - 曾经的同窗,如小学时的同桌 - 生命中的过客,如旅途中偶遇的陌生人 他们或许已经不在我们的通讯录里,但在记忆中永远鲜活。每一个微笑、每一句话语、每一个瞬间,都值得被铭记。 ## 记忆的重量 记忆录不只是一个通讯录,它是: 1. 时光的容器 - 记录下与重要的人在一起的点点滴滴 - 保存那些无法再重现的对话和故事 - 为逝去的时光留下印记 2. 情感的寄托 - 写下想说却来不及说的话 - 存放未能实现的约定 - 珍藏共同经历的美好回忆 3. 生命的见证 - 见证成长的历程 - 铭记生命中的重要他人 - 传承情感的温度 ## 数字化的记忆方式 记忆录提供了一种新的方式来保存这些珍贵的记忆: - 创建虚拟的联系人档案 - 记录曾经发生的对话和故事 - 添加照片、语音等多媒体内容 - 为每段记忆添加时间、地点、心情等标签 这不是一个普通的社交应用,而是一个承载记忆、传递情感的数字时光机。 ## 情感的永恒 当我们翻开记忆录,每一页都是一段值得铭记的故事。虽然有些人已经无法相见,但在这里,我们可以: - 继续与他们"对话" - 回忆共同的点点滴滴 - 表达未能当面说出的话语 - 珍藏永恒的思念 记忆录,让逝去的时光有了可以停驻的港湾,让遗失的联系重新被找回,让珍贵的情感得以永存。