├── .gitattributes
├── .gitignore
├── README.md
├── images
    ├── game_play.png
    ├── game_play_crop.png
    ├── original tetris images
    │   ├── tetro_i.jpg
    │   ├── tetro_j.jpg
    │   ├── tetro_l.jpg
    │   ├── tetro_o.jpg
    │   ├── tetro_s.jpg
    │   ├── tetro_t.jpg
    │   └── tetro_z.jpg
    ├── tetro_i.png
    ├── tetro_i1.png
    ├── tetro_j.png
    ├── tetro_j1.png
    ├── tetro_j2.png
    ├── tetro_j3.png
    ├── tetro_l.png
    ├── tetro_l1.png
    ├── tetro_l2.png
    ├── tetro_l3.png
    ├── tetro_o.png
    ├── tetro_s.png
    ├── tetro_s1.png
    ├── tetro_t.png
    ├── tetro_t1.png
    ├── tetro_t2.png
    ├── tetro_t3.png
    ├── tetro_z.png
    └── tetro_z1.png
├── index.html
├── js_tetris.css
└── js_tetris.js


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear on external disk
35 | .Spotlight-V100
36 | .Trashes
37 | 
38 | # Directories potentially created on remote AFP share
39 | .AppleDB
40 | .AppleDesktop
41 | Network Trash Folder
42 | Temporary Items
43 | .apdisk
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vanilla Javascript Tetris App!
 2 | 
 3 | <br>
 4 | 
 5 | _Classic Tetris game written entirely in pure Javascript, HTML and CSS_
 6 | 
 7 | <br>
 8 | 
 9 | Play it [here](https://andysterks.github.io/JS-Tetris)
10 | 
11 | <br>
12 | 
13 | <image src="images/game_play_crop.png">
14 | 
15 | ## Summary
16 | 
17 | Back in 2014 I was determined to become a programmer. After reading the Head First Javascript book, I wasn't sure what project to work on. I eventually landed on Tetris.
18 | 
19 | It took me more than a month to work through building out all the functionality that was needed. I learned A TON about problem solving and some of the different concepts I had learned in Javascript (such as working with classes). It was challenging at times but worth every minute. :-)
20 | 
21 | ## Author
22 | 
23 | -   **Andy Sterkowitz** - _Full-Stack Software Developer_ - [Website](https://andysterkowitz.com) | [LinkedIn](https://www.linkedin.com/in/andrewsterkowitz/)
24 | 


--------------------------------------------------------------------------------
/images/game_play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/game_play.png


--------------------------------------------------------------------------------
/images/game_play_crop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/game_play_crop.png


--------------------------------------------------------------------------------
/images/original tetris images/tetro_i.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/original tetris images/tetro_i.jpg


--------------------------------------------------------------------------------
/images/original tetris images/tetro_j.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/original tetris images/tetro_j.jpg


--------------------------------------------------------------------------------
/images/original tetris images/tetro_l.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/original tetris images/tetro_l.jpg


--------------------------------------------------------------------------------
/images/original tetris images/tetro_o.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/original tetris images/tetro_o.jpg


--------------------------------------------------------------------------------
/images/original tetris images/tetro_s.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/original tetris images/tetro_s.jpg


--------------------------------------------------------------------------------
/images/original tetris images/tetro_t.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/original tetris images/tetro_t.jpg


--------------------------------------------------------------------------------
/images/original tetris images/tetro_z.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/original tetris images/tetro_z.jpg


--------------------------------------------------------------------------------
/images/tetro_i.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_i.png


--------------------------------------------------------------------------------
/images/tetro_i1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_i1.png


--------------------------------------------------------------------------------
/images/tetro_j.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_j.png


--------------------------------------------------------------------------------
/images/tetro_j1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_j1.png


--------------------------------------------------------------------------------
/images/tetro_j2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_j2.png


--------------------------------------------------------------------------------
/images/tetro_j3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_j3.png


--------------------------------------------------------------------------------
/images/tetro_l.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_l.png


--------------------------------------------------------------------------------
/images/tetro_l1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_l1.png


--------------------------------------------------------------------------------
/images/tetro_l2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_l2.png


--------------------------------------------------------------------------------
/images/tetro_l3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_l3.png


--------------------------------------------------------------------------------
/images/tetro_o.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_o.png


--------------------------------------------------------------------------------
/images/tetro_s.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_s.png


--------------------------------------------------------------------------------
/images/tetro_s1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_s1.png


--------------------------------------------------------------------------------
/images/tetro_t.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_t.png


--------------------------------------------------------------------------------
/images/tetro_t1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_t1.png


--------------------------------------------------------------------------------
/images/tetro_t2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_t2.png


--------------------------------------------------------------------------------
/images/tetro_t3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_t3.png


--------------------------------------------------------------------------------
/images/tetro_z.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_z.png


--------------------------------------------------------------------------------
/images/tetro_z1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andysterks/JS-Tetris/6761f075a89dc9cd756e949adb632782a4a5fcba/images/tetro_z1.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     
 4 |     <head>
 5 |         <meta charset="utf-8">
 6 |         <title>JS Tetris by Andy</title>
 7 |         <link rel="stylesheet" type="text/css" href="js_tetris.css">
 8 |     </head>
 9 |     
10 |     <body onkeydown="storeKey(event)">
11 | 
12 |     <div id="screen">
13 |         <div id="game_box">
14 |             <div id="game_screen">
15 |                 <h2>JavaScript Tetris</h2>
16 |                     <canvas id="canvas"
17 |                             width="432"
18 |                             height="528"
19 |                             style="border:0px solid #000000;">
20 |                     </canvas>
21 |             </div>
22 |         </div>
23 |         
24 |         <div id="instructions">
25 |             <h2>Instructions</h2>
26 |             <ul>
27 |                 <li><b>UP ARROW</b> = Rotate Tetrominoe</li></br>
28 |                 <li><b>LEFT ARROW</b> = Tetrominoe Left</li></br>
29 |                 <li><b>RIGHT ARROW</b> = Tetrominoe Right</li></br>
30 |                 <li><b>DOWN ARROW</b> = Tetrominoe down one spot</li></br>
31 |                 <li><b>SPACE BAR</b> = Send Tetrominoe to the bottom</li></br>
32 |                 <li><b>P</b> = Pause/Resume game</li></br></br>
33 |                 <li><b><span id="score">SCORE: 0</span></b></li>
34 |             </ul>
35 |         </div>
36 |     </div>
37 |     
38 |     <script src="js_tetris.js"></script>
39 | 
40 |     </body>
41 |     
42 | </html>


--------------------------------------------------------------------------------
/js_tetris.css:
--------------------------------------------------------------------------------
 1 | #game_screen {
 2 |     width:          434px;
 3 |     margin:         0px 0px;
 4 |     padding:        0px;
 5 | }
 6 | 
 7 | #game_box {
 8 |     width: 436px;
 9 |     padding: 0px 0px;
10 |     margin: 0px 0px 0px auto;
11 |     float: left;
12 | }
13 | 
14 | h2 {
15 |     text-align:     center;
16 |     padding:        0px 0px 10px 0px;
17 |     margin:         0px;
18 | }
19 | 
20 | #instructions {
21 |     float: right;
22 |     width: 350px;
23 |     margin: 0px auto 0px 0px;
24 | }
25 | 
26 | #screen {
27 |     width: 900px;
28 |     margin: 0px auto;
29 | }
30 | 


--------------------------------------------------------------------------------
/js_tetris.js:
--------------------------------------------------------------------------------
  1 | const fps = 7.5;
  2 | const W = 432;
  3 | const H = 528;
  4 | const X = 0;
  5 | const Y = 0;
  6 | let ITER = 0;
  7 | let paused = false;
  8 | const canvas = document.getElementById("canvas");
  9 | const ctx = canvas.getContext("2d");
 10 | ctx.fillStyle="#000000";
 11 | ctx.fillRect(0,0,432,528);
 12 | let canvasData = ctx.getImageData(0,0,432,528);
 13 | ctx.putImageData(canvasData,0,0);
 14 | 
 15 | const gameStatus = {
 16 |     points: 0,
 17 |     fps: 7.5,
 18 |     boardW: 432,
 19 |     boardH: 528
 20 | }
 21 | 
 22 | const keyPresses = [ 0 ];
 23 | const storedFunctions = [ ];
 24 | 
 25 | const tetro = {
 26 |     position: {x: (W-48)/2,y:0},
 27 |     boundaryPoints: [ [ 18, 36, 54,{x:24,y:48},{x:48,y:48}], [ 48, 48, 48 ] ]
 28 | }
 29 | 
 30 | function Tetro(imgSrc, xBound1, yBound1, xBound2, yBound2, xBound3, yBound3) {
 31 |     this.image = new Image();
 32 |     this.image.src = imgSrc,
 33 |     this.boundaryPoints = [ xBound1, yBound1, xBound2, yBound2, xBound3, yBound3 ]  
 34 | }
 35 | 
 36 | const tetroO = new Tetro("images/tetro_o.png", 12, 48, 36, 48, 36, 48);
 37 | const tetroT = new Tetro("images/tetro_t.png", 12, 48, 36, 48, 60, 48);
 38 | const tetroT1 = new Tetro("images/tetro_t1.png", 12, 48, 36, 72, 36, 72);
 39 | const tetroT2 = new Tetro("images/tetro_t2.png", 12, 24, 36, 48, 60, 24);
 40 | const tetroT3 = new Tetro("images/tetro_t3.png", 12, 72, 36, 48, 36, 48);
 41 | const tetroI = new Tetro("images/tetro_i.png", 12, 96, 12, 96, 12, 96);
 42 | const tetroI1 = new Tetro("images/tetro_i1.png", 12, 24, 36, 24, 84, 24);
 43 | const tetroJ = new Tetro("images/tetro_j.png", 12, 48, 36, 48, 60, 48);
 44 | const tetroJ1 = new Tetro("images/tetro_j1.png", 12, 72, 36, 72, 12, 72);
 45 | const tetroJ2 = new Tetro("images/tetro_j2.png", 12, 24, 36, 24, 60, 48);
 46 | const tetroJ3 = new Tetro("images/tetro_j3.png", 12, 72, 36, 24, 36, 24);
 47 | const tetroL = new Tetro("images/tetro_l.png", 12, 48, 36, 48, 60, 48);
 48 | const tetroL1 = new Tetro("images/tetro_l1.png", 12, 24, 36, 72, 36, 72);
 49 | const tetroL2 = new Tetro("images/tetro_l2.png", 12, 48, 36, 24, 60, 24);
 50 | const tetroL3 = new Tetro("images/tetro_l3.png", 12, 72, 36, 72, 36, 72);
 51 | const tetroZ = new Tetro("images/tetro_z.png", 12, 24, 36, 48, 60, 48);
 52 | const tetroZ1 = new Tetro("images/tetro_z1.png", 12, 72, 36, 48, 36, 48);
 53 | const tetroS = new Tetro("images/tetro_s.png", 12, 48, 36, 48, 60, 24);
 54 | const tetroS1 = new Tetro("images/tetro_s1.png", 12, 48, 36, 72, 36, 72);
 55 | let currTetro = new Tetro("images/tetro_o.png", 12, 48, 36, 48, 36, 48)
 56 | 
 57 | const storedT = [ tetroO, tetroI, tetroJ, tetroL, tetroT, tetroZ, tetroS ];
 58 | 
 59 | function rotateTetro() {
 60 |     if (currTetro === tetroJ) {
 61 |         currTetro = tetroJ1;
 62 |     } else if (currTetro === tetroJ1) {
 63 |         currTetro = tetroJ2;
 64 |     } else if (currTetro === tetroJ2) {
 65 |         currTetro = tetroJ3;
 66 |     } else if (currTetro === tetroJ3) {
 67 |         currTetro = tetroJ;
 68 |     } else if (currTetro === tetroT) {
 69 |         currTetro = tetroT1;
 70 |     } else if (currTetro === tetroT1) {
 71 |         currTetro = tetroT2;
 72 |     } else if (currTetro === tetroT2) {
 73 |         currTetro = tetroT3;
 74 |     } else if (currTetro === tetroT3) {
 75 |         currTetro = tetroT;
 76 |     } else if (currTetro === tetroI) {
 77 |         currTetro = tetroI1;
 78 |     } else if (currTetro === tetroI1) {
 79 |         currTetro = tetroI;
 80 |     } else if (currTetro === tetroL) {
 81 |         currTetro = tetroL1;
 82 |     } else if (currTetro === tetroL1) {
 83 |         currTetro = tetroL2;
 84 |     } else if (currTetro === tetroL2) {
 85 |         currTetro = tetroL3;
 86 |     } else if (currTetro === tetroL3) {
 87 |         currTetro = tetroL;
 88 |     } else if (currTetro === tetroS) {
 89 |         currTetro = tetroS1;
 90 |     } else if (currTetro === tetroS1) {
 91 |         currTetro = tetroS;
 92 |     } else if (currTetro === tetroZ) {
 93 |         currTetro = tetroZ1;
 94 |     } else if (currTetro === tetroZ1) {
 95 |         currTetro = tetroZ;
 96 |     }
 97 | }
 98 | 
 99 | function drawCanvas() {
100 |     ctx.putImageData(canvasData,0,0);
101 | }
102 | 
103 | function copyCanvas() {
104 |     canvasData = ctx.getImageData(0,0,432,528);
105 | }
106 | 
107 | function drawTetro(tetro,xpos,ypos) {
108 |     ctx.drawImage(tetro,xpos,ypos);
109 | }
110 | 
111 | function detectCollision() {
112 |     getHitInfo();
113 |     if (tetro.position.y + currTetro.image.height === H || (currTetro.hit1.data[0] !== 0 || currTetro.hit2.data[1] !== 0 || currTetro.hit3.data[0] !== 0)) {
114 |         rowCheck();
115 |         resetTetro();
116 |         copyCanvas();
117 |         ITER++;
118 |     }
119 | }
120 | 
121 | function rowCheck() {
122 |     const imgDataArray = [ [],
123 |                          [],
124 |                          [],
125 |                          [],
126 |                          [],
127 |                          [],
128 |                          [] ];
129 |     const positionArray = [ 516, 492, 468, 444, 420, 396, 372 ];
130 |     for (let j=0; j<positionArray.length; j++) {
131 |         for (let x=12; x<420; x+=24) {
132 |             let imgData = ctx.getImageData(x,positionArray[j],1,1);
133 |             imgDataArray[j].push(imgData);
134 |         }
135 |     }
136 |     
137 |     for (let m=0; m<imgDataArray.length; m++) {
138 |         let rowChecked = checkRows(m,imgDataArray);
139 |         if (rowChecked === true) {
140 |             clearRow(m);
141 |         }
142 |     }
143 | }
144 |     
145 | function checkRows(row, imgDataArray) {
146 |     for (let i=0; i<imgDataArray[row].length; i++) {
147 |         if (imgDataArray[row][i].data[0] === 0 && imgDataArray[row][i].data[1] === 0 && imgDataArray[row][i].data[2] === 0) {
148 |             return false;
149 |         }
150 |     }
151 |     return true;
152 | }
153 | 
154 | function clearRow(row) {
155 |     const arrayRow = [ 504, 480, 456, 432, 408, 384, 360 ];
156 |     const savedCanvas = ctx.getImageData(0,0,W,arrayRow[row]);
157 |     ctx.putImageData(savedCanvas,0,24);
158 |     gameStatus.points+=100;
159 |     const score = document.getElementById("score");
160 |     score.innerHTML = "SCORE: " + gameStatus.points;
161 | }
162 | 
163 | function resetTetro(){
164 |     tetro.position.y = 0;
165 |     currTetro = randomizeTetro();
166 |     tetro.position.x = (W-48)/2;
167 | }
168 | 
169 | function randomizeTetro() {
170 |     //return storedT[1];
171 |     const randomTetro = Math.floor(Math.random()*7);
172 |     return storedT[randomTetro];
173 | }
174 | 
175 | function updateGameState() {
176 |     drawCanvas();
177 |     copyCanvas();
178 |     tetro.position.y+=12;
179 |     moveX();
180 |     drawTetro(currTetro.image,tetro.position.x,tetro.position.y);
181 |     detectCollision();
182 | }
183 | 
184 | function getHitInfo() {
185 |     currTetro.hit1 = ctx.getImageData(tetro.position.x+currTetro.boundaryPoints[0],tetro.position.y+currTetro.boundaryPoints[1]+1,1,1);
186 |     currTetro.hit2 = ctx.getImageData(tetro.position.x+currTetro.boundaryPoints[2],tetro.position.y+currTetro.boundaryPoints[3]+1,1,1);
187 |     currTetro.hit3 = ctx.getImageData(tetro.position.x+currTetro.boundaryPoints[4],tetro.position.y+currTetro.boundaryPoints[5]+1,1,1)   
188 | }
189 | 
190 | function moveX(eraseArray) {
191 |     tetro.position.x+=keyPresses[0];
192 |     tetro.position.x = Math.max(0, Math.min(tetro.position.x, (W - currTetro.image.width)));
193 |     keyPresses.unshift(0);
194 | }
195 | 
196 | function dropDownTetro() {
197 |     while (tetro.position.y != 0) {
198 |         tetro.position.y+=12;
199 |         getHitInfo();
200 |         if (tetro.position.y + currTetro.image.height === H || (currTetro.hit1.data[0] !== 0 || currTetro.hit2.data[1] !== 0 || currTetro.hit3.data[0] !== 0)) {
201 |             drawCanvas();
202 |             drawTetro(currTetro.image,tetro.position.x,tetro.position.y);
203 |             rowCheck();
204 |             copyCanvas();
205 |             resetTetro();
206 |             ITER++;
207 |         }
208 |     }
209 | }
210 | 
211 | function storeKey(ev) {
212 |     const arrows = ((ev.which))||((ev.keyCode));
213 | 
214 |     switch(arrows){
215 |         case 32:
216 |             if (!paused) {
217 |                 dropDownTetro();                
218 |             }  
219 |             break;   
220 | 
221 |         case 37:
222 |             if (!paused) {
223 |                 keyPresses.unshift(-24);
224 |             }            
225 |             break;
226 | 
227 |         case 38:
228 |             if (!paused) {
229 |                 rotateTetro();
230 |             }
231 |             break;
232 | 
233 |         case 39:
234 |             if (!paused) {
235 |                 keyPresses.unshift(24);
236 |             }
237 |             break;
238 |             
239 |         case 40:
240 |             if (!paused) {
241 |                 tetro.position.y+=12;
242 |             }
243 |             break;
244 | 
245 |         case 80:
246 |             if (paused){
247 |                 paused = false;
248 |                 game = setInterval(updateGameState, 1000 / fps); 
249 |             } else {
250 |                 paused = true;
251 |                 clearInterval(game);
252 |             }
253 |             break;
254 |     }
255 | }
256 | 
257 | let game = setInterval(updateGameState, 1000 / fps);    
258 | 


--------------------------------------------------------------------------------