ユースケース
/
ホビープロジェクト開発
ゲームやアプリケーションを簡単に構築できます。プログラミングに関する幅広い知識は必要ありません
モデル
•
忍者エージェント
ブラウザベースのメモリーマッチカードゲームを構築するためのステップバイステップの説明と完全な JavaScript コードを教えてください。ゲーム開発者の経験は必要ありません。
メモリーマッチカードゲーム開発研究レポート
エグゼクティブサマリー
このレポートは、ゲーム開発の経験がない開発者向けに設計された、ブラウザベースのメモリマッチカードゲームを構築するための包括的な手順とコードを提供します。この実装では HTML、CSS、JavaScript を使用して、プレイヤーがカードをめくってペアを見つけるインタラクティブなマッチングゲームを作成します。
研究方法論
提供された会話について、以下を含む分析が行われました。
- 初期コード実装レビュー
- コードの問題点と必要な改善点の特定
- 包括的なステップバイステップの説明の作成
技術的要件
前提条件
- HTML、CSS、JavaScript の基本的な理解
- コードエディター (Visual Studio コード、サブライムテキストなど)
- ウェブブラウザ
プロジェクト構造
ゲームには次の 3 つのメインファイルが必要です。
- 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。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});主な機能
- レスポンシブグリッドレイアウト
- カードフリップアニメーション
- マッチチェックロジック
- カウンターを移動
- 再起動機能
- ウィンコンディション検知
可能な機能強化
- タイマーの実装
- 難易度レベル
- テーマ選択
- サウンドエフェクト
- スコアトラッキングシステム
トラブルシューティングガイド
- カードフリップの問題:CSS トランスフォームプロパティの検証
- マッチング問題:シンボル比較ロジックのチェック
- レイアウトの問題:グリッド設定の調整
結論
この実装は、コードの可読性と拡張性を維持しながら、メモリマッチゲームの強固な基盤を提供します。モジュラー構造により、ゲームプレイ機能を強化するための追加や変更が簡単に行えます。
関連するユースケースを見る
忍者の AI アシスタントを体験
今すぐ無料でお試しください。プランは月額19ドルから。