repl.it
@smrsan761/

Tetris

HTML, CSS, JS

A Tetris (like) Game made using HTML, CSS, & JS

fork
loading
Files
  • index.html
  • scripts
  • soundFX
  • styles
  • config.js
  • LICENSE
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
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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Tetris Game - by smrsan76</title>

  <!--My StyleSheets-->
	<link rel="stylesheet" href="./styles/general.css" type="text/css" />
	<link rel="stylesheet" href="./styles/loading.css" type="text/css" />
	<link rel="stylesheet" href="./styles/options.css" type="text/css" />
	<link rel="stylesheet" href="./styles/others.css" type="text/css" />

  <!--Font Awesome CDN-->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <!--My Scripts-->
	<script src="./scripts/prototypes.js"></script>
	<script src="./scripts/helpers.js"></script>
	<script src="./config.js"></script>
	<script src="./scripts/globals.js"></script>
	<script src="./scripts/Loading.js"></script>
	<script src="./scripts/PromiseQueue.js"></script>
	<script src="./scripts/SoundFX.js"></script>
	<script src="./scripts/Pixel.js"></script>
	<script src="./scripts/Shape.js"></script>
  <script src="./scripts/Score.js"></script>
  <script src="./scripts/Life.js"></script>
  <script src="./scripts/Hold.js"></script>
  <script src="./scripts/Next.js"></script>
  <!--and finally-->
  <script src="./scripts/Game.js"></script>
</head>

<body>
  <!--Loading OverLayer-->
  <div id="game-loading-overlay">
    <div id="game-loading-box">
      <span id="game-loading-text">Loading</span>
      <div id="game-loading-progress">
        <div></div>
      </div>
    </div>
  </div>

  <!--Game Option Buttons-->
  <div id="game-option-btn-list">
    <button id="game-restart-btn" onClick="restartGame.call(this)">
      <i class="fa fa-undo"></i>
    </button><!--
 --><button id="game-toggle-sound-btn" onClick="toggleSoundFX.call(this)">
      <i class="fa fa-volume-up" ></i>
    </button><!--
 --><button id="game-toggle-pause-btn" onClick="togglePause.call(this)">
      <i class="fa fa-play" ></i>
    </button>
  </div>

  <!--Title-->
	<h1 id="game-title"><span style="color: #FFC107">T</span>etri<span style="color: #CDDC39">S</span></h1>

  <!--General Status-->
  <p id="game-status" >{ Press Enter to Start }</p>

  <!--Game Table-->
	<div id="game-table">
    <!--Points-->
    <div id="game-points-pane" >
      <span id="game-points-sign">$</span>
      <span id="game-points-num" >0</span>
      <br />
      <i id="game-lives-icon" class="fa fa-heart"></i>
      <span id="game-lives-num">0</span>
    </div>
    
    <!--Hold-piece-->
    <div id="game-hold-piece">
      <span><i id="game-hold-lock" class="fa fa-lock"></i> Hold</span>
      <div id="game-hold-table"></div>
    </div>
    
    <!--Next-->
    <div id="game-next">Next</div>
  </div>

  <!--Authors-->
  <div id="game-authors">
    Made/Written by SMRSAN -
    <a href="https://github.com/smrsan76" target="_blank" title="My GitHub Profile">
      @smrsan76
    </a>
    <!--
      <br/>
      If you developed this game, add your name/profile/link here
      and explain what you did. ;-)
    -->
  </div>

  <!--My Other Scripts-->
  <script src="./scripts/Table.js"></script>
  <script src="./scripts/GenStatus.js"></script>
	<script src="./scripts/index.js"></script>
</body>

</html>
result
console