Claude 自动生成 Word Search 表

Claude 自动生成 Word Search 表 Claude 自动生成 Word Search 表 Modified December 31, 2024 Code block Markdown <title 拼音寻字游戏</title <style { margin: 0; padding: 0; box sizing: border box; font family: 'Arial', sans serif; } body { display: flex; justify content: center; align items: center; min height: 100vh; background: f0f9ff; padding: 20px; } .container { background: white; border radius: 16px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 24px; max width: 600px; width: 100%; } .header { text align: center; margin bottom: 24px; padding bottom: 16px; border bottom: 2px solid e5e7eb; } .title { color: 1e40af; font size: 28px; margin bottom: 8px; } .subtitle { color: 6b7280; font size: 16px; } .word cards { display: grid; grid template columns: repeat(3, 1fr); gap: 16px; margin bottom: 24px; } .word card { background: eff6ff; border radius: 8px; padding: 16px; cursor: pointer; transition: all 0.3s ease; text align: center; } .word card:hover { transform: translateY( 2px); box shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .word card.active { background: bfdbfe; } .chinese { font size: 24px; font weight: bold; color: 1e40af; margin bottom: 4px; } .english { font size: 12px; color: 6b7280; } .board { display: grid; grid template columns: repeat(8, 1fr); gap: 8px; background: f8fafc; padding: 16px; border radius: 8px; } .cell { aspect ratio: 1; display: flex; align items: center; justify content: center; background: e0f2fe; border radius: 8px; font size: 20px; cursor: pointer; transition: all 0.2s ease; } .cell:hover { background: bae6fd; } .cell.highlight { background: 93c5fd; transform: scale(1.05); } </style </head <body <div class="container" <div class="header" <h1 class="title" 拼音寻字游戏</h1 <p class="subtitle" 点击词语查看答案位置</p </div <div class="word cards" id="wordCards" <div class="word card" data word="zuòyè" <div class="chinese" 作业</div <div class="english" homework</div </div <div class="word card" data word="kǎoshì" <div class="chinese" 考试</div <div class="english" exam</div </div <div class="word card" data word="shūbāo" <div class="chinese" 书包</div <div class="english" schoolbag</div </div </div <div class="board" id="grid" </div </div <script const gridSize = 8; const words = ['zuòyè', 'kǎoshì', 'shūbāo']; const wordPositions = {}; function generateGrid() { const grid = Array.from({ length: gridSize }, () = Array(gridSize).fill('')); words.forEach(word = { let placed = false; while (!placed) { const direction = Math.floor(Math.random() 3); // 0: horizontal, 1: vertical, 2: diagonal const startX = Math.floor(Math.random() gridSize); const startY = Math.floor(Math.random() gridSize); if (canPlaceWord(grid, word, startX, startY, direction)) { placeWord(grid, word, startX, startY, direction); placed = true; } } }); // Fill empty cells with random pinyin characters const pinyinSyllables = ['a', 'o', 'e', 'i', 'u', 'ü', 'ā', 'á', 'ǎ', 'à', 'ē', 'é', 'ě', 'è', 'ī', 'í', 'ǐ', 'ì']; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === '') { grid[i][j] = pinyinSyllables[Math.floor(Math.random() pinyinSyllables.length)]; } } } renderGrid(grid); } function canPlaceWord(grid, word, x, y, direction) { const length = word.length; if (direction === 0) { // Horizontal if (y + length gridSize) return false; for (let i = 0; i < length; i++) { if (grid[x][y + i] !== '' && grid[x][y + i] !== word[i]) return false; } } else if (direction === 1) { // Vertical if (x + length gridSize) return false; for (let i = 0; i < length; i++) { if (grid[x + i][y] !== '' && grid[x + i][y] !== word[i]) return false; } } else if (direction === 2) { // Diagonal if (x + length gridSize || y + length gridSize) return false; for (let i = 0; i < length; i++) { if (grid[x + i][y + i] !== '' && grid[x + i][y + i] !== word[i]) return false; } } return true; } function placeWord(grid, word, x, y, direction) { const length = word.length; const positions = []; if (direction === 0) { for (let i = 0; i < length; i++) { grid[x][y + i] = word[i]; positions.push(x gridSize + y + i); } } else if (direction === 1) { for (let i = 0; i < length; i++) { grid[x + i][y] = word[i]; positions.push((x + i) gridSize + y); } } else if (direction === 2) { for (let i = 0; i < length; i++) { grid[x + i][y + i] = word[i]; positions.push((x + i) gridSize + y + i); } } wordPositions[word] = positions; } function renderGrid(grid) { const gridContainer = document.getElementById('grid'); gridContainer.innerHTML = ''; grid.forEach(row = { row.forEach(cell = { const cellDiv = document.createElement('div'); cellDiv.textContent = cell; cellDiv.classList.add('cell'); gridContainer.appendChild(cellDiv); }); }); } generateGrid(); const wordCards = document.querySelectorAll('.word card'); const gridContainer = document.getElementById('grid'); wordCards.forEach(card = { card.addEventListener('click', () = { const word = card.dataset.word; wordCards.forEach(c = c.classList.remove('active')); gridContainer.querySelectorAll('.cell').forEach(cell = cell.classList.remove('highlight')); if (!card.classList.contains('active')) { card.classList.add('active'); wordPositions[word].forEach(pos = { gridContainer.children[pos].classList.add('highlight'); }); } }); }); </script </body </html Code block Markdown <title 拼音寻字游戏</title <style { margin: 0; padding: 0; box sizing: border box; font family: 'Arial', sans serif; } body { display: flex; justify content: center; align items: center; min height: 100vh; background: f0f9ff; padding: 20px; } .container { background: white; border radius: 16px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 24px; max width: 600px; width: 100%; } .header { text align: center; margin bottom: 24px; padding bottom: 16px; border bottom: 2px solid e5e7eb; } .title { color: 1e40af; font size: 28px; margin bottom: 8px; } .subtitle { color: 6b7280; font size: 16px; } .word cards { display: grid; grid template columns: repeat(3, 1fr); gap: 16px; margin bottom: 24px; } .word card { background: eff6ff; border radius: 8px; padding: 16px; cursor: pointer; transition: all 0.3s ease; text align: center; } .word card:hover { transform: translateY( 2px); box shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .word card.active { background: bfdbfe; } .chinese { font size: 24px; font weight: bold; color: 1e40af; margin bottom: 4px; } .english { font size: 12px; color: 6b7280; } .board { display: grid; grid template columns: repeat(8, 1fr); gap: 8px; background: f8fafc; padding: 16px; border radius: 8px; } .cell { aspect ratio: 1; display: flex; align items: center; justify content: center; background: e0f2fe; border radius: 8px; font size: 20px; cursor: pointer; transition: all 0.2s ease; } .cell:hover { background: bae6fd; } .cell.highlight { background: 93c5fd; transform: scale(1.05); } </style </head <body <div class="container" <div class="header" <h1 class="title" 拼音寻字游戏</h1 <p class="subtitle" 点击词语查看答案位置</p </div <div class="word cards" id="wordCards" <div class="word card" data word="zuòyè" <div class="chinese" 作业</div <div class="english" homework</div </div <div class="word card" data word="kǎoshì" <div class="chinese" 考试</div <div class="english" exam</div </div <div class="word card" data word="shūbāo" <div class="chinese" 书包</div <div class="english" schoolbag</div </div </div <div class="board" id="grid" </div </div <script const gridSize = 8; const words = ['zuòyè', 'kǎoshì', 'shūbāo']; const wordPositions = {}; function generateGrid() { const grid = Array.from({ length: gridSize }, () = Array(gridSize).fill('')); words.forEach(word = { let placed = false; while (!placed) { const direction = Math.floor(Math.random() 3); // 0: horizontal, 1: vertical, 2: diagonal const startX = Math.floor(Math.random() gridSize); const startY = Math.floor(Math.random() gridSize); if (canPlaceWord(grid, word, startX, startY, direction)) { placeWord(grid, word, startX, startY, direction); placed = true; } } }); // Fill empty cells with random pinyin characters const pinyinSyllables = ['a', 'o', 'e', 'i', 'u', 'ü', 'ā', 'á', 'ǎ', 'à', 'ē', 'é', 'ě', 'è', 'ī', 'í', 'ǐ', 'ì']; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === '') { grid[i][j] = pinyinSyllables[Math.floor(Math.random() pinyinSyllables.length)]; } } } renderGrid(grid); } function canPlaceWord(grid, word, x, y, direction) { const length = word.length; if (direction === 0) { // Horizontal if (y + length gridSize) return false; for (let i = 0; i < length; i++) { if (grid[x][y + i] !== '' && grid[x][y + i] !== word[i]) return false; } } else if (direction === 1) { // Vertical if (x + length gridSize) return false; for (let i = 0; i < length; i++) { if (grid[x + i][y] !== '' && grid[x + i][y] !== word[i]) return false; } } else if (direction === 2) { // Diagonal if (x + length gridSize || y + length gridSize) return false; for (let i = 0; i < length; i++) { if (grid[x + i][y + i] !== '' && grid[x + i][y + i] !== word[i]) return false; } } return true; } function placeWord(grid, word, x, y, direction) { const length = word.length; const positions = []; if (direction === 0) { for (let i = 0; i < length; i++) { grid[x][y + i] = word[i]; positions.push(x gridSize + y + i); } } else if (direction === 1) { for (let i = 0; i < length; i++) { grid[x + i][y] = word[i]; positions.push((x + i) gridSize + y); } } else if (direction === 2) { for (let i = 0; i < length; i++) { grid[x + i][y + i] = word[i]; positions.push((x + i) gridSize + y + i); } } wordPositions[word] = positions; } function renderGrid(grid) { const gridContainer = document.getElementById('grid'); gridContainer.innerHTML = ''; grid.forEach(row = { row.forEach(cell = { const cellDiv = document.createElement('div'); cellDiv.textContent = cell; cellDiv.classList.add('cell'); gridContainer.appendChild(cellDiv); }); }); } generateGrid(); const wordCards = document.querySelectorAll('.word card'); const gridContainer = document.getElementById('grid'); wordCards.forEach(card = { card.addEventListener('click', () = { const word = card.dataset.word; wordCards.forEach(c = c.classList.remove('active')); gridContainer.querySelectorAll('.cell').forEach(cell = cell.classList.remove('highlight')); if (!card.classList.contains('active')) { card.classList.add('active'); wordPositions[word].forEach(pos = { gridContainer.children[pos].classList.add('highlight'); }); } }); }); </script </body </html 四）效果展示可能还是程序员本身的问题，有时候文字描述不好解决的问题，用代码的逻辑一下子就解决了。四、总结其实并不是一定要在写提示词的时候往里面塞代码，而是在某种意义上，我们要用最能让大模型理解的方式去表达我们想说的，想做的。文字描述不清楚的时候，适当的使用代码，对提升输出效果其实还是很有意义的。衍生的小游戏也很多，比如常规的 Word Search，中文的词汇搜索等。 💻 我后面又调整了代码，隐藏了对应的拼音部分，只保留了中文和英文。我后面又调整了代码，隐藏了对应的拼音部分，只保留了中文和英文。好啦，写到这里我们今天的内容也结束啦，感谢大家的观看，也希望我的内容能够让大家喜欢，有所收获。感兴趣的小伙伴可以点个关注跟随我一起学习，观看更多往期文章。下次见，我是景淮，祝你有个开心美好的一天嘿，大家好呀，我是景淮，一个在加拿大的朋友，每天陪你一起玩转 AI。昨天在床上躺了一天，除了出门两次接外甥放学，就一直在床上躺着，印象中好久没有感冒这么重了。鸽了一天，脑子里其实也一直在想公众号还没更新，这不今天好点了，就又来了。更了三天提示词探索的金句系列。今天我们来换换脑子，更新一篇好久没更新的孩子王系列好啦英文中有一种游戏叫 “Word Search”，相信大家或多或少都接触过或者玩过。因为外甥最近在学拼音，就想着给他做一个拼音形式的 Word Seacrh 给他玩，顺便联系一下他的拼音。（毕竟他的英文我可教不了，就我那英文让他教我才是。）所以，今天的主题是 Claude 自动生成 Word Search 表本文会根据以下内容顺序进行： • 需求分析 • 分步实现 • 提示词编写、测试 • 总结一、需求分析其实一般这系列的内容，我之前都是用 ChatGPT 制作的比较多，今天为啥用 Claude 呢？其实也很简单，我想试试除了画图之外，在孩子王系列，Claude能给我做出一些什么样的帮助。而这篇内容的设计，对于前端来说还是很容易实现的。一）输入输出设计输入可以输入任意三个中文的词语、或者是输入一个主题让其随机生成。输出输出一张对应的 Word Search 表格，最上方展示三个中文词语。二）为什么设计这种有游戏？ 1. 提升语言能力 • 识字和拼音学习：通过寻找特定单词，孩子可以熟悉拼音和汉字的形状、发音和书写方式。 • 词汇积累：孩子在游戏中接触和记忆更多新词汇，逐步扩大语言储备。 • 拼写能力：通过找到正确的单词，强化拼写规则的记忆。 2. 培养专注力 • 游戏需要孩子仔细观察和筛选字母，帮助提高专注力和耐心。 3. 提升认知能力 • 模式识别：孩子需要从杂乱的字母中识别出特定的模式，这能锻炼观察力和逻辑推理能力。 • 方向感：单词可能从不同方向（横向、纵向、斜向）排列，有助于培养孩子的空间感和方向感。 4. 增强解决问题的能力 • 孩子需要用不同策略寻找目标单词，比如按字母顺序或某个方向搜索，锻炼了问题解决和策略性思考的能力。 5. 培养耐心和成就感 • 游戏需要耐心完成，而找到所有目标单词后，孩子会感受到成就感，增强自信心。 6. 促进亲子互动 • 这种游戏可以作为亲子活动，与父母一起玩游戏，增强亲子间的情感交流。 7. 轻松学习，增加兴趣 • 游戏形式生动有趣，能激发孩子学习语言的兴趣，比传统的记忆方式更吸引人。总的来说，这种游戏是一种寓教于乐的方式，既能让孩子感到有趣，又能在玩中学、学中玩。二、分步实现一）词语选择效果展示二）列表生成 💻 看了眼生成的效果，字母多的情况下，是真的眼花... 所以我还是限制了一下两个字的词语。看了眼生成的效果，字母多的情况下，是真的眼花... 所以我还是限制了一下两个字的词语。效果展示三）图片代码调整 import React, { useState } from 'react'; import { Car

在小宇宙note 阅读完整内容