Tetris/index.html at master · iseessel/Tetris · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P"
      rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="./bundle.js"></script>

  </head>
  <body>
    <div style="font-family: Press Start 2P;"></div>

    <div class="game">

        <h1 class="game-title">
          <!-- <span style="color:#2FFFFF">T</span><span style="color: #FA980B">e</span style="color: #1700FA"><span style="color: #8500FB">t</span style="color: #F7FF1F"><span style="color: #F80009">r</span><span style="color: #27FF09">i</span><span style="color: #1700FA">s</span> -->
          Tetris
        </h1>
        <div class="game-console">
          <div class="rows">
            <div class="left-row">
              <div class="lost-game hidden">
                You Lost.
                <br>
                <br>
                Press R to Restart!
              </div>
              <canvas width="250" height="500" id="game-canvas">
              </canvas>
              <canvas id="background-canvas" width="250" height="500">
              </canvas>
            </div>

            <div class="right-row">
              <div class="score">
                <div class="ui-canvas">
                  <p class="next-piece">Next Piece</p>
                  <canvas id="next-piece-canvas" width="100" height="100"></canvas>
                  <canvas id="next-piece-background-canvas" width="100" height="100">
                  </canvas>
                  <div class="level-and-score">
                    <div class="score-text">
                      <p>Level:  </p>
                      <p class="score-exact">Score: </p>
                    </div>
                    <canvas id="score-level-canvas" width="25" height="80"></canvas>
                  </div>
                </div>
              </div>
              <div class="instructions">
                <p>Left/right<br>/down keys to move piece</p>
                <p>Up to rotate piece</p>
                <p>Enter to play</p>
                <p>P to pause/play</p>
                <p>R to restart</p>
                <p>M to mute/unmute</p>
              </div>
            </div>
          </div>
          <div class="my-information">
            <a href="http://www.isaacseessel.com">
              <p>By Isaac Seessel</p>
            </a>
            <div class="portfolio-links">
              <a href="https://github.com/iseessel">
                <i class="fa fa-github" aria-hidden="true"></i>Git
              </a>
              <a href="http://www.isaacseessel.com">
                <i class="fa fa-info-circle" aria-hidden="true"></i>Site
              </a>
            </div>
            <br>
          </div>
        </div>

    </div>
  </body>

  <link rel="stylesheet" href="./application.css">


</html>