先看一看我们的最终成型的3款自己制作的游戏，只需要用Windows系统自带的文档工具编写。
整个过程我们做了一个视频教程
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114257773467182&bvid=BV19wZHYPE8X&cid=29170993942&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
一、使用deepseek生成第一款单词卡片的命令表述：
识别附件中的单词并排序，同时给出每个词的释义和例句，然后帮我生成单词flashcard的互动html页面，辅助单词记忆1.界面要求精美直观，单词卡片可以3d翻转，卡片下面有一个随机切换下一词的按钮2.交互按钮要能正常使用，布局合理，不要有重叠重合3.生成切换单元的按钮，选中的单元中单词都要包含其中，一次生成完，不可省略4.联网点击播放单词的读音，并显示音标5.单词库仅限于附件中的单词，不要联想扩展6.同时根据系统时间自动切换白天和黑夜模式，保护视力。
上传的附件是单词库，TXT文件最好。
生成的初次代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单词Flashcard</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> :root { --bg-color: #f5f5f5; --text-color: #333; --card-bg: #fff; --card-shadow: rgba(0, 0, 0, 0.1); --primary-color: #4a6fa5; --secondary-color: #6c757d; --button-bg: #4a6fa5; --button-text: #fff; } .dark-mode { --bg-color: #1a1a1a; --text-color: #f0f0f0; --card-bg: #2d2d2d; --card-shadow: rgba(0, 0, 0, 0.3); --primary-color: #6d8cc8; --secondary-color: #a0a0a0; --button-bg: #6d8cc8; --button-text: #f0f0f0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; } .container { max-width: 1000px; margin: 0 auto; } h1 { text-align: center; color: var(--primary-color); margin-bottom: 20px; } .unit-selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; } .unit-btn { padding: 8px 15px; background-color: var(--button-bg); color: var(--button-text); border: none; border-radius: 5px; cursor: pointer; transition: transform 0.2s, background-color 0.2s; } .unit-btn:hover { transform: translateY(-2px); background-color: var(--primary-color); } .unit-btn.active { background-color: var(--primary-color); font-weight: bold; } .flashcard-container { perspective: 1000px; width: 100%; max-width: 500px; height: 300px; margin: 0 auto 30px; } .flashcard { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s; cursor: pointer; } .flashcard.flipped { transform: rotateY(180deg); } .flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; box-shadow: 0 10px 20px var(--card-shadow); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; background-color: var(--card-bg); } .flashcard-back { transform: rotateY(180deg); } .word { font-size: 2.5rem; font-weight: bold; margin-bottom: 10px; color: var(--primary-color); text-align: center; } .phonetic { font-size: 1.2rem; color: var(--secondary-color); margin-bottom: 15px; text-align: center; } .meaning { font-size: 1.3rem; margin-bottom: 20px; text-align: center; line-height: 1.5; } .example { font-size: 1rem; color: var(--secondary-color); font-style: italic; text-align: center; line-height: 1.5; max-width: 90%; } .controls { display: flex; justify-content: center; gap: 20px; margin-top: 20px; } .btn { padding: 10px 20px; background-color: var(--button-bg); color: var(--button-text); border: none; border-radius: 5px; cursor: pointer; transition: transform 0.2s, background-color 0.2s; font-size: 1rem; } .btn:hover { transform: translateY(-2px); background-color: var(--primary-color); } .pronounce-btn { background-color: #28a745; } .pronounce-btn:hover { background-color: #218838; } .dark-mode-btn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--button-bg); color: var(--button-text); border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; box-shadow: 0 2px 10px var(--card-shadow); z-index: 100; } .progress { text-align: center; margin-top: 20px; color: var(--secondary-color); } @media (max-width: 600px) { .word { font-size: 2rem; } .meaning { font-size: 1.1rem; } .flashcard-container { height: 350px; } } </style></head><body> <div class="container"> <h1>单词Flashcard-官网www.fdccw.com</h1> <div class="unit-selector" id="unitSelector"> <!-- Unit buttons will be added here by JavaScript --> </div> <div class="progress" id="progress">0/0</div> <div class="flashcard-container"> <div class="flashcard" id="flashcard"> <div class="flashcard-front"> <div class="word" id="word">单词</div> <div class="phonetic" id="phonetic">音标</div> </div> <div class="flashcard-back"> <div class="word" id="word-back">单词</div> <div class="phonetic" id="phonetic-back">音标</div> <div class="meaning" id="meaning">释义</div> <div class="example" id="example">例句</div> </div> </div> </div> <div class="controls"> <button class="btn pronounce-btn" id="pronounceBtn">发音</button> <button class="btn" id="nextBtn">下一个</button> </div> </div> <button class="dark-mode-btn" id="darkModeBtn"></button> <script> // Word data from the attachment const wordData = [ // Unit 1 [ { word: "fox", phonetic: "[fpks]", meaning: "狐狸", example: "The fox is very clever." }, { word: "giraffe", phonetic: "[d3a'ra:f]", meaning: "长颈鹿", example: "The giraffe has a long neck." }, { word: "eagle", phonetic: "['i:gl]", meaning: "雕;鹰", example: "The eagle is flying high in the sky." }, { word: "wolf", phonetic: "[wolf]", meaning: "狼", example: "The wolf is howling at the moon." }, { word: "penguin", phonetic: "['pengwin]", meaning: "企鹅", example: "Penguins live in Antarctica." }, { word: "care", phonetic: "[kea(r)]", meaning: "照顾;护理;关心;在乎", example: "She takes care of her little brother." }, { word: "take care of", phonetic: "[teIk kea(r) pv]", meaning: "照顾;处理", example: "I will take care of the problem." }, ], // Unit 2 [ { word: "rule", phonetic: "[ru:1]", meaning: "规则;规章", example: "You must follow the school rules." }, { word: "order", phonetic: "['o:do(r)]", meaning: "秩序;点菜", example: "The teacher kept order in the classroom." }, { word: "follow", phonetic: "['fplo]", meaning: "遵循;跟随", example: "Please follow the instructions carefully." }, { word: "be late(for)", phonetic: "[bi: left(fo:(r))]", meaning: "迟到", example: "Don't be late for school." }, { word: "arrive", phonetic: "[a'raIv]", meaning: "到达", example: "We arrived at the airport at 9 o'clock." }, { word: "on time", phonetic: "[on taIm]", meaning: "准时", example: "The train arrived on time." }, { word: "hallway", phonetic: "['ho:lwei]", meaning: "走廊", example: "Don't run in the hallway." }, ] ]; // DOM elements const flashcard = document.getElementById('flashcard'); const wordElement = document.getElementById('word'); const phoneticElement = document.getElementById('phonetic'); const wordBackElement = document.getElementById('word-back'); const phoneticBackElement = document.getElementById('phonetic-back'); const meaningElement = document.getElementById('meaning'); const exampleElement = document.getElementById('example'); const pronounceBtn = document.getElementById('pronounceBtn'); const nextBtn = document.getElementById('nextBtn'); const unitSelector = document.getElementById('unitSelector'); const progressElement = document.getElementById('progress'); const darkModeBtn = document.getElementById('darkModeBtn'); // State variables let currentUnit = 0; let currentWordIndex = 0; let currentWords = []; // Initialize the app function init() { createUnitButtons(); loadUnit(0); updateProgress(); checkTimeForDarkMode(); // Event listeners flashcard.addEventListener('click', flipCard); pronounceBtn.addEventListener('click', pronounceWord); nextBtn.addEventListener('click', nextWord); darkModeBtn.addEventListener('click', toggleDarkMode); } // Create unit selection buttons function createUnitButtons() { for (let i = 0; i < wordData.length; i++) { const btn = document.createElement('button'); btn.className = 'unit-btn'; if (i === 0) btn.classList.add('active'); btn.textContent = `Unit ${i + 1}`; btn.addEventListener('click', () => { loadUnit(i); document.querySelectorAll('.unit-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); unitSelector.appendChild(btn); } } // Load a unit's words function loadUnit(unitIndex) { currentUnit = unitIndex; currentWords = [...wordData[unitIndex]]; currentWordIndex = 0; shuffleArray(currentWords); // Shuffle the words for variety showCurrentWord(); } // Show current word on the flashcard function showCurrentWord() { const word = currentWords[currentWordIndex]; wordElement.textContent = word.word; phoneticElement.textContent = word.phonetic; wordBackElement.textContent = word.word; phoneticBackElement.textContent = word.phonetic; meaningElement.textContent = word.meaning; exampleElement.textContent = word.example; // Reset card to front if (flashcard.classList.contains('flipped')) { flashcard.classList.remove('flipped'); } updateProgress(); } // Flip the card function flipCard() { flashcard.classList.toggle('flipped'); } // Pronounce the current word function pronounceWord() { const word = currentWords[currentWordIndex].word; // Use the Web Speech API to pronounce the word if ('speechSynthesis' in window) { const utterance = new SpeechSynthesisUtterance(word); utterance.lang = 'en-US'; window.speechSynthesis.speak(utterance); } else { alert('Your browser does not support text-to-speech. Try Chrome or Edge.'); } } // Go to next word function nextWord() { currentWordIndex = (currentWordIndex + 1) % currentWords.length; showCurrentWord(); } // Update progress indicator function updateProgress() { progressElement.textContent = `${currentWordIndex + 1}/${currentWords.length}`; } // Shuffle array (Fisher-Yates algorithm) function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Check time for dark mode function checkTimeForDarkMode() { const hour = new Date().getHours(); if (hour >= 18 || hour <= 6) { // 6pm to 6am document.body.classList.add('dark-mode'); darkModeBtn.textContent = '☀️'; } else { document.body.classList.remove('dark-mode'); darkModeBtn.textContent = ''; } } // Toggle dark mode function toggleDarkMode() { document.body.classList.toggle('dark-mode'); if (document.body.classList.contains('dark-mode')) { darkModeBtn.textContent = '☀️'; } else { darkModeBtn.textContent = ''; } } // Initialize the app when DOM is loaded document.addEventListener('DOMContentLoaded', init); </script></body></html>
将以上代码复制到一个空白的文档文件中，保存后重命名“.txt”为“.HTML”。
这样就可以生成游戏，右键点击用浏览器打开。
当然，我们最终生成的游戏，是经过多次修改，并把初中3个年级的单词使用deepseek提取出可用的单词格式。
版权声明：本文转载于今日头条，版权归作者所有，如果侵权，请联系本站编辑删除
