repl.it
@heyitsmarcus/

SimonCubed

HTML, CSS, JS

A memory game built using Vanilla JavaScript that may or may not feature the late, great Michael Jackson' s quirky sound effects.

fork
loading
Files
  • index.html
  • index.css
  • index.js
index.html
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
            <img src="http://www.marcusparsons.com/projects/simoncubed/simoncubedlogo.png" alt="Simon Cubed Logo" id="logo">
        <button id="shareFBScore"></button>
        <div id="gameOverlay">
            <div class="gameButton" id="gamered">		
            </div>
            <div class="gameButton" id="gameblue">	
            </div>
            <button id="playButton">Play!</button>
            <div class="gameButton" id="gamegreen">
            </div>
            <div class="gameButton" id="gameyellow">
            </div>
        </div>
<div id="controlArea">
	<input readonly type="text" id="counter" value="--">
</div>
<audio id="mjs1" preload="auto" src="http://marcusparsons.com/projects/simoncubed/sounds/mjSound1.mp3" onplaying="Deactivate()" onended="Reactivate()"></audio>
<audio id="mjs2" preload="auto" src="http://marcusparsons.com/projects/simoncubed/sounds/mjSound2.mp3" onplaying="Deactivate()" onended="Reactivate()"></audio>
<audio id="mjs3" preload="auto" src="http://marcusparsons.com/projects/simoncubed/sounds/mjSound3.mp3" onplaying="Deactivate()" onended="Reactivate()"></audio>
<audio id="mjs4" preload="auto" src="http://marcusparsons.com/projects/simoncubed/sounds/mjSound4.mp3" onplaying="Deactivate()" onended="Reactivate()"></audio>
<script>
  let gBtns = document.querySelectorAll('.gameButton');
  function Deactivate() {
      for (let i = 0; i < gBtns.length; i++) {
          gBtns[i].classList.add('non-active');
          gBtns[i].classList.remove('active');
      }
    }
              
  function Reactivate() {
    for (let i = 0; i < gBtns.length; i++) {
        gBtns[i].classList.add('active');
        gBtns[i].classList.remove('non-active');
    }
  }
</script>
    <script src="index.js"></script>
  </body>
</html>
result
console
?