Use Case
/
تطوير مشروع هواية
قم ببناء الألعاب والتطبيقات بسهولة، دون الحاجة إلى معرفة شاملة بالبرمجة
Model
•
وكيل النينجا
أعطني تعليمات خطوة بخطوة ورمز JavaScript الكامل لإنشاء لعبة بطاقة مطابقة للذاكرة تعتمد على المتصفح - لم يتم افتراض وجود تجربة سابقة لمطور الألعاب.
تقرير أبحاث تطوير ألعاب بطاقات Memory Match
ملخص تنفيذي
يقدم هذا التقرير تعليمات شاملة ورمزًا لإنشاء لعبة بطاقة مطابقة للذاكرة تعتمد على المتصفح، وهي مصممة للمطورين الذين ليس لديهم خبرة سابقة في تطوير اللعبة. يستخدم التطبيق HTML و CSS وجافا سكريبت لإنشاء لعبة مطابقة تفاعلية حيث يقوم اللاعبون بقلب البطاقات للعثور على أزواج.
منهجية البحث
تم إجراء التحليل على المحادثة المقدمة والتي تضمنت:
- مراجعة تنفيذ التعليمات البرمجية الأولية
- تحديد مشكلات التعليمات البرمجية والتحسينات المطلوبة
- تطوير تعليمات شاملة خطوة بخطوة
المتطلبات الفنية
المتطلبات الأساسية
- فهم أساسي لـ HTML وCSS وجافا سكريبت
- محرر التعليمات البرمجية (كود فيسوال ستوديو، سابليم تكست، أو ما شابه)
- متصفح الويب
هيكل المشروع
تتطلب اللعبة ثلاثة ملفات رئيسية:
- index.html
- style.css
- script.js
دليل التنفيذ
1. تنفيذ HTML
1<!DOCTYPE >
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Memory Match Game</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="game-container">
11 <div class="game-info">
12 <div class="moves">Moves: <span id="moves-count">0</span></div>
13 <button id="restart">Restart Game</button>
14 </div>
15 <div id="game-board"></div>
16 </div>
17 <script src="script.js"></script>
18</body>
19</html>2. تنفيذ CSS
1.game-container {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 20px;
5}
6
7#game-board {
8 display: grid;
9 grid-template-columns: repeat(4, 1fr);
10 gap: 10px;
11 margin-top: 20px;
12}
13
14.card {
15 aspect-ratio: 1;
16 position: relative;
17 transform-style: preserve-3d;
18 transition: transform 0.5s;
19 cursor: pointer;
20}
21
22.card.flipped {
23 transform: rotateY(180deg);
24}
25
26.card-front, .card-back {
27 position: absolute;
28 width: 100%;
29 height: 100%;
30 backface-visibility: hidden;
31 border-radius: 8px;
32 display: flex;
33 align-items: center;
34 justify-content: center;
35}
36
37.card-front {
38 background-color: #2196F3;
39 transform: rotateY(180deg);
40}
41
42.card-back {
43 background-color: #E0E0E0;
44}
45
46.card.matched {
47 transform: rotateY(180deg);
48 pointer-events: none;
49}3. تنفيذ جافا سكريبت
1document.addEventListener('DOMContentLoaded', () => {
2 const gameBoard = document.getElementById('game-board');
3 const movesDisplay = document.getElementById('moves-count');
4 const restartButton = document.getElementById('restart');
5
6 const symbols = ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'];
7 let cards = [...symbols, ...symbols];
8 let flippedCards = [];
9 let matchedPairs = 0;
10 let moves = 0;
11 let isProcessing = false;
12
13 function shuffle(array) {
14 for (let i = array.length - 1; i > 0; i--) {
15 const j = Math.floor(Math.random() * (i + 1));
16 [array[i], array[j]] = [array[j], array[i]];
17 }
18 return array;
19 }
20
21 function createCard(symbol) {
22 const card = document.createElement('div');
23 card.className = 'card';
24 card.innerHTML = `
25 <div class="card-front">${symbol}</div>
26 <div class="card-back"></div>
27 `;
28 card.dataset.symbol = symbol;
29 card.addEventListener('click', flipCard);
30 return card;
31 }
32
33 function flipCard() {
34 if (isProcessing ||
35 this.classList.contains('flipped') ||
36 flippedCards.length === 2) return;
37
38 this.classList.add('flipped');
39 flippedCards.push(this);
40
41 if (flippedCards.length === 2) {
42 isProcessing = true;
43 moves++;
44 movesDisplay.textContent = moves;
45 checkForMatch();
46 }
47 }
48
49 function checkForMatch() {
50 const [card1, card2] = flippedCards;
51 const match = card1.dataset.symbol === card2.dataset.symbol;
52
53 if (match) {
54 card1.classList.add('matched');
55 card2.classList.add('matched');
56 matchedPairs++;
57 if (matchedPairs === symbols.length) {
58 setTimeout(() => alert(`Congratulations! You won in ${moves} moves!`), 500);
59 }
60 } else {
61 setTimeout(() => {
62 card1.classList.remove('flipped');
63 card2.classList.remove('flipped');
64 }, 1000);
65 }
66
67 flippedCards = [];
68 setTimeout(() => {
69 isProcessing = false;
70 }, 1000);
71 }
72
73 function initGame() {
74 gameBoard.innerHTML = '';
75 matchedPairs = 0;
76 moves = 0;
77 movesDisplay.textContent = moves;
78
79 shuffle(cards).forEach(symbol => {
80 gameBoard.appendChild(createCard(symbol));
81 });
82 }
83
84 restartButton.addEventListener('click', initGame);
85 initGame();
86});الميزات الرئيسية
- تخطيط الشبكة المتجاوب
- رسوم متحركة قابلة للطي بالبطاقات
- منطق التحقق من المطابقة
- عداد التحرك
- وظيفة إعادة التشغيل
- اكتشاف حالة الفوز
التحسينات المحتملة
- تنفيذ الموقت
- مستويات الصعوبة
- اختيار الموضوع
- مؤثرات صوتية
- نظام تتبع النتائج
دليل استكشاف الأخطاء وإصلاحها
- مشكلات قلب البطاقة: تحقق من خصائص تحويل CSS
- مشاكل المطابقة: تحقق من منطق مقارنة الرموز
- مشكلات التخطيط: ضبط إعدادات الشبكة
الخاتمة
يوفر هذا التطبيق أساسًا متينًا للعبة مطابقة الذاكرة مع الحفاظ على قابلية قراءة الكود وقابلية التوسعة. يسمح الهيكل المعياري بإضافات وتعديلات سهلة لتحسين ميزات اللعب.
Explore Related Use Cases
Experience Ninja's AI Assistant
Try for free today. Plans starting at $19/month.