Claude 助力制作幼儿版找规律小游戏
Claude 助力制作幼儿版找规律小游戏
Claude 助力制作幼儿版找规律小游戏 Claude 助力制作幼儿版找规律小游戏 Modified December 31, 2024 Code block Markdown 2. 随机抽空部分砖块，形成空白位置。 最终返回完整图案和需要填充的空白位置。 ''' 颜色 = ["红色", "黄色", "蓝色", "橙色", "绿色", "紫色"] full pattern = [] blanks = [] if input value == "简单": selected colors = 随机选择(颜色, 3) full pattern = 重复填充(selected colors, 25) blanks = [25 10] 在指定索引插入(full pattern, blanks, None) elif input value == "中等": selected colors = 随机选择(颜色, 4) 对每种颜色执行两次填充(selected colors, full pattern) blanks = 随机选择索引(长度(full pattern) // 3) 在指定索引插入(full pattern, blanks, None) elif input value == "困难": selected colors = 颜色[:] first half = selected colors second half = 逆序(selected colors) full pattern = first half + second half total blanks = 50%图案长度 blanks = 随机选择索引(total blanks) 在指定索引插入(full pattern, blanks, None) else: return "未知难度，请输入：简单、中等或困难", [] return full pattern, blanks def card compound（pattern, blanks）： """ 按照示例的样式输出对应的铺砖块游戏 SVG 游戏图卡。 """ def main(): """ 主函数：提醒用户输入，直到用户有输入才能开始处理用户输入，输出对应的卡片。 二）效果展示 💻 使用这种接近纯代码的形式，他会不由自主的去忽略原有的规则，创建新的游戏规则。 甚至稳定性完全不能跟代码相比，比如我可以写一个 HTML 的文件，用来创作这个游戏。 Code block HTML <!DOCTYPE html <html <head <meta charset="UTF 8" <title 颜色砖块挑战</title <style { box sizing: border box; margin: 0; padding: 0; } body { font family: system ui, apple system, sans serif; min height: 100vh; background: linear gradient(135deg, a5b4fc, 818cf8); display: flex; justify content: center; align items: center; padding: 20px; } .game container { background: rgba(255, 255, 255, 0.95); padding: 2rem; border radius: 24px; box shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(129, 140, 248, 0.2); max width: 600px; width: 100%; backdrop filter: blur(10px); } h1 { text align: center; color: 1e293b; margin bottom: 1.5rem; font size: 2rem; font weight: 800; background: linear gradient(135deg, 4f46e5, 818cf8); webkit background clip: text; webkit text fill color: transparent; letter spacing: 0.025em; } .difficulty buttons { display: flex; justify content: center; gap: 12px; margin bottom: 2rem; } .difficulty button { padding: 0.75rem 1.5rem; border: none; background: f1f5f9; color: 475569; border radius: 12px; cursor: pointer; font weight: 600; transition: all 0.3s ease; position: relative; overflow: hidden; } .difficulty button:hover { transform: translateY( 2px); background: e2e8f0; } .difficulty button.active { background: 818cf8; color: white; box shadow: 0 4px 12px rgba(129, 140, 248, 0.3); } .grid { display: grid; grid template columns: repeat(6, 1fr); gap: 10px; padding: 20px; background: f8fafc; border radius: 16px; box shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .cell { aspect ratio: 1; border radius: 12px; display: flex; align items: center; justify content: center; font size: 1.5rem; color: 94a3b8; cursor: pointer; transition: all 0.3s ease; box shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .cell:hover { transform: scale(1.05); } .cell.blank { border: 2px dashed cbd5e1; background: rgba(255, 255, 255, 0.8); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .color selector { position: fixed; display: none; background: white; border radius: 16px; box shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 12px; z index: 100; grid template columns: repeat(3, 1fr); gap: 8px; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .color option { width: 40px; height: 40px; border radius: 8px; cursor: pointer; transition: all 0.2s ease; box shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .color option:hover { transform: scale(1.1); box shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .hint { 效果演示 No access 颜色砖块小游戏 00:00 可以看到效果很稳定，但是与此同时我们需要注意的是完全没有大模型的规则创造能力，只是单纯的依靠于代码中一套固定的规则。 四、总结 这两天其实写提示的同时其实都用了很多代码，不是说用自然语言不能完成这种任务，答案肯定是可以的，但是还是希望大家明白，代码和提示词应该是互利互惠的一种存在。 如果要考虑在提示词中加入代码，最好的办法应该是，代码负责稳定性的内容，而大模型负责创造力的内容。这可能也是我们新的一种“人机结合”的形式。 综上所述，对于这篇的内容我的评价是： 💻 • 纯代码：可能缺乏创新性，规则过于机械 • 纯AI：可能不够稳定，难以保证一致性 • 结合使用：取长补短，但需要合理划分职责 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" <defs <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%" <stop offset="0%" style="stop color: f6f8fc;stop opacity:1" / <stop offset="100%" style="stop color: e9eef7;stop opacity:1" / </linearGradient <filter id="cardShadow" x=" 20%" y=" 20%" width="140%" height="140%" <feGaussianBlur in="SourceAlpha" stdDeviation="8" / <feOffset dx="0" dy="4" result="offsetblur" / <feComponentTransfer <feFuncA type="linear" slope="0.2" / </feComponentTransfer <feMerge <feMergeNode / <feMergeNode in="SourceGraphic" / </feMerge </filter <filter id="tileShadow" x=" 20%" y=" 20%" width="140%" height="140%" <feGaussianBlur in="SourceAlpha" stdDeviation="2" / <feOffset dx="0" dy="2" result="offsetblur" / <feComponentTransfer <feFuncA type="linear" slope="0.3" / </feComponentTransfer <feMerge <feMergeNode / <feMergeNode in="SourceGraphic" / </feMerge </filter </defs <! 背景 <rect width="800" height="1000" fill="url( bgGradient)"/ <! 游戏卡片 <g transform="translate(50, 50)" filter="url( cardShadow)" <! 卡片背景 <rect width="700" height="900" rx="20" fill="white"/ <! 标题区域 <g transform="translate(0, 40)" <text x="350" y="40" text anchor="middle" font size="32" fill=" 4A90E2" font family="Arial, sans serif" font weight="bold" 颜色砖块挑战</text <line x1="150" y1="70" x2="550" y2="70" stroke=" 4A90E2" stroke width="2" opacity="0.3"/ </g <! 游戏网格 <g transform="translate(50, 150)" <! 第一行 <g transform="translate(0, 0)" <rect x="0" y="0" width="90" height="90" rx="12" fill=" FF6B6B" filter="url( tileShadow)"/ <rect x="100" y="0" width="90" height="90" rx="12" fill=" FFD93D" filter="url( tileShadow)"/ <rect x="200" y="0" width="90" height="90" rx="12" fill=" f8f9fa" stroke=" 4A90E2" stroke width="3" stroke dasharray="5,5" filter="url( tileShadow)"/ <rect x="300" y="0" width="90" height="90" rx="12" fill=" f8f9fa" stroke=" 4A90E2" stroke width="3" stroke dasharray="5,5" filter="url( tileShadow)"/ <rect x="400" y="0" width="90" height="90" rx="12" fill=" FFD93D" filter="url( tileShadow)"/ <rect x="500" y="0" width="90" height="90" rx="12" fill=" FF6B6B" filter="url( tileShadow)"/ </g <! 游戏网格 简化为注释 <! 5x5网格 每个格子尺寸: 90x90 间距: 10px 起始位置: transform="translate(50, 150)" 包含: 已填充的彩色方块 虚线边框的空白方块 问号文字 <g transform="translate(50, 150)" <! 游戏网格内容省略 </g <! 问号文字 <g fill=" 4A90E2" font size="32" font weight="bold" font family="Arial, sans serif" <! 第一行问号 <text x="245" y="60" text anchor="middle" dominant baseline="middle" ?</text <text x="345" y="60" text anchor="middle" dominant baseline="middle" ?</text </g <! 底部提示文本 <g transform="translate(350, 820)" <text text anchor="middle" font size="20" fill=" 4A90E2" font family="Arial, sans serif" 根据对称规则填补空白格</text </g </g </svg 二）效果展示 💻 使用这种接近纯代码的形式，他会不由自主的去忽略原有的规则，创建新的游戏规则。 使用这种接近纯代码的形式，他会不由自主的去忽略原有的规则，创建新的游戏规则。 甚至稳定性完全不能跟代码相比，比如我可以写一个 HTML 的文件，用来创作这个游戏。 效果演示 No access 颜色砖块小游戏 00:00 No access 颜色砖块小游戏 00:00 可以看到效果很稳定，但是与此同时我们需要注意的是完全没有大模型的规则创造能力，只是单纯的依靠于代码中一套固定的规则。 四、总结 这两天其实写提示的同时其实都用了很多代码，不是说用自然语言不能完成这种任务，答案肯定是可以的，但是还是希望大家明白，代码和提示词应该是互利互惠的一种存在。 如果要考虑在提示词中加入代码，最好的办法应该是，代码负责稳定性的内容，而大模型负责创造力的内容。这可能也是我们新的一种“人机结合”的形式。 综上所述，对于这篇的内容我的评价是： 💻 • 纯代码：可能缺乏创新性，规则过于机械 • 纯AI：可能不够稳定，难以保证一致性 • 结合使用：取长补短，但需要合理划分职责 • 纯代码：可能缺乏创新性，规则过于机械 • 纯AI：可能不够稳定，难以保证一致性 • 结合使用：取长补短，但需要合理划分职责 感兴趣的小伙伴可以试试到底要如何结合，提升词怎么写才有最好的效果。欢迎大家私信交流 好啦，写到这里我们今天的内容也结束啦，感谢大家的观看，也希望我的内容能够让大家喜欢，有所收获。感兴趣的小伙伴可以点个关注跟随我一起学习，观看更多往期文章。 下次见，我是景淮，祝你有个开心美好的一天 嘿，大家好呀，我是景淮，一个在加拿大的朋友，每天陪你一起玩转 AI。 今天带着外甥做数学题，做的是那种找规律的数学题。都是各种数字，然后找到数字之间的规律。然后小外甥也跟着掺合，想要一起玩，但是他对数字又不够敏感。所以就想着换成一种他能一起玩耍的找规律小游戏。 所以我就尝试着把数字替换成不同的颜色，这样就能让小外甥也有一些参与感了！ 所以，今天的主题是 Claude 助力制作幼儿版找规律小游戏 本文会根据以下内容顺序进行： • 需求分析 • 分步实现 • 提示词编写、测试 • 总结 一、需求分析 我们的整体设计应该如下图所示，但是明显我们更需要一些规律。也需要更美观好看一点。 输入 不同的游戏难度（简单、中等、困难） 输出 SVG 制作的对应图卡，有空白区域可以让孩子寻找对应的规律，填充对应的颜色。 二、分步实现 一）设置难度和砖块 提示词 二）卡片制作 提示词 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" <defs <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%" <stop offset="0%" style="stop color: f6f8fc;stop opacity:1" / <stop offset="100%" style="stop color: e9eef7;stop opacity:1" / </linearGradient <filter id="cardShadow" x=" 20%" y=" 20%" width="140%" height="140%" <feGaussianBlur in="SourceAlpha" stdDeviation="8" / <feOffset dx="0" dy="4" result="offsetblur" / <feComponentTransfer <feFuncA type="linear" slope="0.2" / </feComponentTransfer <feMerge <feMergeNode / <feMergeNode in="SourceGraphic" / </feMerge </filter <filter id="tileShadow" x=" 20%" y=" 20%" width="140%" height="140%" <feGaussianBlur in="SourceAlpha" stdDeviation="2" / <feOffset dx="0" dy="2" result="offsetblur" / <feComponentTransfer <feFuncA type="linear" slope="0.3" / </feComponentTransfer ``` 效果展示 三、提示词编写、测试 一）提示词