最近在整理旧项目时重新搭建了一个《小马宝莉》主题的厨房互动页面。这个项目特别适合前端新手练习HTML、CSS和JavaScript的综合运用尤其是事件处理、DOM操作和响应式布局。本文将完整复现这个厨房场景的实现过程从零开始构建一个包含食材选择、烹饪互动和成品展示的趣味页面。1. 项目背景与核心概念《小马宝莉》厨房项目是一个基于Web的前端互动应用主要模拟厨房中的食材选择和简单烹饪流程。通过这个项目开发者可以学习到DOM动态操作如何通过JavaScript实时更新页面元素事件处理机制点击、拖拽等用户交互的实现CSS动画效果过渡动画和变换效果的应用响应式设计适配不同屏幕尺寸的布局方案该项目特别适合有一定HTML/CSS基础想要进阶学习JavaScript交互开发的初学者。完整实现后你将掌握一个完整小型互动项目的开发思路。2. 环境准备与版本说明本项目为纯前端项目无需后端支持只需要现代浏览器即可运行。开发环境要求操作系统Windows 10/macOS 10.14/Linux Ubuntu 18.04浏览器Chrome 90/Firefox 88/Safari 14代码编辑器VS Code 1.60 或其他现代编辑器本地服务器建议使用Live Server扩展避免跨域问题技术栈版本HTML5CSS3使用Flexbox布局Vanilla JavaScriptES6图标字体Font Awesome 6.0项目结构规划pony-kitchen/ ├── index.html # 主页面 ├── css/ │ └── style.css # 样式文件 ├── js/ │ └── script.js # 交互逻辑 └── images/ ├── ingredients/ # 食材图片 └── ponies/ # 小马宝莉角色图片3. 核心功能设计与实现思路3.1 页面布局设计厨房界面采用经典的左右分栏布局左侧为食材选择区右侧为烹饪操作区。这种布局符合用户从左到右的操作习惯便于理解烹饪流程。布局关键点使用CSS Flexbox实现响应式布局固定顶部导航栏确保核心功能始终可见为触屏设备优化点击区域大小使用CSS变量统一颜色主题3.2 交互逻辑设计项目包含三个主要交互环节食材选择、烹饪操作和结果展示。每个环节都需要考虑用户操作的反馈和状态管理。状态管理方案使用JavaScript对象存储当前选择的食材通过CSS类名切换不同交互状态利用data-*属性存储元素元数据实现简单的撤销/重做功能3.3 动画效果设计适当的动画效果可以提升用户体验但需要遵循以下原则动画时长控制在300-500毫秒之间使用CSS transform实现性能优化的动画为减少运动不适的用户提供减少动画的选项确保动画不会干扰主要操作流程4. 完整代码实现4.1 HTML结构搭建首先创建基本的HTML骨架定义页面的主要区域和功能模块。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小马宝莉厨房 - 互动烹饪体验/title link relstylesheet hrefcss/style.css link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css /head body header classkitchen-header h1i classfas fa-utensils/i 小马宝莉魔法厨房/h1 nav classmain-nav button idreset-btn classnav-btn重新开始/button button idhelp-btn classnav-btn使用帮助/button /nav /header main classkitchen-container section classingredients-panel h2选择食材/h2 div classingredients-grid idingredients-grid !-- 食材选项将通过JavaScript动态生成 -- /div /section section classcooking-area div classcooking-pan idcooking-pan div classpan-content idpan-content span classempty-pan-text将食材拖拽到这里开始烹饪/span /div /div div classcooking-controls button idcook-btn classcook-button disabled开始烹饪/button button idclear-btn classclear-button清空锅具/button /div /section section classresult-panel h2烹饪成果/h2 div classresult-display idresult-display div classwaiting-result等待美味的诞生.../div /div /section /main div idhelp-modal classmodal div classmodal-content span classclose-modaltimes;/span h3厨房使用指南/h3 ol li从左侧选择喜欢的食材/li li将食材拖拽到中间的锅具中/li li点击开始烹饪按钮/li li查看右侧的烹饪成果/li /ol /div /div script srcjs/script.js/script /body /html4.2 CSS样式设计创建完整的样式文件确保界面美观且用户体验良好。/* CSS变量定义 - 小马宝莉主题色 */ :root { --primary-color: #ff6b88; --secondary-color: #4ecdc4; --accent-color: #ffd166; --background-color: #f9f7fe; --text-color: #333333; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --border-radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Comic Sans MS, 楷体, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; color: var(--text-color); } .kitchen-header { background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); } .main-nav { display: flex; gap: 1rem; } .nav-btn { background: rgba(255, 255, 255, 0.2); border: 2px solid white; color: white; padding: 0.5rem 1rem; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; } .nav-btn:hover { background: white; color: var(--primary-color); } .kitchen-container { display: flex; gap: 2rem; padding: 2rem; max-width: 1400px; margin: 0 auto; } .ingredients-panel, .result-panel { flex: 1; background: white; border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow); } .cooking-area { flex: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .ingredients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-top: 1rem; } .ingredient-item { background: var(--background-color); border: 2px dashed var(--secondary-color); border-radius: var(--border-radius); padding: 1rem; text-align: center; cursor: grab; transition: all 0.3s ease; } .ingredient-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .ingredient-item:active { cursor: grabbing; } .cooking-pan { width: 300px; height: 300px; background: linear-gradient(145deg, #8B4513, #A0522D); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); position: relative; } .pan-content { width: 80%; height: 80%; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px dashed rgba(255, 255, 255, 0.3); } .empty-pan-text { color: rgba(255, 255, 255, 0.7); font-style: italic; } .cooking-controls { display: flex; gap: 1rem; } .cook-button, .clear-button { padding: 0.75rem 1.5rem; border: none; border-radius: 25px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; } .cook-button { background: var(--primary-color); color: white; } .cook-button:disabled { background: #cccccc; cursor: not-allowed; } .cook-button:not(:disabled):hover { background: #ff4d6d; transform: scale(1.05); } .clear-button { background: var(--secondary-color); color: white; } .clear-button:hover { background: #3bb4ac; } .result-display { min-height: 200px; display: flex; align-items: center; justify-content: center; background: var(--background-color); border-radius: var(--border-radius); margin-top: 1rem; } /* 模态框样式 */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: white; margin: 15% auto; padding: 2rem; border-radius: var(--border-radius); width: 90%; max-width: 500px; position: relative; } .close-modal { position: absolute; right: 1rem; top: 1rem; font-size: 1.5rem; cursor: pointer; } /* 响应式设计 */ media (max-width: 768px) { .kitchen-container { flex-direction: column; padding: 1rem; } .cooking-pan { width: 250px; height: 250px; } .ingredients-grid { grid-template-columns: repeat(3, 1fr); } }4.3 JavaScript交互逻辑实现完整的交互功能包括食材选择、拖拽操作和烹饪逻辑。// 食材数据定义 const ingredientsData [ { id: 1, name: 苹果, emoji: , type: fruit, color: #ff6b6b }, { id: 2, name: 胡萝卜, emoji: , type: vegetable, color: #ffa726 }, { id: 3, name: 小麦, emoji: , type: grain, color: #ffd54f }, { id: 4, name: 牛奶, emoji: , type: dairy, color: #ffffff }, { id: 5, name: 鸡蛋, emoji: , type: protein, color: #f5f5f5 }, { id: 6, name: 蜂蜜, emoji: , type: sweetener, color: #ffb74d }, { id: 7, name: 草莓, emoji: , type: fruit, color: #f44336 }, { id: 8, name: 巧克力, emoji: , type: sweet, color: #6d4c41 } ]; // 烹饪结果配置 const recipes { apple_carrot: { name: 苹果胡萝卜汁, emoji: , description: 暮光闪闪最爱的健康饮品, ingredients: [apple, carrot] }, pancake: { name: 蜂蜜松饼, emoji: , description: 云宝黛西的闪电早餐, ingredients: [wheat, milk, egg, honey] }, chocolate_strawberry: { name: 巧克力草莓, emoji: , description: 珍奇推荐的时尚甜点, ingredients: [chocolate, strawberry] } }; class PonyKitchen { constructor() { this.selectedIngredients []; this.isCooking false; this.init(); } init() { this.generateIngredients(); this.setupEventListeners(); this.setupDragAndDrop(); } // 生成食材选择界面 generateIngredients() { const grid document.getElementById(ingredients-grid); grid.innerHTML ; ingredientsData.forEach(ingredient { const ingredientElement document.createElement(div); ingredientElement.className ingredient-item; ingredientElement.innerHTML div stylefont-size: 2rem;${ingredient.emoji}/div div${ingredient.name}/div ; ingredientElement.dataset.id ingredient.id; ingredientElement.dataset.name ingredient.name.toLowerCase(); grid.appendChild(ingredientElement); }); } // 设置事件监听器 setupEventListeners() { document.getElementById(reset-btn).addEventListener(click, () this.resetKitchen()); document.getElementById(help-btn).addEventListener(click, () this.showHelp()); document.getElementById(cook-btn).addEventListener(click, () this.startCooking()); document.getElementById(clear-btn).addEventListener(click, () this.clearPan()); const closeModal document.querySelector(.close-modal); closeModal.addEventListener(click, () this.hideHelp()); // 点击模态框外部关闭 window.addEventListener(click, (event) { const modal document.getElementById(help-modal); if (event.target modal) { this.hideHelp(); } }); } // 设置拖拽功能 setupDragAndDrop() { const pan document.getElementById(pan-content); // 设置食材可拖拽 document.querySelectorAll(.ingredient-item).forEach(item { item.setAttribute(draggable, true); item.addEventListener(dragstart, (e) { e.dataTransfer.setData(text/plain, item.dataset.id); item.classList.add(dragging); }); item.addEventListener(dragend, () { item.classList.remove(dragging); }); }); // 锅具接收拖拽 pan.addEventListener(dragover, (e) { e.preventDefault(); pan.classList.add(drag-over); }); pan.addEventListener(dragleave, () { pan.classList.remove(drag-over); }); pan.addEventListener(drop, (e) { e.preventDefault(); pan.classList.remove(drag-over); const ingredientId e.dataTransfer.getData(text/plain); this.addIngredientToPan(parseInt(ingredientId)); }); } // 添加食材到锅具 addIngredientToPan(ingredientId) { const ingredient ingredientsData.find(item item.id ingredientId); if (!ingredient) return; // 检查是否已添加 if (this.selectedIngredients.find(item item.id ingredientId)) { this.showMessage(这个食材已经在锅里面了, warning); return; } this.selectedIngredients.push(ingredient); this.updatePanDisplay(); this.updateCookButton(); this.showMessage(添加了 ${ingredient.name}, success); } // 更新锅具显示 updatePanDisplay() { const panContent document.getElementById(pan-content); const emptyText panContent.querySelector(.empty-pan-text); if (emptyText) { emptyText.remove(); } panContent.innerHTML this.selectedIngredients.map(ingredient span stylefont-size: 2rem; margin: 0.5rem;${ingredient.emoji}/span ).join(); if (this.selectedIngredients.length 0) { panContent.innerHTML span classempty-pan-text将食材拖拽到这里开始烹饪/span; } } // 更新烹饪按钮状态 updateCookButton() { const cookButton document.getElementById(cook-btn); cookButton.disabled this.selectedIngredients.length 0; } // 开始烹饪 startCooking() { if (this.isCooking || this.selectedIngredients.length 0) return; this.isCooking true; const cookButton document.getElementById(cook-btn); cookButton.disabled true; cookButton.textContent 烹饪中...; // 模拟烹饪过程 this.showCookingAnimation(); setTimeout(() { this.finishCooking(); }, 2000); } // 显示烹饪动画 showCookingAnimation() { const pan document.getElementById(cooking-pan); pan.style.animation cookBubble 2s ease-in-out; // 添加烹饪气泡效果 const bubbleInterval setInterval(() { this.createBubble(); }, 200); setTimeout(() { clearInterval(bubbleInterval); pan.style.animation ; }, 2000); } // 创建气泡效果 createBubble() { const pan document.getElementById(cooking-pan); const bubble document.createElement(div); bubble.style.cssText position: absolute; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; bottom: 10%; left: ${Math.random() * 80 10}%; animation: bubbleRise 1s ease-out forwards; ; pan.appendChild(bubble); setTimeout(() { bubble.remove(); }, 1000); } // 完成烹饪 finishCooking() { this.isCooking false; const cookButton document.getElementById(cook-btn); cookButton.disabled false; cookButton.textContent 开始烹饪; const result this.calculateResult(); this.displayResult(result); this.selectedIngredients []; this.updatePanDisplay(); } // 计算烹饪结果 calculateResult() { const ingredientNames this.selectedIngredients.map(ing ing.name.toLowerCase()); // 匹配已知食谱 for (const [key, recipe] of Object.entries(recipes)) { if (this.arraysEqual(recipe.ingredients.sort(), ingredientNames.sort())) { return { type: success, ...recipe }; } } // 随机生成有趣的结果 const randomResults [ { name: 神秘混合物, emoji: , description: 这可能是某种新发明 }, { name: 彩色糊糊, emoji: , description: 看起来...很有创意 }, { name: 能量饮料, emoji: ⚡, description: 萍琪派会喜欢的 } ]; return { type: random, ...randomResults[Math.floor(Math.random() * randomResults.length)] }; } // 比较数组是否相等 arraysEqual(arr1, arr2) { return arr1.length arr2.length arr1.every((value, index) value arr2[index]); } // 显示烹饪结果 displayResult(result) { const resultDisplay document.getElementById(result-display); resultDisplay.innerHTML div classresult-success div stylefont-size: 4rem;${result.emoji}/div h3${result.name}/h3 p${result.description}/p div classresult-ingredients 使用了: ${this.selectedIngredients.map(ing ing.name).join( )} /div /div ; } // 清空锅具 clearPan() { this.selectedIngredients []; this.updatePanDisplay(); this.updateCookButton(); this.showMessage(锅具已清空, info); } // 重置厨房 resetKitchen() { this.selectedIngredients []; this.isCooking false; this.updatePanDisplay(); this.updateCookButton(); const resultDisplay document.getElementById(result-display); resultDisplay.innerHTML div classwaiting-result等待美味的诞生.../div; this.showMessage(厨房已重置, info); } // 显示消息提示 showMessage(message, type) { // 创建消息元素 const messageEl document.createElement(div); messageEl.className message ${type}; messageEl.textContent message; messageEl.style.cssText position: fixed; top: 100px; right: 20px; padding: 1rem 2rem; background: ${type success ? #4caf50 : type warning ? #ff9800 : type info ? #2196f3 : #f44336}; color: white; border-radius: var(--border-radius); z-index: 1001; animation: slideIn 0.3s ease; ; document.body.appendChild(messageEl); setTimeout(() { messageEl.remove(); }, 3000); } // 显示帮助信息 showHelp() { document.getElementById(help-modal).style.display block; } // 隐藏帮助信息 hideHelp() { document.getElementById(help-modal).style.display none; } } // 添加CSS动画 const style document.createElement(style); style.textContent keyframes cookBubble { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } keyframes bubbleRise { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-100px) scale(0.5); opacity: 0; } } keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .result-success { text-align: center; padding: 2rem; } .result-ingredients { margin-top: 1rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.1); border-radius: var(--border-radius); font-style: italic; } ; document.head.appendChild(style); // 初始化厨房应用 document.addEventListener(DOMContentLoaded, () { new PonyKitchen(); });5. 功能测试与验证5.1 基础功能测试完成代码编写后需要系统测试各项功能是否正常工作食材拖拽测试确保每个食材都可以正常拖拽到锅具中重复添加防护测试同一食材不能重复添加烹饪按钮状态验证空锅具时按钮禁用有食材时启用烹饪流程测试完整的烹饪动画和结果展示清空重置功能确认清空和重置按钮正常工作5.2 兼容性测试在不同环境和设备上进行测试浏览器兼容Chrome、Firefox、Safari最新版本移动端适配手机和平板设备的触摸操作屏幕尺寸响应式布局在各种分辨率下的表现性能测试确保动画流畅无内存泄漏5.3 用户体验优化根据测试结果进行优化添加加载状态指示优化触摸设备的拖拽体验增加键盘导航支持提供更详细的操作反馈6. 常见问题与解决方案6.1 拖拽功能不工作问题现象食材无法拖拽到锅具中可能原因浏览器不支持HTML5拖拽API事件监听器未正确绑定元素draggable属性未设置解决方案// 确保所有可拖拽元素都设置了draggable属性 element.setAttribute(draggable, true); // 检查事件监听器绑定 element.addEventListener(dragstart, handleDragStart); dropZone.addEventListener(dragover, handleDragOver); dropZone.addEventListener(drop, handleDrop);6.2 移动端触摸支持问题现象在手机和平板上无法正常操作解决方案添加触摸事件支持// 为移动端添加触摸事件支持 if (ontouchstart in window) { ingredientElement.addEventListener(touchstart, handleTouchStart); ingredientElement.addEventListener(touchend, handleTouchEnd); pan.addEventListener(touchmove, handleTouchMove); }6.3 动画性能优化问题现象烹饪动画卡顿或不流畅优化方案/* 使用transform和opacity实现高性能动画 */ .cooking-pan { will-change: transform; transform: translateZ(0); } keyframes cookBubble { /* 使用transform代替left/top动画 */ transform: translateY(var(--start-y)) translateX(var(--start-x)); }7. 扩展功能与进阶优化7.1 本地存储功能添加本地存储保存用户的烹饪记录class KitchenStorage { static saveRecipe(recipe) { const recipes this.getRecipes(); recipes.push({ ...recipe, timestamp: new Date().toISOString() }); localStorage.setItem(ponyKitchenRecipes, JSON.stringify(recipes)); } static getRecipes() { return JSON.parse(localStorage.getItem(ponyKitchenRecipes) || []); } }7.2 音效增强添加烹饪音效提升沉浸感class KitchenAudio { constructor() { this.sounds { add: new Audio(sounds/add-ingredient.mp3), cook: new Audio(sounds/cooking.mp3), success: new Audio(sounds/success.mp3) }; } playSound(soundName) { if (this.sounds[soundName]) { this.sounds[soundName].currentTime 0; this.sounds[soundName].play(); } } }7.3 食谱分享功能实现食谱分享到社交媒体的功能class RecipeSharer { static shareRecipe(recipe) { if (navigator.share) { navigator.share({ title: 我在小马宝莉厨房制作了${recipe.name}, text: recipe.description, url: window.location.href }); } else { // 降级方案复制到剪贴板 this.copyToClipboard(recipe); } } }这个《小马宝莉》厨房项目完整展示了前端开发的完整流程从需求分析到功能实现再到测试优化。通过这个项目你可以掌握现代Web开发的核心技能为更复杂的项目打下坚实基础。项目代码完全开源你可以根据需要进行修改和扩展。建议尝试添加新的食材类型、烹饪动画效果或者集成后端API实现用户登录和食谱保存功能。 前端DOM操作与事件处理实战：小马宝莉厨房互动项目开发
最近在整理旧项目时重新搭建了一个《小马宝莉》主题的厨房互动页面。这个项目特别适合前端新手练习HTML、CSS和JavaScript的综合运用尤其是事件处理、DOM操作和响应式布局。本文将完整复现这个厨房场景的实现过程从零开始构建一个包含食材选择、烹饪互动和成品展示的趣味页面。1. 项目背景与核心概念《小马宝莉》厨房项目是一个基于Web的前端互动应用主要模拟厨房中的食材选择和简单烹饪流程。通过这个项目开发者可以学习到DOM动态操作如何通过JavaScript实时更新页面元素事件处理机制点击、拖拽等用户交互的实现CSS动画效果过渡动画和变换效果的应用响应式设计适配不同屏幕尺寸的布局方案该项目特别适合有一定HTML/CSS基础想要进阶学习JavaScript交互开发的初学者。完整实现后你将掌握一个完整小型互动项目的开发思路。2. 环境准备与版本说明本项目为纯前端项目无需后端支持只需要现代浏览器即可运行。开发环境要求操作系统Windows 10/macOS 10.14/Linux Ubuntu 18.04浏览器Chrome 90/Firefox 88/Safari 14代码编辑器VS Code 1.60 或其他现代编辑器本地服务器建议使用Live Server扩展避免跨域问题技术栈版本HTML5CSS3使用Flexbox布局Vanilla JavaScriptES6图标字体Font Awesome 6.0项目结构规划pony-kitchen/ ├── index.html # 主页面 ├── css/ │ └── style.css # 样式文件 ├── js/ │ └── script.js # 交互逻辑 └── images/ ├── ingredients/ # 食材图片 └── ponies/ # 小马宝莉角色图片3. 核心功能设计与实现思路3.1 页面布局设计厨房界面采用经典的左右分栏布局左侧为食材选择区右侧为烹饪操作区。这种布局符合用户从左到右的操作习惯便于理解烹饪流程。布局关键点使用CSS Flexbox实现响应式布局固定顶部导航栏确保核心功能始终可见为触屏设备优化点击区域大小使用CSS变量统一颜色主题3.2 交互逻辑设计项目包含三个主要交互环节食材选择、烹饪操作和结果展示。每个环节都需要考虑用户操作的反馈和状态管理。状态管理方案使用JavaScript对象存储当前选择的食材通过CSS类名切换不同交互状态利用data-*属性存储元素元数据实现简单的撤销/重做功能3.3 动画效果设计适当的动画效果可以提升用户体验但需要遵循以下原则动画时长控制在300-500毫秒之间使用CSS transform实现性能优化的动画为减少运动不适的用户提供减少动画的选项确保动画不会干扰主要操作流程4. 完整代码实现4.1 HTML结构搭建首先创建基本的HTML骨架定义页面的主要区域和功能模块。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小马宝莉厨房 - 互动烹饪体验/title link relstylesheet hrefcss/style.css link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css /head body header classkitchen-header h1i classfas fa-utensils/i 小马宝莉魔法厨房/h1 nav classmain-nav button idreset-btn classnav-btn重新开始/button button idhelp-btn classnav-btn使用帮助/button /nav /header main classkitchen-container section classingredients-panel h2选择食材/h2 div classingredients-grid idingredients-grid !-- 食材选项将通过JavaScript动态生成 -- /div /section section classcooking-area div classcooking-pan idcooking-pan div classpan-content idpan-content span classempty-pan-text将食材拖拽到这里开始烹饪/span /div /div div classcooking-controls button idcook-btn classcook-button disabled开始烹饪/button button idclear-btn classclear-button清空锅具/button /div /section section classresult-panel h2烹饪成果/h2 div classresult-display idresult-display div classwaiting-result等待美味的诞生.../div /div /section /main div idhelp-modal classmodal div classmodal-content span classclose-modaltimes;/span h3厨房使用指南/h3 ol li从左侧选择喜欢的食材/li li将食材拖拽到中间的锅具中/li li点击开始烹饪按钮/li li查看右侧的烹饪成果/li /ol /div /div script srcjs/script.js/script /body /html4.2 CSS样式设计创建完整的样式文件确保界面美观且用户体验良好。/* CSS变量定义 - 小马宝莉主题色 */ :root { --primary-color: #ff6b88; --secondary-color: #4ecdc4; --accent-color: #ffd166; --background-color: #f9f7fe; --text-color: #333333; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --border-radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Comic Sans MS, 楷体, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; color: var(--text-color); } .kitchen-header { background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); } .main-nav { display: flex; gap: 1rem; } .nav-btn { background: rgba(255, 255, 255, 0.2); border: 2px solid white; color: white; padding: 0.5rem 1rem; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; } .nav-btn:hover { background: white; color: var(--primary-color); } .kitchen-container { display: flex; gap: 2rem; padding: 2rem; max-width: 1400px; margin: 0 auto; } .ingredients-panel, .result-panel { flex: 1; background: white; border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow); } .cooking-area { flex: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .ingredients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-top: 1rem; } .ingredient-item { background: var(--background-color); border: 2px dashed var(--secondary-color); border-radius: var(--border-radius); padding: 1rem; text-align: center; cursor: grab; transition: all 0.3s ease; } .ingredient-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .ingredient-item:active { cursor: grabbing; } .cooking-pan { width: 300px; height: 300px; background: linear-gradient(145deg, #8B4513, #A0522D); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); position: relative; } .pan-content { width: 80%; height: 80%; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px dashed rgba(255, 255, 255, 0.3); } .empty-pan-text { color: rgba(255, 255, 255, 0.7); font-style: italic; } .cooking-controls { display: flex; gap: 1rem; } .cook-button, .clear-button { padding: 0.75rem 1.5rem; border: none; border-radius: 25px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; } .cook-button { background: var(--primary-color); color: white; } .cook-button:disabled { background: #cccccc; cursor: not-allowed; } .cook-button:not(:disabled):hover { background: #ff4d6d; transform: scale(1.05); } .clear-button { background: var(--secondary-color); color: white; } .clear-button:hover { background: #3bb4ac; } .result-display { min-height: 200px; display: flex; align-items: center; justify-content: center; background: var(--background-color); border-radius: var(--border-radius); margin-top: 1rem; } /* 模态框样式 */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: white; margin: 15% auto; padding: 2rem; border-radius: var(--border-radius); width: 90%; max-width: 500px; position: relative; } .close-modal { position: absolute; right: 1rem; top: 1rem; font-size: 1.5rem; cursor: pointer; } /* 响应式设计 */ media (max-width: 768px) { .kitchen-container { flex-direction: column; padding: 1rem; } .cooking-pan { width: 250px; height: 250px; } .ingredients-grid { grid-template-columns: repeat(3, 1fr); } }4.3 JavaScript交互逻辑实现完整的交互功能包括食材选择、拖拽操作和烹饪逻辑。// 食材数据定义 const ingredientsData [ { id: 1, name: 苹果, emoji: , type: fruit, color: #ff6b6b }, { id: 2, name: 胡萝卜, emoji: , type: vegetable, color: #ffa726 }, { id: 3, name: 小麦, emoji: , type: grain, color: #ffd54f }, { id: 4, name: 牛奶, emoji: , type: dairy, color: #ffffff }, { id: 5, name: 鸡蛋, emoji: , type: protein, color: #f5f5f5 }, { id: 6, name: 蜂蜜, emoji: , type: sweetener, color: #ffb74d }, { id: 7, name: 草莓, emoji: , type: fruit, color: #f44336 }, { id: 8, name: 巧克力, emoji: , type: sweet, color: #6d4c41 } ]; // 烹饪结果配置 const recipes { apple_carrot: { name: 苹果胡萝卜汁, emoji: , description: 暮光闪闪最爱的健康饮品, ingredients: [apple, carrot] }, pancake: { name: 蜂蜜松饼, emoji: , description: 云宝黛西的闪电早餐, ingredients: [wheat, milk, egg, honey] }, chocolate_strawberry: { name: 巧克力草莓, emoji: , description: 珍奇推荐的时尚甜点, ingredients: [chocolate, strawberry] } }; class PonyKitchen { constructor() { this.selectedIngredients []; this.isCooking false; this.init(); } init() { this.generateIngredients(); this.setupEventListeners(); this.setupDragAndDrop(); } // 生成食材选择界面 generateIngredients() { const grid document.getElementById(ingredients-grid); grid.innerHTML ; ingredientsData.forEach(ingredient { const ingredientElement document.createElement(div); ingredientElement.className ingredient-item; ingredientElement.innerHTML div stylefont-size: 2rem;${ingredient.emoji}/div div${ingredient.name}/div ; ingredientElement.dataset.id ingredient.id; ingredientElement.dataset.name ingredient.name.toLowerCase(); grid.appendChild(ingredientElement); }); } // 设置事件监听器 setupEventListeners() { document.getElementById(reset-btn).addEventListener(click, () this.resetKitchen()); document.getElementById(help-btn).addEventListener(click, () this.showHelp()); document.getElementById(cook-btn).addEventListener(click, () this.startCooking()); document.getElementById(clear-btn).addEventListener(click, () this.clearPan()); const closeModal document.querySelector(.close-modal); closeModal.addEventListener(click, () this.hideHelp()); // 点击模态框外部关闭 window.addEventListener(click, (event) { const modal document.getElementById(help-modal); if (event.target modal) { this.hideHelp(); } }); } // 设置拖拽功能 setupDragAndDrop() { const pan document.getElementById(pan-content); // 设置食材可拖拽 document.querySelectorAll(.ingredient-item).forEach(item { item.setAttribute(draggable, true); item.addEventListener(dragstart, (e) { e.dataTransfer.setData(text/plain, item.dataset.id); item.classList.add(dragging); }); item.addEventListener(dragend, () { item.classList.remove(dragging); }); }); // 锅具接收拖拽 pan.addEventListener(dragover, (e) { e.preventDefault(); pan.classList.add(drag-over); }); pan.addEventListener(dragleave, () { pan.classList.remove(drag-over); }); pan.addEventListener(drop, (e) { e.preventDefault(); pan.classList.remove(drag-over); const ingredientId e.dataTransfer.getData(text/plain); this.addIngredientToPan(parseInt(ingredientId)); }); } // 添加食材到锅具 addIngredientToPan(ingredientId) { const ingredient ingredientsData.find(item item.id ingredientId); if (!ingredient) return; // 检查是否已添加 if (this.selectedIngredients.find(item item.id ingredientId)) { this.showMessage(这个食材已经在锅里面了, warning); return; } this.selectedIngredients.push(ingredient); this.updatePanDisplay(); this.updateCookButton(); this.showMessage(添加了 ${ingredient.name}, success); } // 更新锅具显示 updatePanDisplay() { const panContent document.getElementById(pan-content); const emptyText panContent.querySelector(.empty-pan-text); if (emptyText) { emptyText.remove(); } panContent.innerHTML this.selectedIngredients.map(ingredient span stylefont-size: 2rem; margin: 0.5rem;${ingredient.emoji}/span ).join(); if (this.selectedIngredients.length 0) { panContent.innerHTML span classempty-pan-text将食材拖拽到这里开始烹饪/span; } } // 更新烹饪按钮状态 updateCookButton() { const cookButton document.getElementById(cook-btn); cookButton.disabled this.selectedIngredients.length 0; } // 开始烹饪 startCooking() { if (this.isCooking || this.selectedIngredients.length 0) return; this.isCooking true; const cookButton document.getElementById(cook-btn); cookButton.disabled true; cookButton.textContent 烹饪中...; // 模拟烹饪过程 this.showCookingAnimation(); setTimeout(() { this.finishCooking(); }, 2000); } // 显示烹饪动画 showCookingAnimation() { const pan document.getElementById(cooking-pan); pan.style.animation cookBubble 2s ease-in-out; // 添加烹饪气泡效果 const bubbleInterval setInterval(() { this.createBubble(); }, 200); setTimeout(() { clearInterval(bubbleInterval); pan.style.animation ; }, 2000); } // 创建气泡效果 createBubble() { const pan document.getElementById(cooking-pan); const bubble document.createElement(div); bubble.style.cssText position: absolute; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; bottom: 10%; left: ${Math.random() * 80 10}%; animation: bubbleRise 1s ease-out forwards; ; pan.appendChild(bubble); setTimeout(() { bubble.remove(); }, 1000); } // 完成烹饪 finishCooking() { this.isCooking false; const cookButton document.getElementById(cook-btn); cookButton.disabled false; cookButton.textContent 开始烹饪; const result this.calculateResult(); this.displayResult(result); this.selectedIngredients []; this.updatePanDisplay(); } // 计算烹饪结果 calculateResult() { const ingredientNames this.selectedIngredients.map(ing ing.name.toLowerCase()); // 匹配已知食谱 for (const [key, recipe] of Object.entries(recipes)) { if (this.arraysEqual(recipe.ingredients.sort(), ingredientNames.sort())) { return { type: success, ...recipe }; } } // 随机生成有趣的结果 const randomResults [ { name: 神秘混合物, emoji: , description: 这可能是某种新发明 }, { name: 彩色糊糊, emoji: , description: 看起来...很有创意 }, { name: 能量饮料, emoji: ⚡, description: 萍琪派会喜欢的 } ]; return { type: random, ...randomResults[Math.floor(Math.random() * randomResults.length)] }; } // 比较数组是否相等 arraysEqual(arr1, arr2) { return arr1.length arr2.length arr1.every((value, index) value arr2[index]); } // 显示烹饪结果 displayResult(result) { const resultDisplay document.getElementById(result-display); resultDisplay.innerHTML div classresult-success div stylefont-size: 4rem;${result.emoji}/div h3${result.name}/h3 p${result.description}/p div classresult-ingredients 使用了: ${this.selectedIngredients.map(ing ing.name).join( )} /div /div ; } // 清空锅具 clearPan() { this.selectedIngredients []; this.updatePanDisplay(); this.updateCookButton(); this.showMessage(锅具已清空, info); } // 重置厨房 resetKitchen() { this.selectedIngredients []; this.isCooking false; this.updatePanDisplay(); this.updateCookButton(); const resultDisplay document.getElementById(result-display); resultDisplay.innerHTML div classwaiting-result等待美味的诞生.../div; this.showMessage(厨房已重置, info); } // 显示消息提示 showMessage(message, type) { // 创建消息元素 const messageEl document.createElement(div); messageEl.className message ${type}; messageEl.textContent message; messageEl.style.cssText position: fixed; top: 100px; right: 20px; padding: 1rem 2rem; background: ${type success ? #4caf50 : type warning ? #ff9800 : type info ? #2196f3 : #f44336}; color: white; border-radius: var(--border-radius); z-index: 1001; animation: slideIn 0.3s ease; ; document.body.appendChild(messageEl); setTimeout(() { messageEl.remove(); }, 3000); } // 显示帮助信息 showHelp() { document.getElementById(help-modal).style.display block; } // 隐藏帮助信息 hideHelp() { document.getElementById(help-modal).style.display none; } } // 添加CSS动画 const style document.createElement(style); style.textContent keyframes cookBubble { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } keyframes bubbleRise { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-100px) scale(0.5); opacity: 0; } } keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .result-success { text-align: center; padding: 2rem; } .result-ingredients { margin-top: 1rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.1); border-radius: var(--border-radius); font-style: italic; } ; document.head.appendChild(style); // 初始化厨房应用 document.addEventListener(DOMContentLoaded, () { new PonyKitchen(); });5. 功能测试与验证5.1 基础功能测试完成代码编写后需要系统测试各项功能是否正常工作食材拖拽测试确保每个食材都可以正常拖拽到锅具中重复添加防护测试同一食材不能重复添加烹饪按钮状态验证空锅具时按钮禁用有食材时启用烹饪流程测试完整的烹饪动画和结果展示清空重置功能确认清空和重置按钮正常工作5.2 兼容性测试在不同环境和设备上进行测试浏览器兼容Chrome、Firefox、Safari最新版本移动端适配手机和平板设备的触摸操作屏幕尺寸响应式布局在各种分辨率下的表现性能测试确保动画流畅无内存泄漏5.3 用户体验优化根据测试结果进行优化添加加载状态指示优化触摸设备的拖拽体验增加键盘导航支持提供更详细的操作反馈6. 常见问题与解决方案6.1 拖拽功能不工作问题现象食材无法拖拽到锅具中可能原因浏览器不支持HTML5拖拽API事件监听器未正确绑定元素draggable属性未设置解决方案// 确保所有可拖拽元素都设置了draggable属性 element.setAttribute(draggable, true); // 检查事件监听器绑定 element.addEventListener(dragstart, handleDragStart); dropZone.addEventListener(dragover, handleDragOver); dropZone.addEventListener(drop, handleDrop);6.2 移动端触摸支持问题现象在手机和平板上无法正常操作解决方案添加触摸事件支持// 为移动端添加触摸事件支持 if (ontouchstart in window) { ingredientElement.addEventListener(touchstart, handleTouchStart); ingredientElement.addEventListener(touchend, handleTouchEnd); pan.addEventListener(touchmove, handleTouchMove); }6.3 动画性能优化问题现象烹饪动画卡顿或不流畅优化方案/* 使用transform和opacity实现高性能动画 */ .cooking-pan { will-change: transform; transform: translateZ(0); } keyframes cookBubble { /* 使用transform代替left/top动画 */ transform: translateY(var(--start-y)) translateX(var(--start-x)); }7. 扩展功能与进阶优化7.1 本地存储功能添加本地存储保存用户的烹饪记录class KitchenStorage { static saveRecipe(recipe) { const recipes this.getRecipes(); recipes.push({ ...recipe, timestamp: new Date().toISOString() }); localStorage.setItem(ponyKitchenRecipes, JSON.stringify(recipes)); } static getRecipes() { return JSON.parse(localStorage.getItem(ponyKitchenRecipes) || []); } }7.2 音效增强添加烹饪音效提升沉浸感class KitchenAudio { constructor() { this.sounds { add: new Audio(sounds/add-ingredient.mp3), cook: new Audio(sounds/cooking.mp3), success: new Audio(sounds/success.mp3) }; } playSound(soundName) { if (this.sounds[soundName]) { this.sounds[soundName].currentTime 0; this.sounds[soundName].play(); } } }7.3 食谱分享功能实现食谱分享到社交媒体的功能class RecipeSharer { static shareRecipe(recipe) { if (navigator.share) { navigator.share({ title: 我在小马宝莉厨房制作了${recipe.name}, text: recipe.description, url: window.location.href }); } else { // 降级方案复制到剪贴板 this.copyToClipboard(recipe); } } }这个《小马宝莉》厨房项目完整展示了前端开发的完整流程从需求分析到功能实现再到测试优化。通过这个项目你可以掌握现代Web开发的核心技能为更复杂的项目打下坚实基础。项目代码完全开源你可以根据需要进行修改和扩展。建议尝试添加新的食材类型、烹饪动画效果或者集成后端API实现用户登录和食谱保存功能。