この記事では、HTML、CSS、JavaScriptを使用してシンプルなメモリゲームを作成する方法について説明します。プログラミングを初めて見る人でも結果を理解して再現できるように、コードの各フラグメントを順を追って説明します。ページの構造を作成し、スタイルを設定し、ゲームのロジックを追加してカードに命を吹き込む方法を見ていきます。さあ始めましょう！ 🚀
1.記憶ゲームとは何ですか？ 🧠
メモリーゲームは、プレイヤーが同じカードのペアを見つけ、順番にカードを開く古典的なゲームです。ペアを見つけるためには、各カードの位置を覚えることが重要です。これは、記憶力と集中力を鍛えるのに最適なゲームです。
2. プロジェクトの構造 📁
このプロジェクトは、3つの主要なファイルで構成されています。
index.html: ゲームの構造、ユーザーに表示されるもの。
style.css：ゲームを美しく、見やすくするスタイル。
script.js：ユーザーとのやり取りにおけるカードの動作を決定するゲームロジック。
また、フォルダもあります imagesゲームで使用されるカードの画像を含む。
3. HTML：ページのベースを作成する 📝
HTMLファイルから始めましょう。これには、ゲームボードと接続されたスタイルとスクリプトファイルであるゲームの基本構造が含まれています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Игра на память</title>
</head>
<body>
<div class="game-board">
<!-- Карты будут генерироваться здесь -->
</div>
<script src="script.js"></script>
</body>
</html>コードの説明
<div class="game-board">：これは、すべてのカードが配置されるコンテナです。後で、JavaScriptを使用して動的に追加します。これは、ユーザーがゲームとやり取りするための主要な場所です。<link rel="stylesheet" href="style.css">：CSSファイルを接続して、ゲームのスタイルを設定し、視覚的に魅力的にします。<script src="script.js">：ゲームのロジックを追加し、ゲームをインタラクティブにするためにJavaScriptを接続します。
4. CSS：美しさを追加する 🎨
次に、CSSに移りましょう。ゲームをスタイリングして、魅力的でプレイヤーにとって快適なものにしましょう。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 10px;
}
.card {
width: 100px;
height: 150px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.card img {
max-width: 100%;
max-height: 100%;
display: none;
}
.card.flipped img {
display: block;
}コードの説明
body：ゲームが可愛らしく見え、中央に配置されるように、画面上のすべてのコンテンツを中央に配置します。これにより、快適なユーザーエクスペリエンスが実現します。.game-board: 使用 grid layout カードをグリッド状に整理するため。これにより、カードの配置を整理し、均一にすることができます。.card：カードのスタイル。美しい白い背景、影、丸みを帯びた角が、視覚的に魅力的な外観を作り出します。ユーザーがマウスオーバーすると、カードがインタラクティブに見えるはずです。.card img：デフォルトでは、カードのイメージは非表示になっており、プレイヤーは最初にカードの裏面のみを見ることができます。.flipped: カードが裏返ると、その下に何が隠されているかプレイヤーが見られるように画像が表示されます。
5. JavaScript：ゲームロジックを追加する🧩
さて、最も面白いのは、JavaScriptを使用してゲームロジックを追加することです。JavaScriptは、プレイヤーとカードの相互作用、マッチングの確認、ゲームの進行の制御を担当します。各機能を見てみましょう。
const cardsArray = [
{ name: 'card1', img: 'images/card1.png' },
{ name: 'card2', img: 'images/card2.png' },
// 残りのカードのペアを追加します
];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
function createBoard() {
const gameBoard = document.querySelector('.game-board');
const shuffledCards = [...cardsArray, ...cardsArray].sort(() => 0.5 - Math.random());
shuffledCards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.name = card.name;
const cardImage = document.createElement('img');
cardImage.src = card.img;
cardElement.appendChild(cardImage);
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
}
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flipped');
if (!firstCard) {
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
if (firstCard.dataset.name === secondCard.dataset.name) {
disableCards();
} else {
unflipCards();
}
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
resetBoard();
}, 1000);
}
function resetBoard() {
[firstCard, secondCard, lockBoard] = [null, null, false];
}
document.addEventListener('DOMContentLoaded', createBoard);コードの説明
配列
cardsArray: 名前や画像など、カードに関する情報を含むオブジェクトが含まれています。ペアを作成するために、各カードを複製します。変数
firstCard,secondCard,lockBoard：これらの変数はゲームの状態を追跡するのに役立ちます。firstCardとsecondCardは現在の裏返しカードに関する情報を保存し、lockBoardは一致を確認している間、他のカードが裏返されるのを防ぎます。機能
createBoard()：ゲームボードを作成します。カードをシャッフルして、ゲームごとにユニークで楽しいものにし、カードをボードに追加します。機能
flipCard()：カードの裏返しを制御します。これが最初に裏返されたカードの場合、firstCardに保存されます。これが2枚目のカードの場合は、それらが一致するかどうかを確認します。機能
checkForMatch()：裏返した2枚のカードを比較します。それらが一致する場合、disableCards()が呼び出され、これらのカードを裏返す機能が無効になります。機能
disableCards()とunflipCards()：カードが一致する場合は、カードをオープンのままにして、クリックイベントを無効にします。一致しない場合は、1秒後に元に戻します。機能
resetBoard(): エラーなしでゲームを続行できるように、変数の値をリセットします。イベント
DOMContentLoaded: すべての HTML が読み込まれたときに、関数createBoard()が呼び出されることを保証します。
6. 結論 🎉
おめでとうございます！これで、HTML、CSS、JavaScriptを使用してシンプルなメモリゲームを作成する方法を完全に理解できました。基本的なHTML構造から、JavaScriptを使用した複雑なゲームロジックまで、その道のりをたどってきました。このゲームは、プログラミングの基本を練習し、DOMスキルを向上させるのに最適な方法です。ポイントカウンターやタイマーなど、新しい機能を追加して、試行錯誤することを恐れないでください！ 😊