oregev.github.io/index.html at master · FrontendWorks/oregev.github.io · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <audio preload ="none" src="">
        <source src="sounds/gameMusic2.mp3" type="audio/mp3">
        <source src="sounds/frog.mp3" type="audio/mp3">
        <source src="ounds/padSound1" type="audio/mp3">
        <source src="sounds/winMusic2" type="audio/mp3">
        <source src="sounds/loseMusic2" type="audio/mp3">
    </audio>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chase3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="body">
    <header>
        <div id="replay-container" class="centerIt">
            <button id="replayElem" onclick="replayCompTurn()"><i class="fa fa-history"></i></button>
        </div>
        <div id="heading-container" class="centerIt">
            <h1>CHASE3</h1>
        </div>
        <div id="menu-container" class="centerIt">
            <button id="menu-btn" onclick="toggleMenu(menu)"><i class="fa fa-reorder"></i></button>
        </div>
    </header>
    <div id="audio-control">
        <i id="pauseIcon" class="fa fa-pause" onclick="toggleMusic()"></i>
        <i id="playIcon" class="fa fa-play" onclick="toggleMusic()"></i>
    </div>
                                <!-- manu Screen-->
    <div id="menu">
        <button class="centerIt" onclick="toggleMenu(about, menu)">ABOUT</button>
        <hr>
        <button class="centerIt" onclick="refresh()">RESTART</button>
        <hr>
        <button class="centerIt" onclick="toggleMenu(contact, menu)">CONTACT</button>
    </div>
    <div id="about">
        <h2>ABOUT</h2>
        <br>
        <p><em>This is the 3rd version of the popular memory game.</em><br>
            <span>All you have to do is <strong>CHASE</strong> the computer,<br>
                remember the moves then do the same.<br>
                if you lose you start over.<br>
            </span>
            are you ready ?
        </p>
        <button onclick="removeScr(about)"><i class="fa fa-close"></i></button>
    </div>
    <div id="contact">
        <h2>CONTACT</h2>
        <br>
        <p>if you liked the game<br>
        or you wanna suggest an improvment<br>
    please contact me.</p>
        <a target="_blank" href="mailto:darklightusa@gmail.com">darklightusa@gmail.com</a>
        <br>

        <button onclick="removeScr(contact)"><i class="fa fa-close"></i></button>
    </div>
    <main>
                                <!-- Start Screen-->
        <div id="start-scr" class="centerIt">
            <div id="welcome-msg">
                <h2>WELCOME<br>TO<br>CHASE</h2>
            </div>
            <div>
                <button id="start-btn" onclick="removeStartScr()"><i class="fa fa-caret-right"></i></button>
            </div>
        </div>

                                <!-- Choose Screen-->
        <div id="choser-scr" class="centerIt" >
            <h2>CHOOSE GRID SIZE</h2>
            <form id="choser-form" onsubmit="createWorld()">
                <div id="grid-select" class="centerIt">
                    <div class="centerIt select-container">
                        <input class="selector" type="radio" name="size" id="2x2" value="2" checked>
                        <label for="2x2">2 x 2</label>
                    </div>
                    <div class="centerIt select-container">
                        <input class="selector" type="radio" name="size" id="3x3" value="3">
                        <label for="3x3">3 x 3</label>
                    </div>
                    <div class="centerIt select-container">
                        <input class="selector" type="radio" name="size" id="4x4" value="4">
                        <label for="4x4">4 x 4</label>
                    </div>
                </div>
            </form>
            <button id="start-btn" onclick="createWorld()"><i class="fa fa-caret-right"></i></button>
        </div>

                                <!-- Game Screen-->
        <div id="game-scr" class="centerIt">
            <main id="game-area" class="centerIt">
                <div id="ready-scr" class="centerIt">
                    <p id="ready-msg">NOW<BR>CHASE</p>
                </div>
            </main>
        </div>

                                <!-- Win Screen-->
        <div id="win-scr" class="centerIt">
            <h3>YOU<br>WIN</h3>
            <p id="levelElem"></p>
        </div>

                                <!-- loose Screen-->
        <div id="lose-scr" class="centerIt">
            <h3>YOU<br>LOSE</h3>
            <p>BACK TO LEVEL<br>1</p>
        </div>
    </main>

    <footer class="centerIt">
        <div>
            <p>created by: Or Regev</p>
        </div>
        <div>
            <h3>C<br>H<br>A<br>S<br>E<br>3</h3>
        </div>
    </footer>

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