下面是一个简单的记忆卡片配对游戏的完整代码，使用HTML、CSS和JavaScript实现：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击计数器游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<h1>点击计数器游戏</h1>
<p>点击按钮来增加分数！</p>
<button id="clickButton">点击我</button>
<p id="score">分数: 0</p>
</div>
<script src="script.js"></script>
</body>
</html>css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.game-container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p {
color: #666;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}JavaScript
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.game-container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p {
color: #666;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}展示效果
游戏说明
- 游戏目标：找出所有配对的卡片。
- 游戏规则：
- 点击卡片翻转它
- 每次只能翻转两张卡片
- 如果两张卡片匹配，它们会保持翻转状态
- 如果不匹配，卡片会翻回去
- 记录你的尝试次数
如何扩展
- 增加难度级别（不同大小的网格）
- 添加计时功能
- 增加更多卡片符号或使用图片
- 添加音效（翻转、匹配成功等）
- 添加动画效果
- 实现高分记录系统
这个游戏适合所有年龄段的人玩，可以锻炼记忆力和反应能力。代码结构清晰，适合初学者学习JavaScript事件处理和DOM操作。