请设计一个游戏，标题为Word Challenge，标题摆放在屏幕最上方居中的位置，页面背景颜色清新自然。屏幕平均分为左右两个界面，左边背景是淡黄色，右边则是淡绿色，左边界面中显示9个单词，左边界面中显示分别显示这9个单词的中文意思，顺序打乱但不重复，左右两边界面里的内容都整齐均匀地排列。设计一个start按钮，start按钮在页面下方。点击start按钮之后游戏开始。单词的列表为：China、teacher、student、boy、girl、women、man、long、fat 1.界面要求精美直观，布局合理，不要有重叠重合。 2.点击左边的单词后，再点击右边对应的中文释义，配对成功它们就会消失。 3.整个环节设置得分机制，单词和释义配对成功可以加一分，反之不得分也不扣分 4.在一次配对错误后游戏结束，显示本次总得分。
Word Challenge 游戏设计
以下是精美直观的Word Challenge游戏实现，完全符合您的所有要求：
HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Challenge</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
color: #00796b;
text-align: center;
margin: 20px 0 30px;
font-size: 2.8rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
letter-spacing: 1px;
}
.game-container {
display: flex;
width: 90%;
max-width: 1000px;
height: 450px;
margin-bottom: 30px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.word-column {
flex: 1;
padding: 20px;
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 15px;
}
#left-column {
background: linear-gradient(to bottom, #fff9c4, #fff59d);
}
#right-column {
background: linear-gradient(to bottom, #c8e6c9, #a5d6a7);
}
.word-item {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.3rem;
font-weight: 600;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
user-select: none;
}
#left-column .word-item {
background-color: #fffde7;
color: #5d4037;
border: 2px solid #ffd54f;
}
#right-column .word-item {
background-color: #e8f5e9;
color: #2e7d32;
border: 2px solid #81c784;
}
.word-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.word-item.selected {
transform: scale(1.03);
box-shadow: 0 0 0 3px rgba(255,193,7,0.5);
background-color: #ffecb3;
}
#start-btn {
padding: 15px 40px;
font-size: 1.3rem;
background: linear-gradient(to right, #00c853, #4caf50);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
font-weight: bold;
letter-spacing: 1px;
}
#start-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
background: linear-gradient(to right, #00e676, #66bb6a);
}
.score-display {
font-size: 1.5rem;
color: #00796b;
margin: 15px 0;
font-weight: bold;
background-color: rgba(255,255,255,0.7);
padding: 10px 25px;
border-radius: 30px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.game-over {
font-size: 1.8rem;
color: #c62828;
margin: 20px 0;
text-align: center;
background-color: rgba(255,255,255,0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
max-width: 80%;
display: none;
}
.word-item.correct {
animation: correctAnimation 0.6s forwards;
}
@keyframes correctAnimation {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(0); opacity: 0; }
}
.word-item.wrong {
animation: wrongAnimation 0.6s;
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-10px); }
40%, 80% { transform: translateX(10px); }
}
</style>
</head>
<body>
<h1>Word Challenge</h1>
<div class="score-display">Score: <span id="score">0</span></div>
<div class="game-container">
<div id="left-column" class="word-column"></div>
<div id="right-column" class="word-column"></div>
</div>
<button id="start-btn">Start Game</button>
<div id="game-over" class="game-over"></div>
<script>
// 单词和对应的中文意思
const wordPairs = {
"China": "中国",
"teacher": "老师",
"student": "学生",
"boy": "男孩",
"girl": "女孩",
"women": "女人",
"man": "男人",
"long": "长的",
"fat": "胖的"
};
let selectedWord = null;
let score = 0;
let gameActive = false;
let firstSelection = true;
// 获取DOM元素
const leftColumn = document.getElementById('left-column');
const rightColumn = document.getElementById('right-column');
const startBtn = document.getElementById('start-btn');
const scoreDisplay = document.getElementById('score');
const gameOverDisplay = document.getElementById('game-over');
// 开始游戏
function startGame() {
// 重置游戏状态
score = 0;
scoreDisplay.textContent = score;
gameOverDisplay.style.display = 'none';
gameActive = true;
firstSelection = true;
// 清空列
leftColumn.innerHTML = '';
rightColumn.innerHTML = '';
// 创建单词数组和中文意思数组
const words = Object.keys(wordPairs);
const meanings = Object.values(wordPairs);
// 打乱中文意思顺序
shuffleArray(meanings);
// 添加单词到左边列
words.forEach(word => {
const wordElement = document.createElement('div');
wordElement.className = 'word-item';
wordElement.textContent = word;
wordElement.dataset.word = word;
wordElement.addEventListener('click', handleWordClick);
leftColumn.appendChild(wordElement);
});
// 添加中文意思到右边列
meanings.forEach(meaning => {
const meaningElement = document.createElement('div');
meaningElement.className = 'word-item';
meaningElement.textContent = meaning;
meaningElement.dataset.meaning = meaning;
meaningElement.addEventListener('click', handleMeaningClick);
rightColumn.appendChild(meaningElement);
});
}
// 处理单词点击
function handleWordClick(event) {
if (!gameActive) return;
// 清除之前的选择
const previouslySelected = document.querySelector('.word-item.selected');
if (previouslySelected) {
previouslySelected.classList.remove('selected');
}
// 选择当前单词
selectedWord = event.target.dataset.word;
event.target.classList.add('selected');
firstSelection = true;
}
// 处理中文意思点击
function handleMeaningClick(event) {
if (!gameActive || !selectedWord || !firstSelection) return;
const selectedMeaning = event.target.dataset.meaning;
firstSelection = false;
// 检查配对是否正确
if (wordPairs[selectedWord] === selectedMeaning) {
// 配对成功
score++;
scoreDisplay.textContent = score;
// 找到选中的单词元素
const selectedWordElement = document.querySelector(`.word-item[data-word="${selectedWord}"]`);
const selectedMeaningElement = event.target;
// 添加正确动画类
selectedWordElement.classList.add('correct');
selectedMeaningElement.classList.add('correct');
// 动画结束后移除元素
setTimeout(() => {
selectedWordElement.remove();
selectedMeaningElement.remove();
// 检查游戏是否结束（所有单词配对完成）
if (document.querySelectorAll('.word-item').length === 0) {
endGame(true);
}
}, 600);
} else {
// 配对错误，游戏结束
const selectedWordElement = document.querySelector(`.word-item[data-word="${selectedWord}"]`);
selectedWordElement.classList.add('wrong');
event.target.classList.add('wrong');
endGame(false);
}
// 清除选择
const selectedElement = document.querySelector('.word-item.selected');
if (selectedElement) {
selectedElement.classList.remove('selected');
}
selectedWord = null;
}
// 结束游戏
function endGame(isWin) {
gameActive = false;
if (isWin) {
gameOverDisplay.textContent = `Congratulations! You matched all words! Final Score: ${score}`;
} else {
gameOverDisplay.textContent = `Game Over! Wrong match. Your Score: ${score}`;
}
gameOverDisplay.style.display = 'block';
}
// 打乱数组顺序
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;
}
// 开始按钮事件监听
startBtn.addEventListener('click', startGame);
</script>
</body>
</html>
游戏特点
-
精美界面设计：
- 渐变色背景，清新自然
- 精心设计的卡片样式和阴影效果
- 响应式布局，确保不重叠不重合
- 专业的字体和间距设置
-
核心游戏机制：
- 点击左边单词（高亮显示）
- 再点击右边对应的中文释义
- 配对成功：播放动画后消失，得1分
- 配对错误：播放抖动动画，游戏结束
-
得分系统：
- 每次正确配对得1分
- 错误配对不扣分但结束游戏
- 实时显示当前得分
-
交互体验：
- 悬停效果和点击反馈
- 配对成功时的平滑消失动画
- 配对错误时的抖动提示
- 游戏结束时的得分展示
-
额外优化：
- 防止连续点击同一侧元素
- 游戏状态管理
- 动画结束后才移除元素
- 用户选择保护
您可以直接复制此代码到HTML文件中运行，游戏完全符合您的所有要求，界面精美直观，交互流畅。
内容由Ai生成,仅供参考