如何用HTMLCSSJAVAScript制作一个卡牌游戏包括匹配卡片重新启动游戏跟踪进度和洗牌
以下是一个简单的卡牌游戏实现，包括匹配卡片、重新启动游戏、跟踪进度和洗牌功能。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Memory Card Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Memory Card Game</h1>
<div id="game-board"></div>
<div id="progress"></div>
<button id="restart-btn">Restart Game</button>
<script src="script.js"></script>
</body>
</html>
CSS代码：
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 20px 0;
}
#game-board {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 20px auto;
width: 600px;
height: 600px;
background-color: #eee;
padding: 10px;
}
.card {
width: 100px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
cursor: pointer;
}
.matched {
background-color: #8bc34a;
border: none;
cursor: default;
}
#progress {
text-align: center;
margin: 20px 0;
font-size: 20px;
}
#restart-btn {
display: block;
margin: 20px auto;
padding: 10px;
font-size: 18px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
JavaScript代码：
// 卡片图标数组
const icons = [
"fa fa-diamond",
"fa fa-paper-plane-o",
"fa fa-anchor",
"fa fa-bolt",
"fa fa-cube",
"fa fa-leaf",
"fa fa-bicycle",
"fa fa-bomb"
];
let cards = []; // 定义卡片数组
let flippedCards = []; // 定义翻转的卡片数组
let matchedCards = 0; // 定义匹配的卡片数量
let moves = 0; // 定义移动次数
let timer = null; // 定义计时器
const gameBoard = document.getElementById("game-board"); // 获取游戏面板元素
const progress = document.getElementById("progress"); // 获取进度元素
const restartBtn = document.getElementById("restart-btn"); // 获取重新启动游戏按钮元素
// 初始化游戏
function initGame() {
cards = []; // 清空卡片数组
flippedCards = []; // 清空翻转的卡片数组
matchedCards = 0; // 重置匹配的卡片数量
moves = 0; // 重置移动次数
clearTimer(); // 清除计时器
initCards(); // 初始化卡片
updateProgress(); // 更新进度显示
}
// 初始化卡片
function initCards() {
// 生成卡片数组
for (let i = 0; i < icons.length; i++) {
cards.push(createCard(icons[i]));
cards.push(createCard(icons[i]));
}
// 洗牌卡片数组
shuffleCards();
// 显示卡片
for (let i = 0; i < cards.length; i++) {
gameBoard.appendChild(cards[i]);
}
}
// 创建卡片元素
function createCard(icon) {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = `<i class="${icon}"></i>`;
card.addEventListener("click", flipCard);
return card;
}
// 翻转卡片
function flipCard() {
// 禁止同时翻转两张以上的卡片
if (flippedCards.length === 2) {
return;
}
const card = this;
// 如果卡片已经翻转或匹配，则不操作
if (card.classList.contains("flipped") || card.classList.contains("matched")) {
return;
}
// 翻转卡片
card.classList.add("flipped");
flippedCards.push(card);
// 如果已翻转两张卡片，则检查是否匹配
if (flippedCards.length === 2) {
checkMatch();
}
}
// 检查卡片匹配
function checkMatch() {
const card1 = flippedCards[0];
const card2 = flippedCards[1];
// 如果两张卡片匹配，则标记为匹配，并更新匹配数量
if (card1.innerHTML === card2.innerHTML) {
card1.classList.add("matched");
card2.classList.add("matched");
matchedCards += 2;
// 如果所有卡片都匹配，则游戏结束
if (matchedCards === cards.length) {
gameOver();
}
} else {
// 如果两张卡片不匹配，则翻回去
setTimeout(() => {
card1.classList.remove("flipped");
card2.classList.remove("flipped");
}, 1000);
}
// 更新移动次数
moves++;
updateProgress();
// 清空翻转的卡片数组
flippedCards = [];
}
// 游戏结束
function gameOver() {
clearTimer(); // 停止计时器
alert(`Congratulations! You won in ${moves} moves and ${getTime()}!`);
}
// 更新进度显示
function updateProgress() {
progress.innerHTML = `Moves: ${moves} Time: ${getTime()}`;
}
// 开始计时
function startTimer() {
let seconds = 0;
timer = setInterval(() => {
seconds++;
progress.innerHTML = `Moves: ${moves} Time: ${getTime(seconds)}`;
}, 1000);
}
// 停止计时
function clearTimer() {
clearInterval(timer);
timer = null;
}
// 获取时间字符串
function getTime(seconds = 0) {
const date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(14, 5);
}
// 洗牌卡片数组
function shuffleCards() {
for (let i = cards.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[cards[i], cards[j]] = [cards[j], cards[i]];
}
}
// 绑定重新启动游戏按钮事件
restartBtn.addEventListener("click", initGame);
// 初始化游戏
initGame();
startTimer();
以上代码实现了一个简单的卡牌游戏，包括匹配卡片、重新启动游戏、跟踪进度和洗牌功能。在HTML中，我们定义了游戏面板、进度和重新启动游戏按钮的元素。在CSS中，我们定义了游戏面板、卡片、匹配卡片、进度和重新启动游戏按钮的样式。在JavaScript中，我们定义了卡片图标数组、卡片数组、翻转的卡片数组、匹配的卡片数量、移动次数、计时器以及相关的函数来实现游戏的逻辑。在代码中，我们使用Font Awesome图标库来渲染卡片图标。
原文地址: https://www.cveoy.top/t/topic/Fgs 著作权归作者所有。请勿转载和采集!