圣诞节用 AI 做个牛客运营翻翻乐！(含代码)
工具： CodeBuddy Code，GLM
你也可以选择你喜欢的工具，整体任务难度不大。国产模型足以胜任
提示词：
@img 这是游戏所用的素材。我要做一个HTML小游戏。画面是这样的，有5 * 4 个牌子，将每个素材的n倍（n为偶数）放在牌子正面。游戏开始时，给玩家10s中用来记忆，之后所有牌子翻过去。牌子的背面写着【牛客\n翻翻乐】。然后玩家点击卡牌，牌子会翻 到正面，再次点击其他牌子也会反过来，如果两个牌子图案相同，则加10分。否则将牌子都置为背面。如果所有卡牌都为正面则游戏通关！弹出烟花特效，并弹出祝你圣诞快乐。
图片素材：来自牛客各位运营的头像
大模型会出现很多不可控元素，所以不敢保证一次完美。所以下面的修改bug环节不一定有。
这次出现的问题
- 开头给的10秒记忆时间，正好挡住了画面。
- 游戏名字没有统一叫牛客翻翻乐
- 每种卡片随机出现n次，n为偶数，直到占满20张卡牌。你出现了22张，最后无解。
- 倒计时一直显示10秒，应该动态显示
还有一些功能向的需求变更
- 卡牌正面不仅要显示图片，还带上他们去掉扩展名的图片名字
这些可以一次性全给他。
最后也是成功过关了
主要功能完成了，还有一些UI可优化的地方，来品味下AI的审美。
更改下主题。为游戏添加圣诞元素。背景也不要太枯燥
风格还很满意的。 献上代码
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>牛客翻翻乐</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 雪花装饰 -->
<div class="snowflakes">
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
</div>
<!-- 圣诞树装饰 -->
<div class="christmas-tree tree-1"></div>
<div class="christmas-tree tree-2"></div>
<div class="game-container">
<div class="header">
<h1>🎄 牛客翻翻乐 🎅</h1>
<div class="game-info">
<div class="score">🎁 得分: <span id="score">0</span></div>
<div class="timer">⏰ 倒计时: <span id="timer">10</span>秒</div>
</div>
</div>
<div id="game-board" class="game-board">
<!-- 卡片将通过JavaScript动态生成 -->
</div>
<div id="start-screen" class="overlay">
<div class="modal">
<h2>🎄 欢迎来到牛客翻翻乐！ 🎅</h2>
<p>记住所有卡片的位置，然后找出相同的图案配对！</p>
<button id="start-btn">🎮 开始游戏</button>
</div>
</div>
<div id="memory-screen" class="overlay memory-overlay hidden">
<div class="memory-timer-container">
<div id="memory-timer">10</div>
<div class="memory-text">记住这些卡片！</div>
</div>
</div>
<div id="victory-screen" class="overlay hidden">
<div class="modal">
<h2>🎉 恭喜通关！</h2>
<p>🎄 祝你圣诞快乐！ 🎅</p>
<div class="final-score">🎁 最终得分: <span id="final-score">0</span></div>
<button id="restart-btn">🔄 再玩一次</button>
</div>
</div>
</div>
<!-- 烟花容器 -->
<div id="fireworks"></div>
<script src="script.js"></script>
</body>
</html>
script.js
class MemoryGame {
constructor() {
this.cards = [];
this.flippedCards = [];
this.matchedPairs = 0;
this.score = 0;
this.isProcessing = false;
this.memoryTime = 10;
this.imageFiles = ['保国.jpg', '可姐.png', '嘻嘻子.png', '审核官.png', '小助手.jpg', '小队长.jpg'];
this.initializeElements();
this.attachEventListeners();
this.showStartScreen();
}
initializeElements() {
this.gameBoard = document.getElementById('game-board');
this.scoreElement = document.getElementById('score');
this.timerElement = document.getElementById('timer');
this.startScreen = document.getElementById('start-screen');
this.memoryScreen = document.getElementById('memory-screen');
this.memoryTimerElement = document.getElementById('memory-timer');
this.victoryScreen = document.getElementById('victory-screen');
this.finalScoreElement = document.getElementById('final-score');
this.fireworksContainer = document.getElementById('fireworks');
}
attachEventListeners() {
document.getElementById('start-btn').addEventListener('click', () => this.startGame());
document.getElementById('restart-btn').addEventListener('click', () => this.restartGame());
}
showStartScreen() {
this.startScreen.classList.remove('hidden');
this.memoryScreen.classList.add('hidden');
this.victoryScreen.classList.add('hidden');
}
showMemoryScreen() {
this.startScreen.classList.add('hidden');
this.memoryScreen.classList.remove('hidden');
this.victoryScreen.classList.add('hidden');
this.startMemoryPhase();
}
showVictoryScreen() {
this.startScreen.classList.add('hidden');
this.memoryScreen.classList.add('hidden');
this.victoryScreen.classList.remove('hidden');
this.finalScoreElement.textContent = this.score;
this.createFireworks();
}
createCards() {
const cardData = [];
const totalCards = 20; // 5×4的网格
// 计算每个图片应该出现的次数，确保是偶数
const imageCount = Math.floor(totalCards / this.imageFiles.length);
// 确保每个图片出现的次数是偶数
let evenImageCount = imageCount;
if (evenImageCount % 2 !== 0) {
evenImageCount--;
}
// 为每个图片创建偶数张卡片
this.imageFiles.forEach(imageFile => {
for (let i = 0; i < evenImageCount; i++) {
cardData.push({
id: `${imageFile}_${i}`,
image: imageFile
});
}
});
// 计算还需要多少张卡片
const remainingCards = totalCards - cardData.length;
// 随机选择图片来填充剩余的卡片（确保成对出现）
for (let i = 0; i < remainingCards; i++) {
const randomImage = this.imageFiles[Math.floor(Math.random() * this.imageFiles.length)];
cardData.push({
id: `${randomImage}_${cardData.length}`,
image: randomImage
});
}
// 确保最终每个图片都出现偶数次
const imageCounts = {};
cardData.forEach(card => {
imageCounts[card.image] = (imageCounts[card.image] || 0) + 1;
});
// 如果有奇数个数的图片，调整为偶数
Object.keys(imageCounts).forEach(image => {
if (imageCounts[image] % 2 !== 0) {
// 找到可以配对的另一个图片
for (let otherImage in imageCounts) {
if (otherImage !== image && imageCounts[otherImage] % 2 !== 0) {
// 将最后一张卡片改为另一个图片，使两者都为偶数
const cardToChange = cardData.findLastIndex(card => card.image === image);
if (cardToChange !== -1) {
cardData[cardToChange].image = otherImage;
imageCounts[image]--;
imageCounts[otherImage]++;
break;
}
}
}
}
});
// 打乱卡片顺序
return this.shuffle(cardData);
}
shuffle(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
renderCards(cardData) {
this.gameBoard.innerHTML = '';
cardData.forEach((cardData, index) => {
const cardElement = document.createElement('div');
cardElement.className = 'card';
cardElement.dataset.index = index;
cardElement.dataset.image = cardData.image;
// 去掉扩展名获取图片名称
const imageName = cardData.image.replace(/\.[^/.]+$/, "");
cardElement.innerHTML = `
<div class="card-face card-front">
<img src="img/${cardData.image}" alt="${cardData.image}">
<div class="card-label">${imageName}</div>
</div>
<div class="card-face card-back">
<div class="card-back-content">
牛客<br>翻翻乐
</div>
</div>
`;
cardElement.addEventListener('click', () => this.flipCard(cardElement));
this.gameBoard.appendChild(cardElement);
this.cards.push(cardElement);
});
}
startMemoryPhase() {
// 记忆阶段：所有卡片正面显示，倒计时10秒
this.cards.forEach(card => card.classList.add('flipped'));
let timeLeft = this.memoryTime;
this.memoryTimerElement.textContent = timeLeft;
// 确保计时器元素可见
this.memoryTimerElement.style.display = 'block';
// 清除之前的计时器
if (this.memoryTimer) {
clearInterval(this.memoryTimer);
}
this.memoryTimer = setInterval(() => {
timeLeft--;
this.memoryTimerElement.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(this.memoryTimer);
this.endMemoryPhase();
}
}, 1000);
}
endMemoryPhase() {
// 记忆阶段结束，翻转所有卡片到背面
this.cards.forEach(card => card.classList.remove('flipped'));
this.memoryScreen.classList.add('hidden');
// 启用卡片点击
this.cards.forEach(card => {
card.style.pointerEvents = 'auto';
});
}
flipCard(card) {
// 如果正在处理或卡片已匹配/已翻转，则返回
if (this.isProcessing ||
card.classList.contains('matched') ||
card.classList.contains('flipped')) {
return;
}
// 翻转卡片
card.classList.add('flipped');
this.flippedCards.push(card);
// 如果翻转了两张卡片，检查是否匹配
if (this.flippedCards.length === 2) {
this.isProcessing = true;
this.checkMatch();
}
}
checkMatch() {
const [card1, card2] = this.flippedCards;
const image1 = card1.dataset.image;
const image2 = card2.dataset.image;
if (image1 === image2) {
// 匹配成功
setTimeout(() => {
card1.classList.add('matched');
card2.classList.add('matched');
this.matchedPairs++;
this.score += 10;
this.updateScore();
// 检查是否获胜
if (this.matchedPairs === this.cards.length / 2) {
setTimeout(() => this.victory(), 500);
}
this.flippedCards = [];
this.isProcessing = false;
}, 500);
} else {
// 匹配失败，翻回背面
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
this.flippedCards = [];
this.isProcessing = false;
}, 1000);
}
}
updateScore() {
this.scoreElement.textContent = this.score;
}
startGame() {
// 重置游戏状态
this.cards = [];
this.flippedCards = [];
this.matchedPairs = 0;
this.score = 0;
this.isProcessing = false;
this.updateScore();
// 创建并渲染卡片
const cardData = this.createCards();
this.renderCards(cardData);
// 显示记忆阶段
this.showMemoryScreen();
}
victory() {
this.showVictoryScreen();
}
restartGame() {
this.showStartScreen();
this.gameBoard.innerHTML = '';
this.fireworksContainer.innerHTML = '';
}
createFireworks() {
// 创建多个烟花效果
for (let i = 0; i < 5; i++) {
setTimeout(() => {
this.createSingleFirework();
}, i * 300);
}
// 持续创建烟花
this.fireworkInterval = setInterval(() => {
this.createSingleFirework();
}, 1000);
// 10秒后停止烟花
setTimeout(() => {
clearInterval(this.fireworkInterval);
this.fireworksContainer.innerHTML = '';
}, 10000);
}
createSingleFirework() {
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6ab04c', '#22a6b3'];
const particles = 30;
const centerX = Math.random() * window.innerWidth;
const centerY = Math.random() * window.innerHeight * 0.6;
for (let i = 0; i < particles; i++) {
const particle = document.createElement('div');
particle.className = 'firework';
const angle = (Math.PI * 2 * i) / particles;
const velocity = 50 + Math.random() * 50;
const color = colors[Math.floor(Math.random() * colors.length)];
particle.style.backgroundColor = color;
particle.style.left = centerX + 'px';
particle.style.top = centerY + 'px';
particle.style.boxShadow = `0 0 6px ${color}`;
const deltaX = Math.cos(angle) * velocity;
const deltaY = Math.sin(angle) * velocity;
particle.style.animation = 'none';
this.fireworksContainer.appendChild(particle);
// 手动动画
let opacity = 1;
let scale = 1;
let x = 0;
let y = 0;
const animateParticle = () => {
x += deltaX * 0.02;
y += deltaY * 0.02 + 2; // 添加重力效果
opacity -= 0.02;
scale *= 0.98;
particle.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
particle.style.opacity = opacity;
if (opacity > 0) {
requestAnimationFrame(animateParticle);
} else {
particle.remove();
}
};
requestAnimationFrame(animateParticle);
}
}
}
// 页面加载完成后初始化游戏
document.addEventListener('DOMContentLoaded', () => {
new MemoryGame();
});
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #0f4c75 0%, #3282b8 25%, #be1e2d 50%, #162447 75%, #0f4c75 100%);
background-size: 400% 400%;
animation: christmasGradient 15s ease infinite;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
overflow: hidden;
}
@keyframes christmasGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.game-container {
width: 100%;
max-width: 800px;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
color: white;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleGlow 3s ease-in-out infinite;
}
@keyframes titleGlow {
0%, 100% {
filter: brightness(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
50% {
filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}
}
.game-info {
display: flex;
justify-content: space-around;
color: white;
font-size: 1.2rem;
font-weight: bold;
}
.score, .timer {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(78, 205, 196, 0.3));
padding: 10px 20px;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.score:hover, .timer:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.game-board {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 15px;
margin-top: 20px;
perspective: 1000px;
}
.card {
aspect-ratio: 1;
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 0.6s, box-shadow 0.3s;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.card:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 107, 107, 0.3);
}
.card.flipped {
transform: rotateY(180deg);
}
.card.matched {
animation: matchPulse 0.5s ease;
pointer-events: none;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.6), 0 0 30px rgba(255, 215, 0, 0.4);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-sizing: border-box;
}
.card-front {
background: white;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px;
gap: 5px;
border-radius: 10px;
border: 2px solid rgba(190, 30, 45, 0.2);
}
.card-front img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
border-radius: 5px;
}
.card-label {
font-size: 12px;
font-weight: bold;
color: #333;
text-align: center;
background: rgba(255, 255, 255, 0.9);
padding: 2px 6px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-back {
background: linear-gradient(135deg, #be1e2d, #0f4c75);
border: 3px solid #ff6b6b;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.card-back::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 10px;
height: 10px;
background: radial-gradient(circle, #ffd700, #ff6b6b);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}
.card-back::after {
content: '';
position: absolute;
bottom: 10px;
right: 10px;
width: 8px;
height: 8px;
background: radial-gradient(circle, #ff6b6b, #ffd700);
border-radius: 50%;
box-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
}
.card-back-content {
color: white;
font-weight: bold;
text-align: center;
font-size: 14px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
background: linear-gradient(135deg, #be1e2d, #0f4c75);
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* 雪花装饰 */
.snowflakes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.snowflake {
position: absolute;
top: -10px;
color: white;
font-size: 1.5em;
animation: snowfall linear infinite;
}
.snowflake:nth-child(1) {
left: 10%;
animation-duration: 10s;
animation-delay: 0s;
font-size: 1.2em;
}
.snowflake:nth-child(2) {
left: 20%;
animation-duration: 8s;
animation-delay: 1s;
font-size: 1.4em;
}
.snowflake:nth-child(3) {
left: 30%;
animation-duration: 12s;
animation-delay: 2s;
font-size: 1.1em;
}
.snowflake:nth-child(4) {
left: 40%;
animation-duration: 9s;
animation-delay: 1.5s;
font-size: 1.3em;
}
.snowflake:nth-child(5) {
left: 50%;
animation-duration: 11s;
animation-delay: 0.5s;
font-size: 1.2em;
}
.snowflake:nth-child(6) {
left: 60%;
animation-duration: 13s;
animation-delay: 2.5s;
font-size: 1.4em;
}
.snowflake:nth-child(7) {
left: 70%;
animation-duration: 7s;
animation-delay: 1s;
font-size: 1.1em;
}
.snowflake:nth-child(8) {
left: 80%;
animation-duration: 10s;
animation-delay: 3s;
font-size: 1.3em;
}
.snowflake:nth-child(9) {
left: 85%;
animation-duration: 9s;
animation-delay: 0.8s;
font-size: 1.2em;
}
.snowflake:nth-child(10) {
left: 90%;
animation-duration: 11s;
animation-delay: 1.2s;
font-size: 1.4em;
}
.snowflake:nth-child(11) {
left: 95%;
animation-duration: 8s;
animation-delay: 2s;
font-size: 1.1em;
}
.snowflake:nth-child(12) {
left: 5%;
animation-duration: 12s;
animation-delay: 0.3s;
font-size: 1.3em;
}
.snowflake::before {
content: "❄";
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
@keyframes snowfall {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0.3;
}
}
/* 圣诞树装饰 */
.christmas-tree {
position: fixed;
bottom: 20px;
font-size: 2em;
z-index: 2;
animation: treeGlow 2s ease-in-out infinite alternate;
}
.tree-1 {
left: 20px;
font-size: 2.5em;
}
.tree-2 {
right: 20px;
font-size: 3em;
animation-delay: 1s;
}
.christmas-tree::before {
content: "🎄";
text-shadow: 0 0 20px rgba(34, 139, 34, 0.8);
filter: drop-shadow(0 0 10px rgba(34, 139, 34, 0.6));
}
@keyframes treeGlow {
0% {
filter: brightness(1) drop-shadow(0 0 10px rgba(34, 139, 34, 0.6));
}
100% {
filter: brightness(1.3) drop-shadow(0 0 20px rgba(34, 139, 34, 0.9));
}
}
.card-front img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
border-radius: 5px;
}
.card-label {
font-size: 12px;
font-weight: bold;
color: #333;
text-align: center;
background: rgba(255, 255, 255, 0.9);
padding: 2px 6px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.overlay.memory-overlay {
background: transparent;
}
.overlay.hidden {
display: none;
}
.modal {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 248, 220, 0.95));
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 107, 107, 0.2);
max-width: 400px;
border: 2px solid rgba(255, 107, 107, 0.3);
backdrop-filter: blur(10px);
}
.modal h2 {
color: #be1e2d;
margin-bottom: 20px;
font-size: 2rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.modal p {
color: #0f4c75;
margin-bottom: 20px;
font-size: 1.1rem;
font-weight: 500;
}
button {
background: linear-gradient(135deg, #be1e2d, #ff6b6b);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 15px 30px;
font-size: 1.1rem;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
box-shadow: 0 4px 15px rgba(190, 30, 45, 0.3);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(190, 30, 45, 0.4);
background: linear-gradient(135deg, #ff6b6b, #be1e2d);
}
button:active {
transform: translateY(0);
}
.memory-timer-container {
position: absolute;
top: 20px;
right: 20px;
text-align: center;
background: linear-gradient(135deg, rgba(255, 248, 220, 0.95), rgba(255, 255, 255, 0.95));
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 107, 107, 0.3);
border: 3px solid rgba(190, 30, 45, 0.3);
z-index: 1500;
backdrop-filter: blur(10px);
}
#memory-timer {
font-size: 3rem;
font-weight: bold;
color: #be1e2d;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.memory-text {
font-size: 1.2rem;
color: #0f4c75;
font-weight: bold;
}
.final-score {
font-size: 1.5rem;
color: #be1e2d;
margin: 20px 0;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
/* 烟花效果 */
#fireworks {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2000;
}
.firework {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
animation: fireworkExplode 1s ease-out forwards;
}
@keyframes fireworkExplode {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes matchPulse {
0% {
transform: scale(1) rotateY(180deg);
box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
}
50% {
transform: scale(1.1) rotateY(180deg);
box-shadow: 0 0 30px rgba(76, 175, 80, 0.8), 0 0 40px rgba(255, 215, 0, 0.6);
}
100% {
transform: scale(1) rotateY(180deg);
box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.game-board {
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.header h1 {
font-size: 2rem;
}
.game-info {
font-size: 1rem;
}
.modal {
padding: 20px;
margin: 20px;
}
}
@media (max-width: 480px) {
.game-board {
grid-template-columns: repeat(3, 1fr);
grid-gap: 8px;
}
.header h1 {
font-size: 1.5rem;
}
.card-back-content {
font-size: 12px;
}
}
整体目录结构
│ index.html
│ script.js
│ style.css
│
└─img
保国.jpg
可姐.png
嘻嘻子.png
审核官.png
小助手.jpg
小队长.jpg
浅入浅出大模型 文章被收录于专栏
尽量让所有人都可以认识，并且使用大模型
投递科大讯飞等公司9个岗位