Skip to content

Commit

Permalink
15.12.2024 | Memory anpassung
Browse files Browse the repository at this point in the history
  • Loading branch information
@ubodigat
ubodigat committed Dec 15, 2024
1 parent c4c9d45 commit c775caf
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 18 deletions.
87 changes: 69 additions & 18 deletions games/memory/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,14 @@
</nav>

<main>
<div id="game-board">
<!-- Erste Zeile -->
<div id="player-setup">
<h5>Wähle die Anzahl der Spieler:</h5>
<input type="number" id="player-count" min="1" max="10" value="1">
<button id="start-button">Start</button>
</div>
<div id="game-board" style="display: none;">
<div class="card-row">
<!-- Erste Zeile -->
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
Expand All @@ -94,8 +99,8 @@
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
</div>
<!-- Zweite Zeile -->
<div class="card-row">
<!-- Zweite Zeile -->
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
Expand All @@ -107,8 +112,8 @@
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
</div>
<!-- Dritte Zeile -->
<div class="card-row">
<!-- Dritte Zeile -->
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
<div class="card"><span class="emoji"></span></div>
Expand All @@ -121,21 +126,42 @@
<div class="card"><span class="emoji"></span></div>
</div>
</div>
<div id="score">
<h5>Score:</h5>
<span>0</span>
<div id="scores" style="display: none;">
<h5>Scores:</h5>
<div id="player-scores"></div>
</div>
<div id="current-player" style="display: none;">
<h5>Aktueller Spieler:</h5>
<span id="current-player-name"></span>
</div>
<button id="reset-button">Zurücksetzen</button>
<button id="reset-button" style="display: none;">Zurücksetzen</button>
<script>
const emojis = ['😻', '🙂', '🫡', '🤑', '🐶', '🐱', '🍎', '🍌', '🍒', '☀️', '🫂', '✨', '🗺️', '💤', '🚁']; // Weitere Emojis hinzufügen

const shuffledEmojis = emojis.concat(emojis).sort(() => Math.random() - 0.5);

const cards = Array.from(document.querySelectorAll('.card'));

let flippedCards = [];
let foundPairs = 0;
let isProcessing = false;
let currentPlayer = 0;
let playerScores = [];
let totalPlayers = 1;

document.getElementById('start-button').addEventListener('click', () => {
totalPlayers = parseInt(document.getElementById('player-count').value, 10);
for (let i = 0; i < totalPlayers; i++) {
playerScores.push(0);
}

document.getElementById('player-setup').style.display = 'none';
document.getElementById('game-board').style.display = 'block';
document.getElementById('scores').style.display = 'block';
document.getElementById('current-player').style.display = 'block';
document.getElementById('reset-button').style.display = 'block';

updateScores();
updateCurrentPlayer();
});

cards.forEach((card, i) => {
card.addEventListener('click', () => {
Expand Down Expand Up @@ -168,15 +194,14 @@ <h5>Score:</h5>
if (card1.emoji === card2.emoji) {
card1.element.style.visibility = 'hidden';
card2.element.style.visibility = 'hidden';
foundPairs++;
if (foundPairs === emojis.length) {
alert('Glückwunsch! Du hast alle Paare gefunden.');
}
playerScores[currentPlayer]++;
} else {
card1.element.style.transition = 'transform 0.00s ease-in-out';
card1.element.style.transform = 'rotateY(0deg)';
card2.element.style.transition = 'transform 0.00s ease-in-out';
card2.element.style.transform = 'rotateY(0deg)';

currentPlayer = (currentPlayer + 1) % totalPlayers; // Spieler wechseln nur, wenn sie kein Paar gefunden haben
}

flippedCards.forEach(card => {
Expand All @@ -187,8 +212,8 @@ <h5>Score:</h5>
flippedCards = [];
isProcessing = false;

const scoreElement = document.getElementById('score').querySelector('span');
scoreElement.textContent = foundPairs;
updateScores();
updateCurrentPlayer();
}, 2000);
}
});
Expand All @@ -206,10 +231,36 @@ <h5>Score:</h5>
flippedCards = [];
foundPairs = 0;
isProcessing = false;
currentPlayer = 0;
playerScores = [];
totalPlayers = 1;

const playerCountInput = document.getElementById('player-count');
playerCountInput.value = 1;

updateScores();
updateCurrentPlayer();

const scoreElement = document.getElementById('score').querySelector('span');
scoreElement.textContent = foundPairs;
document.getElementById('player-setup').style.display = 'block';
document.getElementById('game-board').style.display = 'none';
document.getElementById('scores').style.display = 'none';
document.getElementById('current-player').style.display = 'none';
document.getElementById('reset-button').style.display = 'none';
});

function updateScores() {
const scoreElement = document.getElementById('player-scores');
scoreElement.innerHTML = '';
playerScores.forEach((score, index) => {
const scoreDiv = document.createElement('div');
scoreDiv.textContent = `Spieler ${index + 1}: ${score}`;
scoreElement.appendChild(scoreDiv);
});
}

function updateCurrentPlayer() {
document.getElementById('current-player-name').textContent = `Spieler ${currentPlayer + 1}`;
}
</script>
</main>

Expand Down
87 changes: 87 additions & 0 deletions games/memory/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,4 +279,91 @@ body {
background-color: #00ff0d;
color: #575757;
font-weight: 700;
}

main {
background-color: #11111198;
border-radius: 10px;
box-shadow: 0 4px 8px #00000099;
padding: 20px;
}

h5 {
margin: 10px 0;
color: #9e9e9e;
}

#player-setup {
margin-bottom: 20px;
}

#player-count {
padding: 10px;
font-size: 16px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

#player-count:focus {
border-color: #4caf50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
outline: none;
}

#start-button,
#reset-button {
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}

#start-button:hover,
#reset-button:hover {
background-color: #45a049;
}

.card-row {
display: flex;
justify-content: center;
margin-bottom: 10px;
}

.card {
background-color: #2929297e;
border-radius: 5px;
color: white;
font-size: 30px;
width: 90px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 5px;
perspective: 1000px;
}

.card.face-up {
background-color: #707070;
color: #505050;
}

#scores {
margin: 20px 0;
color: #fff;
}

#current-player {
color: #fff;
margin: 10px 0;
font-size: 18px;
font-weight: bold;
}

0 comments on commit c775caf

Please sign in to comment.