memory-card-game/index.html at main · Magda-R-bit/memory-card-game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="memory cards game, kids, memory cards, game, animals">
    <meta name="description"
        content="Test your memory. Fun and challenging card matching game. Flip the cards, find the pairs fast, and win!">

    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" as="style">
    <link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet">
    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="assets/css/style.css">

    <title>Memory Cards Game</title>

</head>

<body>
    <!-- The Logo  -->
    <h1>
        <img class="logo" src="assets/images/memoryGame.png" alt="logo"> Memory Cards
    </h1>
    <!-- The open rules button -->
    <div class="howTo"><button id="howButton">How to play</button></div>
    <!-- The Rules -->
    <div id="myRules" class="rules">
        <!-- The Rules content -->
        <div class="rules-content">
            <span class="close">&times;</span>
            <h2>Instructions: </h2>
            <p>Match all the pairs of cards as quickly as possible. </p>
            <br>
            <ul>
                <li>Flip the cards: Click on any two cards to flip them over.</li>
                <li>Match all the cards: If two cards match, they will remain flipped over. If not, they will flip back.
                </li>
                <li>Keep matching pairs: Continue flipping cards and trying to match pairs.</li>
                <li>Win the game: The game ends when all pairs have been matched.</li>
            </ul>
            <p>Game over conditions:</p>
            <ul>
                <li>If you exceed the time limit of 100s, the game will end.</li>
            </ul>
            <p>Winning:</p>
            <ul>
                <li>Match all the cards before time runs out to win. Your total time and numbers of moves will be
                    displayed at the end of the game.</li>
            </ul>
        </div>


    </div>
    <!-- The Game -->
    <div class="game-box"></div>
    <!-- The Winner icon -->
    <div class="winner-icon">
        <div class="winner">Congratulation, You Won!</div>
        <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@latest/dist/confetti.browser.min.js"></script>
    </div>
    <!-- The Game over icon -->
    <div class="game-over">
        <div class="game-over-message">Game Over!</div>
    </div>
    <!-- The Control panel -->
    <div class="control-panel">
        <div class="records">
            <div class="moves">Moves: 0</div>
            <div class="timer">Time: 0 sec</div>
        </div>
        <div class="gameBtn">
            <div class="start"><button onclick="startTimer()">Start</button></div>
            <div class="pause"><button onclick="stopTimer()">Pause</button></div>
        </div>
        <div class="actions"><button onclick="restart()">Restart</button></div>
    </div>

    <script src="assets/js/script.js"></script>
</body>

</html>