html+css+js趣味小游戏~（附源码）
下面是一个简单的记忆卡片配对游戏的完整代码，使用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操作。