Mystery Game #6
← Back to Games List
// Memory Card Game Implementation
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Game state
const gridSize = 6;
const cardWidth = 80;
const cardHeight = 80;
const padding = 10;
const totalWidth = (cardWidth + padding) * gridSize;
const totalHeight = (cardHeight + padding) * gridSize;
// Center the grid
canvas.width = totalWidth + padding;
canvas.height = totalHeight + padding;
let cards = [];
let flippedCards = [];
let matchedPairs = 0;
let canFlip = true;
let moves = 0;
// Create symbols for pairs (36 cards = 18 pairs)
const symbols = ['♠', '♣', '♥', '♦', '★', '☀', '☁', '☂', '☮', '☯',
'☭', '☢', '☺', '☹', '♫', '♪', '❄', '❤'];
// Initialize game
function initGame() {
// Create pairs of cards
let cardPairs = [...symbols, ...symbols];
// Shuffle cards
for (let i = cardPairs.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[cardPairs[i], cardPairs[j]] = [cardPairs[j], cardPairs[i]];
}
// Create card objects
cards = [];
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
const x = col * (cardWidth + padding) + padding;
const y = row * (cardHeight + padding) + padding;
const symbol = cardPairs[row * gridSize + col];
cards.push({
x: x,
y: y,
width: cardWidth,
height: cardHeight,
symbol: symbol,
isFlipped: false,
isMatched: false
});
}
}
}
// Handle mouse click
canvas.addEventListener('click', function(e) {
if (!canFlip) return;
const rect = canvas.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const clickY = e.clientY - rect.top;
// Check each card
cards.forEach(card => {
if (clickX > card.x && clickX < card.x + card.width &&
clickY > card.y && clickY < card.y + card.height) {
flipCard(card);
}
});
});
function flipCard(card) {
if (card.isFlipped || card.isMatched || flippedCards.length >= 2) return;
card.isFlipped = true;
flippedCards.push(card);
if (flippedCards.length === 2) {
moves++;
canFlip = false;
// Check for match
if (flippedCards[0].symbol === flippedCards[1].symbol) {
flippedCards[0].isMatched = true;
flippedCards[1].isMatched = true;
matchedPairs++;
flippedCards = [];
canFlip = true;
// Check for win
if (matchedPairs === symbols.length) {
setTimeout(() => {
drawWinScreen();
}, 500);
}
} else {
// Flip back after delay
setTimeout(() => {
flippedCards[0].isFlipped = false;
flippedCards[1].isFlipped = false;
flippedCards = [];
canFlip = true;
draw();
}, 1000);
}
}
draw();
}
function draw() {
// Clear canvas
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw cards
cards.forEach(card => {
// Card background
ctx.fillStyle = card.isMatched ? '#e0e0e0' : '#4CAF50';
ctx.fillRect(card.x, card.y, card.width, card.height);
// Card border
ctx.strokeStyle = '#2E7D32';
ctx.strokeRect(card.x, card.y, card.width, card.height);
// Symbol (if flipped)
if (card.isFlipped || card.isMatched) {
ctx.fillStyle = 'black';
ctx.font = '40px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(
card.symbol,
card.x + card.width/2,
card.y + card.height/2
);
}
});
// Draw moves counter
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.textAlign = 'left';
ctx.fillText('Moves: ' + moves, 10, 30);
}
function drawWinScreen() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.textAlign = 'center';
ctx.fillText('You Win!', canvas.width/2, canvas.height/2 - 20);
ctx.font = '20px Arial';
ctx.fillText('Total Moves: ' + moves, canvas.width/2, canvas.height/2 + 20);
// Add restart button
const button = document.createElement('button');
button.textContent = 'Play Again';
button.style.marginTop = '20px';
button.onclick = function() {
location.reload();
};
canvas.parentElement.appendChild(button);
}
// Start game
initGame();
draw();
# Memory Card Game Implementation
import pygame
import random
from dataclasses import dataclass
from typing import List, Optional
@dataclass
class Card:
x: int
y: int
width: int
height: int
symbol: str
is_flipped: bool = False
is_matched: bool = False
class MemoryGame:
def __init__(self):
pygame.init()
# Game settings
self.grid_size = 6
self.card_width = 80
self.card_height = 80
self.padding = 10
self.total_width = (self.card_width + self.padding) * self.grid_size
self.total_height = (self.card_height + self.padding) * self.grid_size
# Initialize display
self.screen = pygame.display.set_mode(
(self.total_width + self.padding,
self.total_height + self.padding))
pygame.display.set_caption('Memory Game')
# Game state
self.symbols = ['♠', '♣', '♥', '♦', '★', '☀', '☁', '☂', '☮', '☯',
'☭', '☢', '☺', '☹', '♫', '♪', '❄', '❤']
self.cards: List[Card] = []
self.flipped_cards: List[Card] = []
self.matched_pairs = 0
self.can_flip = True
self.moves = 0
self.init_game()
def init_game(self):
# Create pairs of cards
card_pairs = self.symbols * 2
random.shuffle(card_pairs)
# Create card objects
self.cards = []
for row in range(self.grid_size):
for col in range(self.grid_size):
x = col * (self.card_width + self.padding) + self.padding
y = row * (self.card_height + self.padding) + self.padding
symbol = card_pairs[row * self.grid_size + col]
self.cards.append(Card(
x=x,
y=y,
width=self.card_width,
height=self.card_height,
symbol=symbol
))
def handle_click(self, pos) -> bool:
if not self.can_flip:
return False
click_x, click_y = pos
# Check each card
for card in self.cards:
if (click_x > card.x and
click_x < card.x + card.width and
click_y > card.y and
click_y < card.y + card.height):
return self.flip_card(card)
return False
def flip_card(self, card: Card) -> bool:
if (card.is_flipped or card.is_matched or
len(self.flipped_cards) >= 2):
return False
card.is_flipped = True
self.flipped_cards.append(card)
if len(self.flipped_cards) == 2:
self.moves += 1
self.can_flip = False
# Check for match
if self.flipped_cards[0].symbol == self.flipped_cards[1].symbol:
self.flipped_cards[0].is_matched = True
self.flipped_cards[1].is_matched = True
self.matched_pairs += 1
self.flipped_cards = []
self.can_flip = True
# Check for win
if self.matched_pairs == len(self.symbols):
return True
else:
# Cards will be flipped back in update
return False
return False
def update(self):
# Handle flipped cards timing
if len(self.flipped_cards) == 2 and not self.can_flip:
pygame.time.wait(1000) # 1 second delay
self.flipped_cards[0].is_flipped = False
self.flipped_cards[1].is_flipped = False
self.flipped_cards = []
self.can_flip = True
def draw(self):
# Clear screen
self.screen.fill((255, 255, 255))
# Draw cards
for card in self.cards:
# Card background
color = (224, 224, 224) if card.is_matched else (76, 175, 80)
pygame.draw.rect(self.screen, color,
(card.x, card.y, card.width, card.height))
# Card border
pygame.draw.rect(self.screen, (46, 125, 50),
(card.x, card.y, card.width, card.height), 1)
# Symbol (if flipped)
if card.is_flipped or card.is_matched:
font = pygame.font.Font(None, 60)
text = font.render(card.symbol, True, (0, 0, 0))
text_rect = text.get_rect(
center=(card.x + card.width/2,
card.y + card.height/2))
self.screen.blit(text, text_rect)
# Draw moves counter
font = pygame.font.Font(None, 36)
moves_text = font.render(f'Moves: {self.moves}', True, (0, 0, 0))
self.screen.blit(moves_text, (10, 30))
pygame.display.flip()
def draw_win_screen(self):
# Semi-transparent overlay
overlay = pygame.Surface(
(self.total_width + self.padding,
self.total_height + self.padding))
overlay.fill((0, 0, 0))
overlay.set_alpha(204) # ~0.8 opacity
self.screen.blit(overlay, (0, 0))
# Win message
font = pygame.font.Font(None, 72)
win_text = font.render('You Win!', True, (255, 255, 255))
moves_text = font.render(
f'Total Moves: {self.moves}', True, (255, 255, 255))
restart_text = font.render(
'Press R to Restart', True, (255, 255, 255))
win_rect = win_text.get_rect(
center=(self.total_width/2,
self.total_height/2 - 40))
moves_rect = moves_text.get_rect(
center=(self.total_width/2,
self.total_height/2 + 20))
restart_rect = restart_text.get_rect(
center=(self.total_width/2,
self.total_height/2 + 80))
self.screen.blit(win_text, win_rect)
self.screen.blit(moves_text, moves_rect)
self.screen.blit(restart_text, restart_rect)
pygame.display.flip()
def run(self):
clock = pygame.time.Clock()
running = True
game_won = False
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
elif event.type == pygame.MOUSEBUTTONDOWN:
if event.button == 1 and not game_won: # Left click
game_won = self.handle_click(event.pos)
elif (event.type == pygame.KEYDOWN and
event.key == pygame.K_r and game_won):
# Reset game
self.__init__()
game_won = False
if not game_won:
self.update()
self.draw()
else:
self.draw_win_screen()
clock.tick(60)
pygame.quit()
if __name__ == '__main__':
game = MemoryGame()
game.run()
Play Game