Untitled

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>משחק זיכרון - שמואל א' פרקים ד'-ה'</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        h1 { color: #2c3e50; margin-top: 20px; }
        .stats { margin-bottom: 10px; font-size: 1.2rem; }
        
        .game-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            max-width: 800px;
            padding: 20px;
        }

        .card {
            width: 150px;
            height: 100px;
            background-color: #3498db;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            cursor: pointer;
            border-radius: 8px;
            font-weight: bold;
            font-size: 1rem;
            padding: 10px;
            transition: transform 0.3s;
            user-select: none;
        }

        .card.flipped {
            background-color: #ecf0f1;
            color: #2c3e50;
            border: 2px solid #3498db;
        }

        .card.matched {
            background-color: #27ae60;
            visibility: hidden; /* הקלף נעלם כשיש התאמה */
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 1rem;
            cursor: pointer;
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>

    <h1>משחק זיכרון: ארון ה' בשבי הפלשתים</h1>
    <div class="stats">ניסיונות: <span id="moves">0</span></div>
    
    <div class="game-container" id="gameBoard">
        </div>

    <button onclick="resetGame()">משחק חדש</button>

    <script>
        const cardsData = [
            { id: 1, text: "עלי הכהן", pair: 1 },
            { id: 1, text: "נפל מהכיסא ומת כששמע על הארון", pair: 1 },
            { id: 2, text: "דגון", pair: 2 },
            { id: 2, text: "אלוהי הפלשתים שנפל לפני הארון", pair: 2 },
            { id: 3, text: "אשדוד", pair: 3 },
            { id: 3, text: "העיר הראשונה אליה הגיע הארון", pair: 3 },
            { id: 4, text: "אי-כבוד", pair: 4 },
            { id: 4, text: "הבן של אשת פינחס (גלה כבוד מישראל)", pair: 4 },
            { id: 5, text: "אבן העזר", pair: 5 },
            { id: 5, text: "מקום מחנה ישראל בקרב נגד פלשתים", pair: 5 },
            { id: 6, text: "עפולים", pair: 6 },
            { id: 6, text: "המכה שקיבלו אנשי אשדוד וגת", pair: 6 },
            { id: 7, text: "חפני ופינחס", pair: 7 },
            { id: 7, text: "בני עלי שמתו בקרב", pair: 7 },
            { id: 8, text: "גת ועקרון", pair: 8 },
            { id: 8, text: "ערים נוספות אליהן נדד הארון", pair: 8 }
        ];

        let flippedCards = [];
        let matchedPairs = 0;
        let moves = 0;

        function shuffle(array) {
            return array.sort(() => Math.random() - 0.5);
        }

        function createBoard() {
            const board = document.getElementById('gameBoard');
            const shuffledCards = shuffle([...cardsData]);
            
            shuffledCards.forEach((data, index) => {
                const card = document.createElement('div');
                card.classList.add('card');
                card.dataset.pair = data.pair;
                card.dataset.index = index;
                card.innerText = "?"; // מוסתר בהתחלה
                card.onclick = () => flipCard(card, data.text);
                board.appendChild(card);
            });
        }

        function flipCard(card, text) {
            if (flippedCards.length < 2 && !card.classList.contains('flipped')) {
                card.innerText = text;
                card.classList.add('flipped');
                flippedCards.push(card);

                if (flippedCards.length === 2) {
                    moves++;
                    document.getElementById('moves').innerText = moves;
                    checkMatch();
                }
            }
        }

        function checkMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.pair === card2.dataset.pair) {
                setTimeout(() => {
                    card1.classList.add('matched');
                    card2.classList.add('matched');
                    flippedCards = [];
                    matchedPairs++;
                    if (matchedPairs === cardsData.length / 2) {
                        alert("כל הכבוד! סיימת את המשחק ב-" + moves + " ניסיונות.");
                    }
                }, 600);
            } else {
                setTimeout(() => {
                    card1.innerText = "?";
                    card2.innerText = "?";
                    card1.classList.remove('flipped');
                    card2.classList.remove('flipped');
                    flippedCards = [];
                }, 1000);
            }
        }

        function resetGame() {
            document.getElementById('gameBoard').innerHTML = '';
            document.getElementById('moves').innerText = '0';
            moves = 0;
            matchedPairs = 0;
            flippedCards = [];
            createBoard();
        }

        createBoard();
    </script>
</body>
</html>
Editor is loading...