当前位置：首页 > news >正文

html+css+js趣味小游戏~（附源码）

news 来源：原创 2025/6/14 6:51:53

下面是一个简单的记忆卡片配对游戏的完整代码，使用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;
}