MatchingGame/matching-game-061218.html at master · brianmccln/MatchingGame · 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
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>

<html>

    <head>

        <title>Memory Game</title>

        <link href="css/matching-game.css" rel="stylesheet">

        <style>

            #high-score-box {
                position: absolute;
                width: 700px;
                padding: 20px;
                height: 500px;
                font-size: 1.25rem;
                color: #359;
                font-weight: 700;
                overflow-y: scroll;
                top: 1000px; /* push it off screen til needed to display high scores */
                left: 550px;
                background-color:aquamarine;
                border: 5px solid aqua;
                box-shadow: 10px 10px 10px aqua;
                border-radius: 15px;
                z-index: 3;
                display: none;
            }

        </style>

    </head>

    <body>

       <div id="container">

           <header>

               <h1>Memory Game</h1>

               <select id="chooser" style="font-size:1.25rem; padding:5px 10px; margin:0 0 0 35px">

                   <option value="12">Choose Level</option>
                   <option value="12">Novice (12 pairs)</option>
                   <option value="18">Aficionado (18 pairs)</option>
                   <option value="25">Professional (25 pairs)</option>
                   <option value="30">Ninja (30 pairs)</option>

               </select>

               <button id="play-btn">PLAY</button>

               <div id="msg-box"></div>

           </header>

           <div id="app"></div><!-- holds match game pieces -->

           <footer>
               <!-- average = matches/attempts
every 2 picChoices counts as 1 attempts++
every correct match increments matches++ -->

               <span id="score-box">
                    Attempts: &nbsp; 0 &nbsp;
                    Matches: &nbsp; 0 &nbsp;
                    Average: &nbsp; 0.000 &nbsp;
                    Score: &nbsp; 0 &nbsp;
                </span>

               <span id="timer-box" style="color:red">
                   00:00
               </span>

           </footer>

       </div><!-- close container -->

        <!-- high score box -->
        <div id="high-score-box">
        </div>

        <script src="js/Classes/MemoryGame.js"></script>

        <script>

            const picsArr = [ "anchor", "apple", "barn", "baseball", "basketball-player", "boxer", "car", "cat", "cowboy-boot", "duck", "eagle", "golden-anchor", "grapes", "horse", "house", "jumping-horse", "jumping", "key", "keys", "lion", "monster-truck", "motorcycle", "pocket-watch", "scissors", "seahorse", "shoe", "stopwatch", "wagon-wheel", "wheel", "slamdunk" ]

            const memoryGame = new MemoryGame('app', picsArr)

        </script>

 </body>

</html>