[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打砖块小游戏-丢塔游戏网</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0e5d3;
}
h1 {
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 10px;
margin-top: 20px;
}
.card {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
user-select: none;
}
.flipped {
background-color: #fff;
color: black;
}
.message, .timer {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
#difficulty {
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>选择难度：</p>
<select id="difficulty">
<option value="easy">简单</option>
<option value="medium">中等</option>
<option value="hard">困难</option>
</select><button onclick="startGame();">开始游戏</button>
<div id="grid" class="grid"> </div>
<p id="message" class="message"> </p>
<p id="timer" class="timer">时间: 60</p>
<canvas id="brickGame" width="480" height="320"></canvas>
<script>
let cards = [];
let firstCard = null;
let secondCard = null;
let hasFlippedCard = false;
let lockBoard = false;
let matchedPairs = 0;
let timer;
let timeLeft = 60;
function setCardData(difficulty) {
if (difficulty === 'easy') {
cards = ['A', 'A', 'B', 'B'];
timeLeft = 30;
} else if (difficulty === 'medium') {
cards = [
'A', 'A', 'B', 'B',
'C', 'C', 'D', 'D'
];
timeLeft = 60;
} else {
cards = [
'A', 'A', 'B', 'B',
'C', 'C', 'D', 'D',
'E', 'E', 'F', 'F',
'G', 'G', 'H', 'H'
];
timeLeft = 90;
}
}
function startGame() {
const difficulty = document.getElementById('difficulty').value;
setCardData(difficulty);
document.getElementById('grid').innerHTML = '';
matchedPairs = 0;
document.getElementById('message').innerText = '';
document.getElementById('timer').innerText = `时间: ${timeLeft}`;
clearInterval(timer);
createBoard();
}
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
function createBoard() {
const grid = document.getElementById('grid');
shuffle(cards).forEach(value => {
const card = document.createElement('div');
card.classList.add('card');
card.setAttribute('data-value', value);
card.addEventListener('click', flipCard);
grid.appendChild(card);
});
startTimer();
}
function startTimer() {
timer = setInterval(() => {
timeLeft--;
document.getElementById('timer').innerText = `时间: ${timeLeft}`;
if (timeLeft <= 0) {
clearInterval(timer);
document.getElementById('message').innerText = '时间到！游戏结束！';
lockBoard = true;
}
}, 1000);
}
function flipCard() {
if (lockBoard || this === firstCard) return;
this.classList.toggle('flipped');
this.innerText = this.getAttribute('data-value');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
} else {
secondCard = this;
lockBoard = true;
checkForMatch();
}
}
function checkForMatch() {
const isMatch = firstCard.getAttribute('data-value') === secondCard.getAttribute('data-value');
if (isMatch) {
matchedPairs++;
resetBoard();
document.getElementById('message').innerText = `找到 ${matchedPairs} 对！`;
if (matchedPairs === cards.length / 2) {
clearInterval(timer);
document.getElementById('message').innerText = '恭喜你，完成游戏！';
}
} else {
setTimeout(() => {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
firstCard.innerText = '';
secondCard.innerText = '';
resetBoard();
}, 1000);
}
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
</script>
</body>
</html> | 
发表于 2024-8-22 15:11
