Bienvenidas a un nuevoooo VIEEERNEESSSS de tutorialessss!!
Hoy os voy a enseñar algo muy fácil: este precioso, maravilloso y super funcional Memory.
Bien, el código es este, recordad copiarlo en notas y así podréis personalizarlo más fácilmente.
<div class="memo-container">
<div class="memo-header">
<h2>MEMORY</h2>
<button onclick="resetGame()" class="memo-reset-btn">Reiniciar ↺</button>
</div>
<div id="memo-grid" class="memo-grid"></div>
<div id="memo-win-message" class="memo-win-message">¡Ganaste! </div>
</div>
<style>
.memo-container, .memo-container * {
box-sizing: border-box;
}
.memo-container {
width: 100%;
max-width: 00px;
margin: 10px auto;
background: linear-gradient(180deg,#FFF7FC,#FFE6F5);
border:2px solid #FF73BE;
border-radius: 12px;
padding: 12px;
text-align: center;
}
.memo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.memo-header h2 {
color:#FF4FA3;
font-size: 1rem;
margin: 0;
}
.memo-reset-btn {
background:linear-gradient(90deg,#FF5FB4,#FF87CB);
color: #ffffff;
border: none;
border-radius: 6px;
padding: 5px 10px;
font-size: 0.8rem;
cursor: pointer;
}
.memo-reset-btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
font-weight:bold;
transition:.25s;
box-shadow:0 3px 10px rgba(255,111,190,.35);
}
.memo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.memo-card{
width:100%;
aspect-ratio:1/1;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
background:#FFD8EC;
border:2px solid #FF73BE;
border-radius:8px;
font-size:1.45rem;
line-height:1;
text-align:center;
cursor:pointer;
user-select:none;
transition:.2s;
}
.memo-card.flipped{
background:#FFF9FD;
}
.memo-card.matched{
background:#FFC6E5;
border-color:#FF4FA3;
opacity:.9;
}
.memo-win-message{
color:#FF4FA3;
font-size:1rem;
}
</style>
<script>
const EMOJIS = [
'🎀',
'🌸',
'🩷',
'🍒',
'🍓',
'🧸',
'💋',
'🌷'
];
let cards = [];
let flippedCards = [];
let matchedCount = 0;
function initGame() {
const grid = document.getElementById('memo-grid');
document.getElementById('memo-win-message').style.display = 'none';
grid.innerHTML = '';
flippedCards = [];
matchedCount = 0;
cards = [...EMOJIS, ...EMOJIS].sort(() => Math.random() - 0.5);
cards.forEach((emoji, index) => {
const card = document.createElement('div');
card.classList.add('memo-card');
card.dataset.index = index;
card.dataset.emoji = emoji;
card.textContent = '💗';
card.addEventListener('click', handleCardClick);
grid.appendChild(card);
});
}
function handleCardClick(e) {
const card = e.currentTarget;
if (card.classList.contains('flipped') || card.classList.contains('matched') || flippedCards.length === 2) {
return;
}
card.classList.add('flipped');
card.textContent = card.dataset.emoji;
flippedCards.push(card);
if (flippedCards.length === 2) {
checkMatch();
}
}
function checkMatch() {
const [card1, card2] = flippedCards;
if (card1.dataset.emoji === card2.dataset.emoji) {
card1.classList.add('matched');
card2.classList.add('matched');
matchedCount += 2;
flippedCards = [];
if (matchedCount === cards.length) {
document.getElementById('memo-win-message').style.display = 'block';
}
} else {
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
card1.textContent = '💗';
card2.textContent = '💗';
flippedCards = [];
}, 700);
}
}
function resetGame() {
initGame();
}
initGame();
</script>
Bien, como siempre os voy a explicar cada parte que puedes cambiar: "<h2>MEMORY</h2>" es el nombre, lo suyo es dejarlo así pero si queréis cambiarlo pues perfecto.
Un poco más abajo encontrarás el "max-width: 00px;" donde pondrás cambiar el tamaño del gadget (yo lo tengo a 320px).
Todos los colores que están del mismo color deben ser el mismo pero los que están en rosa pueden ser diferentes. Intentar ver lo que os queda mejor e ir probando qué tal os queda.
Los emojis los podéis cambiar a elección y donde ponga los "💗" cambiarlos todos iguales por el mismo emoji. Tened cuidado porque hay algunos emojis que no funcionan bien, intentad cambiarlo y ya está.
Esto sería todo, la verdad es que es bastante sencillo así que no tendréis muchas complicaciones para hacerlo. Espero que os sirva y si tenéis alguna pregunta no dudéis en decírmelo por los comentarios.
No hay comentarios:
Publicar un comentario