breakout/index.html at main · MateoRyhr/breakout · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Breakout game online</title>
    <meta name="description" content="Play Breakout game now. The best Breakout game is here, you can select up to 10 levels and select the difficulty. Get the highest score now.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Mateo Ryhr">
    <link rel="canonical" href="https://playbreakoutgame.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="icon" href="./assets/icons/breakout.png">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./src/styles/reset.css">
    <link rel="stylesheet" href="./src/styles/breakout.css">
    <script defer type='module' src="./src/engine/gameManager.js"></script>
    <script data-ad-client="ca-pub-2205427853625614" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  <body>
    <section class="playMenu-settings">
      <i id="musicIcon" class="playMenu-settings_music-icon"></i>
      <p class="playMenu-settings_scoreText">Score: <span id="score" class="playMenu_score">0</span></p>
      <p class="playMenu-settings_lifesText">Lifes: <span id="lifes" class="playMenu_lifes">0</span></p>
      <i id="effectsIcon" class="playMenu-settings_sound-icon"></i>
    </section>

    <section id="menu" class="menu" style="display: flex;">
      <h1 class="menu_title">Breakout</h1>
      <h2 class="menu_play" id="play">PLAY</h2>
      <h2 class="menu_select-level" id="selectLevel">Select level</h2>
    </section>

    <section id="difficultyMenu" class="difficulty-menu">
      <h3 id="veryEasyButton" class="difficulty-menu_button">Very easy</h3>
      <h3 id="easyButton" class="difficulty-menu_button">Easy</h3>
      <h3 id="normalButton" class="difficulty-menu_button">Normal</h3>
      <h3 id="hardButton" class="difficulty-menu_button">Hard</h3>
    </section>

    <section id="menuLevels" class="menu-levels">
      <div id="lvl1" class="menu-levels_level">1</div>
      <div id="lvl2" class="menu-levels_level">2</div>
      <div id="lvl3" class="menu-levels_level">3</div>
      <div id="lvl4" class="menu-levels_level">4</div>
      <div id="lvl5" class="menu-levels_level">5</div>
      <div id="lvl6" class="menu-levels_level">6</div>
      <div id="lvl7" class="menu-levels_level">7</div>
      <div id="lvl8" class="menu-levels_level">8</div>
      <div id="lvl9" class="menu-levels_level">9</div>
      <div id="lvl10" class="menu-levels_level">10</div>
    </section>

    <canvas class="canvas" id="canvas"></canvas>

    <section id='tactilControls' class="playMenu-tactil-controls">
      <i id="left-arrow" class="playMenu-tactil-controls_button left-arrow"></i>
      <i id="up-arrow" class="playMenu-tactil-controls_button up-arrow"></i>
      <i id="right-arrow" class="playMenu-tactil-controls_button right-arrow"></i>
    </section>


    <section id="submenu" class="submenu">
      <section id="winLevelMenu" class="submenu_next-level">
        <h3 class="next-level_title">You win!</h3>
        <h3 id="winLevelPlayAgain" class="next-level_button">Play again</h3>
      </section>

      <section id="nextLevelMenu" class="submenu_next-level">
        <h3 class="next-level_title">You win!</h3>
        <h3 id="nextLevelButton" class="next-level_button">Next level</h3>
      </section>

      <section id="playAgainMenu" class="submenu_play-again">
        <h3 class="play-again_title">You lose</h3>
        <h3 id="playAgainButton" class="play-again_button">Play again</h3>
      </section>

      <section id="gameOverMenu" class="submenu_game-over">
        <h3 class="game-over_title">Congratulations!</h3>
        <h3 class="game-over_text">You won all levels</h3>
        <h3 id="gameOverButton" class="play-again_button">Play again</h3>
      </section>
    </section>

    <footer id="footer" class="footer">
      <p class="footer_copyright">&copy 2021 - Mateo Ryhr</p>
      <p class="footer_music-license">Music by <a href="https://soundcloud.com/lovelightclub/dreamer">Love Light Club</a></p>
    </footer>
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "VideoGame",
        "name": "Breakout",
        "playMode": "SinglePlayer",
        "url": "https://playbreakoutgame.com",
        "image": "/assets/images/gameScreenshot.png",
        "description": "Classic Breakout game online. The best Breakout game is here, you can select up to 10 levels and select the difficulty. Get the highest score now.",
        "inLanguage": ["English"],
        "author": {
          "@type": "Person",
          "name": "Mateo Ryhr",
          "url": "https://www.linkedin.com/in/mateo-ryhr-635a13206/"
        },
        "publisher": {
          "@type": "Person",
          "name": "Mateo Ryhr"
        },
        "genre": ["Arcade","2D","SinglePlayer"],
        "gamePlatform": ["PC game", "Mobile game"],
        "numberOfPlayers": "1",
        "applicationCategory": "Game",
        "operatingSystem": ["Windows 7","Linux","Mac OS","Android","iOS"],
        "offers": {
          "@type": "Offer",
          "price": "0"
        }
      }
    </script>
  </body>
</html>