纯前端小游戏Demo制作
Prompt分享：
P: 作为一名专为5-8岁儿童设计游戏的资深前端开发者。
T: 请帮我创建一个“图片单词配对”的网页小游戏。
C: 游戏的目标是帮助小学一年级学生学习10个关于水果的英文单词（Apple, Banana, Orange, Grape, Strawberry, Watermelon, Peach, Pear, Mango, Lemon）。游戏界面需要展示10张水果图片和10个单词卡片，学生需要将正确的单词拖拽到对应的图片上。拖拽正确时，卡片会吸附到图片旁并有绿色提示；错误则弹回原位并有红色提示。
F: 请将所有的HTML、CSS和JavaScript代码生成在一个单一的HTML文件中，确保代码结构清晰并有中文注释。
生成结果：
然后就可以玩了! AI 2分钟以内就做好了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水果单词大挑战 - 趣味英语配对</title>
<style>
/* 1. 基础样式与背景 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0fdf4; /* 清新的浅绿色背景 */
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
user-select: none; /* 禁止选中文本，让拖拽更流畅 */
}
h1 {
color: #16a34a;
margin-top: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.instruction {
color: #666;
margin-bottom: 20px;
}
/* 2. 游戏主容器布局 */
.game-container {
display: flex;
flex-direction: column;
gap: 30px;
width: 90%;
max-width: 1000px;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* 水果图片区域：使用网格布局 */
.images-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
}
/* 单个图片插槽 */
.image-slot {
aspect-ratio: 1;
border: 3px dashed #cbd5e1;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background: #f8fafc;
transition: all 0.3s ease;
}
/* 正在拖拽目标悬停时的效果 */
.image-slot.drag-over {
background: #dcfce7;
border-color: #22c55e;
transform: scale(1.02);
}
.fruit-emoji {
font-size: 60px; /* 大图标方便孩子识别 */
margin-bottom: 5px;
}
/* 单词卡片区域 */
.words-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding: 20px;
border-top: 2px solid #f1f5f9;
}
/* 单词卡片样式 */
.word-card {
padding: 12px 24px;
background-color: #ffffff;
border: 2px solid #3b82f6;
color: #1d4ed8;
border-radius: 50px; /* 圆润的外观更亲切 */
font-size: 20px;
font-weight: bold;
cursor: grab;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: transform 0.2s, background-color 0.2s;
}
.word-card:active {
cursor: grabbing;
}
/* 正确与错误的视觉反馈 */
.correct {
background-color: #22c55e !important;
color: white !important;
border-color: #16a34a !important;
cursor: default;
}
.wrong {
animation: shake 0.5s linear;
border-color: #ef4444 !important;
background-color: #fee2e2 !important;
}
/* 抖动动画 */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
}
/* 胜利庆祝弹窗 */
#win-message {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 0 100px rgba(0,0,0,0.3);
text-align: center;
z-index: 100;
}
button {
background: #22c55e;
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
}
</style>
</head>
<body>
<h1>🍎 水果英语大闯关 🍌</h1>
<p class="instruction">把下方的英语单词拖拽到对应的水果图片上吧！</p>
<div class="game-container">
<!-- 水果图片展示区 -->
<div class="images-grid" id="imagesGrid">
<!-- 由 JS 动态生成 -->
</div>
<!-- 待选单词区 -->
<div class="words-container" id="wordsContainer">
<!-- 由 JS 动态生成 -->
</div>
</div>
<!-- 胜利提示 -->
<div id="win-message">
<h2 style="font-size: 40px;">太棒了！🌟</h2>
<p>你认识了所有的水果单词！</p>
<button onclick="location.reload()">再玩一次</button>
</div>
<script>
// 1. 数据配置
const fruits = [
{ id: 'apple', name: 'Apple', emoji: '🍎' },
{ id: 'banana', name: 'Banana', emoji: '🍌' },
{ id: 'orange', name: 'Orange', emoji: '🍊' },
{ id: 'grape', name: 'Grape', emoji: '🍇' },
{ id: 'strawberry', name: 'Strawberry', emoji: '🍓' },
{ id: 'watermelon', name: 'Watermelon', emoji: '🍉' },
{ id: 'peach', name: 'Peach', emoji: '🍑' },
{ id: 'pear', name: 'Pear', emoji: '🍐' },
{ id: 'mango', name: 'Mango', emoji: '🥭' },
{ id: 'lemon', name: 'Lemon', emoji: '🍋' }
];
let matchedCount = 0;
// 2. 初始化游戏
function initGame() {
const imagesGrid = document.getElementById('imagesGrid');
const wordsContainer = document.getElementById('wordsContainer');
// 打乱水果顺序（为了增加重复玩的乐趣）
const shuffledFruits = [...fruits].sort(() => Math.random() - 0.5);
const shuffledWords = [...fruits].sort(() => Math.random() - 0.5);
// 生成图片槽
shuffledFruits.forEach(fruit => {
const slot = document.createElement('div');
slot.className = 'image-slot';
slot.dataset.id = fruit.id;
slot.innerHTML = `<span class="fruit-emoji">${fruit.emoji}</span>`;
// 绑定拖放事件
slot.ondragover = e => e.preventDefault();
slot.ondragenter = () => slot.classList.add('drag-over');
slot.ondragleave = () => slot.classList.remove('drag-over');
slot.ondrop = handleDrop;
imagesGrid.appendChild(slot);
});
// 生成单词卡片
shuffledWords.forEach(fruit => {
const card = document.createElement('div');
card.className = 'word-card';
card.draggable = true;
card.innerText = fruit.name;
card.id = `card-${fruit.id}`;
card.dataset.id = fruit.id;
card.ondragstart = e => {
e.dataTransfer.setData('text/plain', fruit.id);
card.classList.add('dragging');
};
wordsContainer.appendChild(card);
});
}
// 3. 处理拖放逻辑
function handleDrop(e) {
e.preventDefault();
const slot = e.currentTarget;
slot.classList.remove('drag-over');
const draggedId = e.dataTransfer.getData('text/plain');
const targetId = slot.dataset.id;
const draggedElement = document.getElementById(`card-${draggedId}`);
// 如果该位置已经配对成功，则不处理
if (slot.querySelector('.correct')) return;
if (draggedId === targetId) {
// 配对正确
draggedElement.draggable = false;
draggedElement.classList.add('correct');
slot.appendChild(draggedElement); // 吸附到图片下方
matchedCount++;
checkWin();
} else {
// 配对错误：显示红色提示并抖动
draggedElement.classList.add('wrong');
setTimeout(() => {
draggedElement.classList.remove('wrong');
}, 500);
}
}
// 4. 检查是否全对
function checkWin() {
if (matchedCount === fruits.length) {
setTimeout(() => {
document.getElementById('win-message').style.display = 'block';
}, 500);
}
}
// 启动游戏
initGame();
</script>
</body>
</html>
#Prompt分享#
深信服公司福利 891人发布