Cas d'utilisation
/
Développement de projets Hobby
Créez des jeux et des applications en toute simplicité, aucune connaissance approfondie de la programmation n'est requise
modèle
•
Agent ninja
Donnez-moi des instructions étape par étape et un code JavaScript complet pour créer un jeu de cartes à mémoire compatible avec un navigateur. Aucune expérience préalable en tant que développeur de jeu n'est requise.
Rapport de recherche sur le développement du jeu de cartes Memory Match
Résumé
Ce rapport fournit des instructions complètes et du code pour créer un jeu de cartes mémoire basé sur un navigateur, conçu pour les développeurs n'ayant aucune expérience préalable en matière de développement de jeux. L'implémentation utilise HTML, CSS et JavaScript pour créer un jeu de correspondance interactif dans lequel les joueurs retournent des cartes pour trouver des paires.
Méthodologie de recherche
Une analyse a été menée sur la conversation fournie, qui comprenait :
- Examen initial de la mise en œuvre du code
- Identification des problèmes de code et des améliorations nécessaires
- Élaboration d'instructions détaillées étape par étape
Exigences techniques
Prérequis
- Compréhension de base du HTML, du CSS et du JavaScript
- Éditeur de code (Visual Studio Code, Sublime Text ou similaire)
- Navigateur Web
Structure du projet
Le jeu nécessite trois fichiers principaux :
- index.html
- style.css
- script.js
Guide de mise en œuvre
1. Implémentation 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. Implémentation 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. Mise en œuvre de JavaScript
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});Principales caractéristiques
- Mise en page réactive de la grille
- Animations de retournement de cartes
- Logique de vérification des matchs
- Compteur de mouvements
- Fonctionnalité de redémarrage
- Détection des conditions de victoire
Améliorations possibles
- Mise en œuvre du timer
- Niveaux de difficulté
- Sélection du thème
- Effets sonores
- Système de suivi des scores
Guide de résolution des problèmes
- Problèmes liés au retournement de cartes : vérification des propriétés de transformation CSS
- Problèmes de correspondance : vérifier la logique de comparaison des symboles
- Problèmes de mise en page : ajuster les paramètres de la grille
Conclusion
Cette implémentation fournit une base solide pour un jeu de correspondance de mémoire tout en préservant la lisibilité et l'extensibilité du code. La structure modulaire permet des ajouts et des modifications faciles pour améliorer les fonctionnalités de jeu.
Explorez les cas d'utilisation associés
Découvrez l'assistant IA de Ninja
Essayez gratuitement dès aujourd'hui. Forfaits à partir de 19$ par mois.