英语作为主课必学的内容，在学习的方法也是花足了功夫，单词作为基础，更是重中之重。
一直记得的，当英语老师上课的时候，都是苦瓜脸。坐在课堂上听就是听经书一样，由于你不懂老师讲的是什么。
实则，我也有在努力去学，但都学不会，每天早上上课前约有20分钟左右的朗读时间，目前还会想起课读英语单词的情景，有专门的英语课代表带读。
为什么就是学不会呢？
想来有几点：
机械的重复背单词，但不等于有效的输出，在读的时候，是被动的跟读的，缺乏主动思考，例如，使用场景，大脑为建立单词与意义的直接关联，导致”听声不记忆“。
读完既忘，没有科学间隔的复读。有了解艾宾浩斯曲线的就知道，遗忘在学习之后立即开始，而且遗忘的进程并不是均匀的。最初的遗忘速度很快，之后逐渐减缓。
具体来说，20分钟后遗忘42%，1小时后56%，1天后74%，1周后77%，1个月后79%。如果按正常一天一复习的情况来看，基本能记住的，但单词量是按老师的课程节奏走，当学习没掌握上一章节就走继续下一阶段那只会越来越糟糕
此外就是情绪阻力，前面说的，上一章节的单词都没有学好，就开启下一章节的学习，造成掌握的越少，这就造成挫败感，我们会潜意识的抗拒学习，学习效率就降低，最终就是恶性循环。
所以，要做成记单词的事，最重大的是能喜爱上它，都说兴趣是最好的老师。
那么对于大部分人来说，信任游戏是最容易上头的，我们可以将游戏结合到学习中。
从原理上来讲游戏能激发兴趣，兴趣是最好的老师，它能让大脑更主动接收信息。再者，在玩游戏过程中不断重复接触单词，符合记忆规律，加深记忆。而且消消乐有即时反馈，每次成功消除单词的成就感，会激励继续玩下去，不知不觉记住大量单词。
这里教大家使用Deepseek做个简单的消消乐单词游戏。后面附上个人的消消乐代码，可以直接使用。
由于我们是小白，我们要怎么去设计这个游戏呢？
那直接问Deepseek。
提示词：
我想做一个单词消消乐的游戏，我上传单词，然后根据我的单词进行游戏，我需要给你提供什么信息？
提示词：
我是小白，上面的都很复杂，能不能做个简单的html文件的消消乐游戏，尽量简洁，但要有上传excel文件的功能，我将提供英文一列和英文对应中文的一列。上传的excel文件存储的格式
这是生成的简洁页面，并且功能还不完善，列如，点击消消乐没有反应，所以继续让Deepseek优化。
这里面都是一步步引导Deepseek 优化。
有时候，告知AI出现的bug，但不必定能一次性修复，所以还是要继续引导。
正常了，然后就开始测试功能，或增加一个功能，列如支持重新刷新页面。继续优化…..
AI生成代码的时候，有不确定性存在，列如之前可以正常的使用的功能，在最新的生成的代码不能正常使用。
上面的修改优化，直接导致最基本的消消乐功能无法正常点击消除。
最后Deepseek官方这里一直网络繁忙，无法正常使用。
实在没有办法，只能用腾讯云的ima的接入的Deepseek。
ima使用Deepseek如下：
新手必备内容创作神器，腾讯ima+ Deepseek快速构建自己数字知识库
这个过程中，有用ima平台的Deepseek做单词消消乐游戏，但做的单词消消乐一直有问题，跟官方Deepseek的还是有差距，都怀疑第三方的都不是满血的Deepseek，最后还是将之前弄的半成品代码保存到word文档，上传word文档到ima才修复点击不消除效果。
勉强最后完成了单词消消乐的游戏。
这个制作过程可能要不断的优化调整，可以一步步让Deepseek增加功能，如果某个功能不能用了，就让AI修复。
总的来说，使用AI编程，不太可能一上来就能做出正常使用的工具，需要一步步调整补全，修bug。
以下是代码，可以将代码复制，然后创建一个html文件保存，然后用浏览器打开，就能正常使用了。
当然，里面功能可能还不够完善，你可以将代码复制给Deepseek 或其它AI，补全功能。
代码：
<!DOCTYPE html>
<html>
<head>
<title>单词消消乐 - 完整功能版</title>
<style>
/* 保持原有样式不变 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
margin: 0;
padding: 20px;
}
.game-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px;
background: rgba(255,255,255,0.9);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.stats-box {
padding: 8px 16px;
background: #4CAF50;
color: white;
border-radius: 5px;
min-width: 80px;
text-align: center;
font-size: 14px;
}
#gameArea {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
max-width: 1000px;
margin: 0 auto;
}
.card {
position: relative;
height: 60px;
width: 100px;
perspective: 800px;
cursor: pointer;
margin: 3px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: all 0.4s;
transform-style: preserve-3d;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
border-radius: 6px;
padding: 5px;
word-break: break-word;
transition: all 0.3s;
}
.front {
background: white;
color: #333;
}
.back {
background: #4CAF50;
color: white;
transform: rotateY(180deg);
}
.matched {
animation: matchEffect 0.6s forwards;
pointer-events: none;
}
@keyframes matchEffect {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(0); opacity: 0; }
}
.error {
animation: errorShake 0.4s;
}
@keyframes errorShake {
0% { transform: translateX(0); }
25% { transform: translateX(-8px); }
50% { transform: translateX(8px); }
75% { transform: translateX(-8px); }
100% { transform: translateX(0); }
}
#controls {
text-align: center;
margin: 20px 0;
display: flex;
justify-content: center;
gap: 10px;
}
.game-btn {
padding: 8px 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.game-btn:hover {
transform: scale(1.05);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.card:active .card-inner {
transform: scale(0.95);
}
</style>
</head>
<body>
<div class="game-header">
<div class="stats-box">时间: <span id="timer">60</span>s</div>
<div class="stats-box">得分: <span id="score">0</span></div>
<div class="stats-box">连击: <span id="combo">0</span>x</div>
</div>
<div id="controls">
<input type="file" id="excelFile" accept=".xlsx" style="display: none;">
<button onclick="document.getElementById('excelFile').click()" class="game-btn">上传单词表</button>
<button onclick="resetGame()" class="game-btn" id="resetBtn">重新开始</button>
</div>
<div id="gameArea"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
let words = [];
let selectedCard = null;
let score = 0;
let combo = 0;
let timeLeft = 60;
let timerId = null;
let comboTimeout = null;
function initGame() {
score = 0;
combo = 0;
timeLeft = 60;
selectedCard = null;
clearInterval(timerId);
clearTimeout(comboTimeout);
updateUI();
timerId = setInterval(updateTimer, 1000);
document.getElementById('resetBtn').disabled = false;
}
function resetGame() {
if (words.length === 0) {
alert('请先上传单词表！');
return;
}
clearGameArea();
initGame();
startGame();
}
function clearGameArea() {
const gameArea = document.getElementById('gameArea');
while (gameArea.firstChild) {
gameArea.removeChild(gameArea.firstChild);
}
}
function updateTimer() {
timeLeft--;
document.getElementById('timer').textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timerId);
alert(`时间到！最终得分: ${score}`);
clearGameArea();
document.getElementById('resetBtn').disabled = true;
}
}
function updateUI() {
document.getElementById('score').textContent = score;
document.getElementById('combo').textContent = combo;
}
document.getElementById('excelFile').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
words = [];
clearGameArea();
initGame();
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, {type: 'array'});
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(worksheet);
words = jsonData.flatMap(row => {
const en = row[Object.keys(row)[0]];
const cn = row[Object.keys(row)[1]];
const pairId = Math.random().toString(36).substr(2, 9);
return [
{ text: en, lang: 'en', pair: cn, pairId: pairId },
{ text: cn, lang: 'cn', pair: en, pairId: pairId }
];
});
startGame();
};
reader.readAsArrayBuffer(file);
});
function startGame() {
const gameArea = document.getElementById('gameArea');
const shuffledWords = [...words].sort(() => Math.random() - 0.5);
shuffledWords.forEach(word => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<div>
<div>${word.text}</div>
<div>${word.text}</div>
</div>
`;
card.dataset.pair = word.pair;
card.dataset.lang = word.lang;
card.dataset.pairId = word.pairId;
card.addEventListener('click', handleCardClick);
gameArea.appendChild(card);
});
}
function handleCardClick(e) {
const card = e.currentTarget;
if (card.classList.contains('matched') ||
card.classList.contains('flipped') ||
timeLeft <= 0) return;
card.classList.add('flipped');
if (!selectedCard) {
selectedCard = card;
} else {
const isMatch =
selectedCard.dataset.pairId === card.dataset.pairId &&
selectedCard.dataset.lang !== card.dataset.lang;
if (isMatch) {
score += 100 * (1 + combo * 0.5);
combo++;
[card, selectedCard].forEach(c => {
c.classList.add('matched');
c.addEventListener('animationend', () => {
c.remove();
}, { once: true });
});
} else {
combo = 0;
[card, selectedCard].forEach(c => {
c.classList.add('error');
setTimeout(() => {
c.classList.remove('flipped', 'error');
}, 500);
});
}
selectedCard = null;
updateUI();
clearTimeout(comboTimeout);
comboTimeout = setTimeout(() => combo = 0, 2000);
}
}
</script>
</body>
</html>
好了，这次的分享就到这了。
如果对你有协助，或者对AI感兴趣，想学习AI，请关注，感谢！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
