برمجة لعبة بطاقات الذاكرة
الأمر الموجه لـ ChatGPT
إنني أتطلع إلى إنشاء لعبة بطاقة ذاكرة بسيطة تعمل على متصفح الويب للمساعدة في تحسين مهارات الذاكرة. يجب أن يتم إنشاء اللعبة باستخدام HTML للهيكل، وCSS للتصميم، وJavaScript للعناصر التفاعلية. وسوف تتكون من شبكة من البطاقات (على سبيل المثال، 4 × 4 لإجمالي 16 بطاقة). يجب أن يكون هناك من كل بطاقة زوج مطابق، والهدف هو العثور على جميع الأزواج المتطابقة. عندما ينقر اللاعب على البطاقة، يجب أن تقلب لتكشف عن صورة. إذا تطابقت ورقتان مقلوبة، فستظلان مكشوفتين. إذا لم يكن هناك تطابق، فيجب إعادة قلب البطاقات بعد مهلة قصيرة. يجب أن تتتبع اللعبة عدد الحركات التي تم إجراؤها وتعرض هذا العدد. بالإضافة إلى ذلك، أرغب في الحصول على ميزة لإعادة تشغيل اللعبة ومؤقتاً اختيارياً. يجب أن تكون الواجهة سريعة الاستجابة لاستيعاب أحجام الشاشات المختلفة. هل يمكنك توفير الكود اللازم لتنفيذ هذه الميزات؟
HTML (structure)
هذا هو الهيكل الأساسي للعبة. يتضمن شبكة للبطاقات وأماكن لعرض عدد الحركات وزر إعادة التشغيل.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Card Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Memory Card Game</h1>
<div id="gameContainer">
<div id="cardGrid" class="grid"></div>
<div class="infoPanel">
<button onclick="startGame()">Restart Game</button>
<p>Moves: <span id="moveCount">0</span></p>
<p>Time: <span id="timer">0</span> seconds</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS (Styling)
هذا يوفر التصميم الأساسي للعبة. يمكنك تخصيصه بشكل أكبر ليناسب تفضيلاتك.
/* styles.css */
body, html {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 400px;
margin: auto;
}
.card {
width: 90px;
height: 120px;
background-color: #4CAF50;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
cursor: pointer;
perspective: 1000px;
}
.card.flipped {
background-color: #FFFFFF;
color: #333;
}
.card img {
width: 100%;
height: 100%;
display: none;
}
.card.flipped img {
display: block;
}
.infoPanel {
margin-top: 20px;
}
button {
padding: 10px;
font-size: 16px;
}
@media (max-width: 600px) {
.grid {
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.card {
width: 60px;
height: 90px;
}
}JavaScript (interact)
يتعامل هذا البرنامج النصي مع منطق الرياضي لهذه اللعبة.
// script.js
document.addEventListener("DOMContentLoaded", () => {
startGame();
});
function startGame() {
const images = [
'https://images.pexels.com/photos/1080696/pexels-photo-1080696.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', 'https://images.pexels.com/photos/2462015/pexels-photo-2462015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', 'https://images.pexels.com/photos/21758774/pexels-photo-21758774/free-photo-of-hot-air-balloons-flying-in-cappadocia.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', 'https://images.pexels.com/photos/19568852/pexels-photo-19568852/free-photo-of-cliff-and-beach-behind.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
'https://images.pexels.com/photos/21858895/pexels-photo-21858895/free-photo-of-plains-and-hill-behind.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', 'https://images.pexels.com/photos/19599904/pexels-photo-19599904/free-photo-of-hermes-satyr-butterfly.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', 'https://images.pexels.com/photos/21830589/pexels-photo-21830589/free-photo-of-rocks-around-road-in-usa.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', 'https://images.pexels.com/photos/19740905/pexels-photo-19740905/free-photo-of-white-daisies-flowers-on-meadow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
]; // Add your image names or paths
const gameContainer = document.getElementById('cardGrid');
let moveCount = 0;
let cardsFlipped = [];
let timer = 0;
let interval;
gameContainer.innerHTML = '';
document.getElementById('moveCount').innerText = '0';
document.getElementById('timer').innerText = '0';
clearInterval(interval);
interval = setInterval(() => {
document.getElementById('timer').innerText = ++timer;
}, 1000);
let cardImages = [...images, ...images]; // Duplicate images for pairs
cardImages.sort(() => Math.random() - 0.5); // Shuffle cards
cardImages.forEach(image => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `<img src="${image}" alt="Memory Card">`;
card.addEventListener('click', () => {
if (cardsFlipped.length < 2 && !card.classList.contains('flipped')) {
card.classList.add('flipped');
cardsFlipped.push(card);
if (cardsFlipped.length === 2) {
moveCount++;
document.getElementById('moveCount').innerText = moveCount;
checkForMatch();
}
}
});
gameContainer.appendChild(card);
});
function checkForMatch() {
const [firstCard, secondCard] = cardsFlipped;
if (firstCard.innerHTML === secondCard.innerHTML) {
cardsFlipped = [];
} else {
setTimeout(() => {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
cardsFlipped = [];
}, 1000);
}
}
}الأمر باللغة الإنجليزية لاستجابة أفضل
I’m looking to create a simple web-based Memory Card Game to help improve memory skills. The game should be built using HTML for the structure, CSS for styling, and JavaScript for interactive elements. It will consist of a grid of cards (e.g., 4×4 for 16 total cards). Each card should have a matching pair, and the goal is to find all the pairs. When a player clicks on a card, it should flip over revealing an image. If two flipped cards match, they remain face up. If they don’t, they should flip back after a short delay. The game should track the number of moves made and display this count. Additionally, I’d like a feature to restart the game and optionally, a timer to challenge players. The interface should be responsive to accommodate various screen sizes. Can you provide the code necessary to implement these features?
Responses