Breakout-JQuery/index.html at master · Crateros/Breakout-JQuery · 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
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Molle:400i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico" rel="stylesheet">
    <!-- <script src="js/main.js"></script> -->
    <title>BreakOut JQuery</title>
  </head>

  <body>
    <audio autoplay volume="0.25">
      <source src="music/mainmenu.mp3" type="audio/mpeg" volume="0.25"></audio>


    <!-- Game container -->
    <div class="gameBox">
      <div id="jquery" class="rotate">JQuery</div>
      <div id="bigTitle">BREAKOUT</div>
      <div id="startGame" class="fade">[1] New Game</div>
      <div id="highScores" class="fade">[2] High Scores</div>
      <div id="about" class="fade">[3] About Breakout</div>
      <div id="spacebarStart" class="fade"></div>
      <div id="scoreBox">
        <ol id="scoreSheet">
          <li id="score1" class="fade">...</li>
          <li id="score2" class="fade">...</li>
          <li id="score3" class="fade">...</li>
          <li id="score4" class="fade">...</li>
          <li id="score5" class="fade">...</li>
        </ol>
      </div>
      <div id="backButton" class="fade">[Back]</div>
      <div id="breakoutInfo">Breakout is an arcade game developed and published by Atari, Inc. It was conceptualized by Nolan Bushnell and Steve Bristow, influenced by the 1972 Atari arcade game Pong, and built by Steve Wozniak aided by Steve Jobs.</div>
      <canvas id="canvas" width="650" height="475"></canvas>
    </div>
    <div class="gameInfo">
  		<div class="instructions">
  			<small>
  				Use left and right keys or your mouse to move the game paddle.
  				<br>
  			</small>
  		</div>
  	</div>
    <!-- Game logo -->
    <div class="logo">
      <div id="score">Score: <span id="currentScore">0</span></div>
      <div id="muteButton"><img src="img/play2.png" alt="Mute"></div>
      <div id="gameOver">GAME OVER</div>
      <div id="newGame" class="fade">New Game</div>
      <!-- <div class ="playerLives">
        <ul>
          <li class="life"></li>
          <li class="life"></li>
          <li class="life"></li>
        </ul>
      </div> -->
    </div>

  <script src="js/main.js"></script>
  <script src="js/controls.js"></script>
  <script src="js/jquery.playSound.js"></script>
  </body>

</html>


<!-- class="animated fadeIn" -->