In diesem Artikel werden wir uns ansehen, wie man mit HTML, CSS und JavaScript ein einfaches Memory-Spiel erstellt. Wir werden jedes Stück Code Schritt für Schritt erklären, damit auch diejenigen, die zum ersten Mal mit Programmierung zu tun haben, das Ergebnis verstehen und wiederholen können. Wir werden uns ansehen, wie man eine Seitenstruktur erstellt, sie formatiert und Spiellogik hinzufügt, um Ihre Karten zum Leben zu erwecken. Los geht's! 🚀
1. Was ist ein Memory-Spiel? 🧠
Memory (oder "Memory Game") ist ein klassisches Spiel, bei dem der Spieler Paare identischer Karten finden muss, indem er sie der Reihe nach öffnet. Die Hauptaufgabe besteht darin, sich die Position jeder Karte zu merken, um Paare erfolgreich zu finden. Dies ist eine großartige Übung, um Gedächtnis und Konzentration zu trainieren.
2. Projektstruktur 📁
Unser Projekt besteht aus drei Hauptdateien:
index.html: die Struktur des Spiels, was der Benutzer sieht.
style.css: Stile, die das Spiel schön und angenehm aussehen lassen.
script.js: Spiellogik, die das Verhalten von Karten bei der Interaktion mit dem Benutzer bestimmt.
Wir haben auch einen Ordner images, die Bilder von Karten enthält, die im Spiel verwendet werden.
3. HTML: Erstellen Sie die Grundlage der Seite 📝
Beginnen wir mit der HTML-Datei. Sie enthält die Grundstruktur unseres Spiels, die aus einem Spielbrett und den dazugehörigen Stylesheets und Skriptdateien besteht:
<!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>Erklärung des Codes
<div class="game-board">: Dies ist der Container, in dem sich alle Karten befinden. Später werden wir sie dynamisch mit JavaScript hinzufügen. Dies ist der Hauptort für die Interaktion des Benutzers mit dem Spiel.<link rel="stylesheet" href="style.css">: Wir verbinden die CSS-Datei, um unser Spiel zu stylen und es visuell ansprechend zu gestalten.<script src="script.js">: Wir verbinden JavaScript, um die Spiellogik hinzuzufügen und das Spiel interaktiv zu machen.
4. CSS: Schönheit hinzufügen 🎨
Kommen wir nun zu CSS. Lassen Sie uns unser Spiel so gestalten, dass es attraktiv aussieht und für den Spieler bequem ist.
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;
}Erklärung des Codes
body: Wir zentrieren den gesamten Inhalt auf dem Bildschirm, damit das Spiel schön aussieht und sich in der Mitte befindet. Dies schafft eine angenehme Benutzererfahrung..game-board: Wir verwenden grid layout um Karten in einem Raster anzuordnen. Dies hilft, die Karten ordentlich und gleichmäßig anzuordnen..card: Stile für Karten. Sie haben einen schönen weißen Hintergrund, Schatten und abgerundete Ecken, was sie optisch ansprechend macht. Wenn der Benutzer mit der Maus darüber fährt, sollte die Karte interaktiv erscheinen..card img: Standardmäßig sind die Kartenbilder ausgeblendet, da der Spieler zuerst nur die Kartenrückseite sieht..flipped: Wenn die Karte umgedreht wird, zeigen wir ein Bild an, damit der Spieler sehen kann, was sich darunter verbirgt.
5. JavaScript: Fügen Sie die Spiellogik hinzu 🧩
Jetzt kommt der interessante Teil - fügen wir die Spiellogik mit JavaScript hinzu. JavaScript ist verantwortlich für die Interaktion des Spielers mit den Karten, die Überprüfung der Übereinstimmungen und die Steuerung des Spiels. Schauen wir uns jede Funktion an:
const cardsArray = [
{ name: 'card1', img: 'images/card1.png' },
{ name: 'card2', img: 'images/card2.png' },
// Fügen Sie die restlichen Kartenpaare hinzu
];
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);Erklärung des Codes
Array
cardsArray: Enthält Objekte mit Informationen zu Karten, einschließlich deren Namen und Bilder. Wir duplizieren jede Karte, um Paare zu erstellen.Variablen
firstCard,secondCard,lockBoard: Diese Variablen helfen, den Status des Spiels zu verfolgen.firstCardundsecondCardspeichern Informationen über die aktuell aufgedeckten Karten undlockBoardverhindert, dass andere Karten aufgedeckt werden, während Übereinstimmungen überprüft werden.Funktion
createBoard(): Erstellt ein Spielbrett. Wir mischen die Karten, damit jedes Spiel einzigartig und interessant ist, und fügen dann die Karten zum Brett hinzu.Funktion
flipCard(): Steuert das Umdrehen der Karte. Wenn dies die erste umgedrehte Karte ist, wird sie infirstCardgespeichert. Wenn dies die zweite Karte ist, prüfen wir, ob sie übereinstimmen.Funktion
checkForMatch(): Vergleicht zwei umgedrehte Karten. Wenn sie übereinstimmen, wirddisableCards()aufgerufen, um die Möglichkeit zu deaktivieren, diese Karten umzudrehen.Funktionen
disableCards()undunflipCards(): Wenn die Karten übereinstimmen, lassen wir sie offen und deaktivieren das Klickereignis. Wenn sie nicht übereinstimmen, drehen wir sie nach einer Sekunde wieder um.Funktion
resetBoard(): Setzt die Variablen zurück, damit das Spiel fehlerfrei fortgesetzt werden kann.Ereignis
DOMContentLoaded: Stellt sicher, dass unsere FunktioncreateBoard()aufgerufen wird, wenn der gesamte HTML-Code geladen ist.
6. Fazit 🎉
Herzlichen Glückwunsch! Jetzt haben Sie ein umfassendes Verständnis dafür, wie Sie mit HTML, CSS und JavaScript ein einfaches Memory-Spiel erstellen. Wir haben den Weg von der grundlegenden HTML-Struktur bis zur komplexen Spiellogik mit JavaScript zurückgelegt. Dieses Spiel ist eine großartige Möglichkeit, die Grundlagen der Programmierung zu üben und Ihre DOM-Fähigkeiten zu verbessern. Scheuen Sie sich nicht, zu experimentieren und neue Funktionen wie einen Punktestand oder einen Timer hinzuzufügen! 😊