├── .DS_Store ├── Code At the End of Video ├── index.html ├── script.js └── style.css ├── Misc ├── .DS_Store ├── bkimage.png ├── bkimage2.png ├── bkimage3.jpg ├── wiredfram.drawio └── wireframe.png ├── ReadMe.md ├── Sample Tetris Designs ├── .DS_Store ├── Screen Shot 2023-07-19 at 10.44.26 AM.png ├── Screen Shot 2023-07-19 at 10.44.37 AM.png ├── Screen Shot 2023-07-19 at 10.45.09 AM.png ├── Screen Shot 2023-07-19 at 10.45.36 AM.png ├── Screen Shot 2023-07-19 at 10.46.39 AM.png ├── Screen Shot 2023-07-19 at 10.47.19 AM.png └── Screen Shot 2023-07-19 at 10.48.29 AM.png ├── bkimage4.jpg ├── buttonMusic.png ├── buttonPower.png ├── buttonRestart.png ├── help.css ├── help.html ├── index.html ├── index1.html ├── index2.html ├── musicCyberPunk.mp3 ├── musicMatrix.mp3 ├── musicTrap.mp3 ├── script.js ├── script1.js ├── script2.js ├── smallDownload.png ├── smallInstagram.png ├── smallMeta.png ├── smallTwitch.png ├── smallTwitter.png ├── style.css ├── style1.css ├── style2.css ├── tetrisLogo.png ├── tetrisLogoBig.png └── wiredfram.drawio /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/.DS_Store -------------------------------------------------------------------------------- /Code At the End of Video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tetris Project 9 | 10 | 11 |
12 |
13 |

TETRIS

14 |
15 |
16 |
17 |
18 |
19 |

Next Piece Display

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 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 | 254 |
255 |
256 | 257 |
258 |
259 | 260 |
261 |
262 |
263 |
264 |

Total Scores

265 |
266 |
267 |
268 |

Player 1:0

269 |

Player 2:

270 |
271 |
272 |
273 |

Rounds Won

274 |
275 |
276 |
277 |

Player 1:

278 |

Player 2:

279 |
280 |
281 |
282 |

Legend

283 |
284 |
285 |
Up Arrow: Changes Block Position 286 |

287 | Down Arrow: Speeds Up Drop 288 |

289 | Left Arrow: Moves Block to the left 290 |

291 | Right Arrow: Moves Block to the right 292 |
293 |
294 |
295 | 296 | 318 | 320 | 333 | 334 |
335 | 336 | -------------------------------------------------------------------------------- /Code At the End of Video/script.js: -------------------------------------------------------------------------------- 1 | //! goto week1 hw4 index.html for this html's spacing, as 2 | 3 | // at game start, user can pick if they want to play alone of in 2 player mode 4 | // user(s) will then be prompted to enter theie names which will be stored throughout the duration of the game 5 | // and then instructions will be given as to how the blocks can be manipulated 6 | // then the user will be prompted to press the start key 7 | 8 | // Need to build out an object 9 | // the object must fall at a steady speed 10 | // the object needs to have a specific set of capabilities: 11 | // ========== on press of down key, the object should speed up fall rate * 2 12 | // ========== on press of up key, the object position will change 13 | // ========== on press of right arrow, the object should move one space to the right 14 | // ========== on press of left arrow, the object should move one space to the left 15 | 16 | // the object needs to start right outside of the falling block box 17 | // the object then falls until it finally hits the bottom of the falling block box OR 18 | // until any side of the object hits another object 19 | // once the object finally touches another block, the activated object becomes dead 20 | // then the next piece begins to fall 21 | 22 | // the objective is to fill an entire row with all boxes 23 | // when a row is filled completely, that row will disappear and all above blocks will drop down 24 | // when multiple rows are filled completely, the rows will disappear and all above blocks will drop down 25 | 26 | // at start the first block will begin dropping 27 | // the next block will immediately be displayed in the "Next Piece Display Area" 28 | // once the active piece has touched the bottom of the "block falling area" that piece will no longer be active 29 | // then the next piece will begin dropping and this will repeat until a player loses 30 | // a player loses when there is no more space for a block to go 31 | 32 | // there will be 10 levels in total 33 | // each level will become increasingly harder by the blocks falling faster and faster 34 | // each level will have a total of 100 blocks (this number may be changed, based on gameplay enjoyment) 35 | 36 | document.addEventListener('DOMContentLoaded', () => { // this fires as soon as the HTML page is loaded so that you dont have to wait for everything (stylesheets, images, etc) to load 37 | 38 | const grid = document.querySelector('.fallingBlockGrid') 39 | let squares = Array.from(document.querySelectorAll('.fallingBlockGrid div')) // creates an array directly from this div 40 | const ScoreDisplay = document.querySelector('#score') 41 | const StartBtn = document.querySelector('start-button') 42 | const width = 10 // tells the width of the falling Brick window, this will be used for the shape arrays 43 | 44 | 45 | // the below declares all of the shapes and their variations by calling their corresponding cells within the falling brick window 46 | const bed = [ 47 | [1, width+1, width*2+1, 2], 48 | [width, width+1, width+2, width*2+2], 49 | [1, width+1, width*2+1, width*2], 50 | [width, width*2, width*2+1, width*2+2] 51 | ] 52 | 53 | const box = [ 54 | [0, 1, width, width+1], 55 | [0, 1, width, width+1], 56 | [0, 1, width, width+1], 57 | [0, 1, width, width+1] 58 | ] 59 | 60 | const zee = [ 61 | [0, 1, width+1, width+2], 62 | [1, width, width+1, width*2], 63 | [0, 1, width+1, width+2], 64 | [1, width, width+1, width*2] 65 | ] 66 | 67 | const ess = [ 68 | [1, 2, width, width+1], 69 | [0, width, width+1, width*2+1], 70 | [1, 2, width, width+1], 71 | [0, width, width+1, width*2+1] 72 | ] 73 | const midFinger = [ 74 | [1, width, width+1, width+2], 75 | [1, width+1, width+2, width*2+1], 76 | [0, 1, 2, width+1], 77 | [1, width, width+1, width*2+1] 78 | ] 79 | const seven = [ 80 | [0, 1, width +1, width*2+1], 81 | [width,width+1, width+2, 2], 82 | [1, width+1, width*2+1, width*2+2], 83 | [width, width+1, width+2, width*2] 84 | ] 85 | const flat = [ 86 | [1, width+1, width*2+1, width*3+1], 87 | [width, width+1, width+2, width+3], 88 | [1, width+1, width*2+1, width*3+1], 89 | [width, width+1, width+2, width+3] 90 | ] 91 | 92 | const blocks = [bed, box, zee, ess, midFinger, seven, flat] 93 | 94 | 95 | let random = Math.floor(Math.random()*blocks.length) // selects a block randomly 96 | 97 | let currentPosition = 4 // sets the starting position in the block box 98 | let currentRotation = 0 99 | 100 | let currentBlock = blocks[random][currentRotation]; // calls the first item of a random block from the array of blocks 101 | 102 | // draw the first rotation in the first block 103 | function draw() { 104 | currentBlock.forEach(index => { // using this to add the code to each index of the current array 105 | squares[currentPosition + index].classList.add('blocks') 106 | }) 107 | } 108 | 109 | // draw() 110 | 111 | // undraws the block 112 | function unDraw() { 113 | currentBlock.forEach(index => { 114 | squares[currentPosition + index].classList.remove('blocks') 115 | }) 116 | } 117 | 118 | // make the blocks move down every second 119 | timerId = setInterval(moveDown, 800) 120 | 121 | // assign functions to keycodes 122 | function control(e) { // the e key is becuase the function is waiting for an event to invoke the function 123 | if(e.keyCode === 37) { // 37 is the keycode for arrow left 124 | moveLeft() 125 | } else if (e.keyCode === 38) { // 38 is the up arrow, and will rotate the block 126 | rotate() 127 | } else if (e.keyCode === 39) { // 39 is the right arrow and will move the block right 128 | moveRight() 129 | } else if (e.keyCode === 40) { // 40 is the down arrow and will move the block down 130 | moveDown() 131 | } 132 | } 133 | document.addEventListener('keydown', control) // send the function of contol to the browser when the key goes down 134 | 135 | // move down fucntion 136 | function moveDown() { 137 | unDraw() 138 | currentPosition += width 139 | draw() 140 | freeze() 141 | } 142 | 143 | // write a freeze function 144 | function freeze() { 145 | if(currentBlock.some(index => squares[currentPosition + index + width].classList.contains('taken'))) { 146 | currentBlock.forEach(index => squares[currentPosition + index].classList.add('taken')) 147 | //start a new falling block 148 | random = Math.floor(Math.random() * blocks.length) 149 | currentBlock = blocks[random][currentRotation] 150 | currentPosition = 4 151 | draw() 152 | } 153 | } 154 | 155 | // move the blocks left, unless it is at the edge or there is a blockage 156 | function moveLeft() { 157 | unDraw() // this undraws any trace of the block so it is gone 158 | // if some of our block is touching the left then its true. curren block + its index (0) / 10 (size of grid) should equal zero 159 | const isAtLeftEdge = currentBlock.some(index => (currentPosition + index) % width === 0) 160 | 161 | if(!isAtLeftEdge) currentPosition -=1 // we want the box to stop if there is another block there 162 | 163 | // we want our block to stop if theres already another block there and we want to do this for every index in the block so we use the arrow 164 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 165 | currentPosition +=1 166 | } 167 | draw() 168 | } 169 | 170 | // move the block right, unless it is at the edge or there is a blockage 171 | function moveRight() { 172 | unDraw() 173 | const isAtRightEdge = currentBlock.some(index => (currentPosition + index) % width === width -1) 174 | 175 | if(!isAtRightEdge) currentPosition +=1 176 | 177 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 178 | currentPosition -=1 179 | } 180 | } 181 | 182 | // rotate the block 183 | function rotate() { 184 | unDraw() 185 | currentRotation++ 186 | if(currentRotation === currentBlock.length) { //if the current rotation gets to 4, make it go back to 0 187 | currentRotation = 0 // if current rotation is false 188 | } 189 | currentBlock = blocks[random][currentRotation] 190 | draw() 191 | } 192 | 193 | 194 | 195 | 196 | 197 | 198 | }); -------------------------------------------------------------------------------- /Code At the End of Video/style.css: -------------------------------------------------------------------------------- 1 | /* Box Model Hack */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* Clear fix hack */ 7 | .clearfix:after { 8 | content: "."; 9 | display: block; 10 | clear: both; 11 | visibility: hidden; 12 | line-height: 0; 13 | height: 0; 14 | } 15 | 16 | .clear { 17 | clear: both; 18 | } 19 | 20 | /****************************************** 21 | /* BASE STYLES 22 | /*******************************************/ 23 | 24 | html { 25 | /* height: 800px; */ 26 | } 27 | 28 | main { 29 | align-content: start; 30 | display: flex; 31 | } 32 | 33 | body { 34 | background-color: #164B60; 35 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 36 | } 37 | 38 | header { 39 | background-color: #164B60; 40 | /* float: left; */ 41 | width: 100%; 42 | height: 50px; 43 | margin-bottom: 10%; 44 | padding: 0%; 45 | border: none; 46 | list-style: none; 47 | clear: both; 48 | display: flex; 49 | justify-content: center; 50 | } 51 | 52 | header > div { 53 | background-color: #4FC0D0; 54 | border: 1px solid #A2FF86; 55 | /* text-align: center; */ 56 | position: relative; 57 | height: 50px; 58 | width: 200px; 59 | /* margin: 10%; */ 60 | } 61 | 62 | /* main section div { 63 | background-color: #4FC0D0; 64 | } */ 65 | 66 | #bigTitleBox { 67 | background-color: #4FC0D0; 68 | width: 302px; 69 | height: 80px; 70 | border: 1px solid #A2FF86; 71 | padding-top: 20px; 72 | text-align: center; 73 | float: left; 74 | display: flex; 75 | justify-content: center; 76 | } 77 | 78 | 79 | 80 | .fallingBlockGrid{ 81 | /* background-color: #4FC0D0; */ 82 | width: 302px; 83 | height: 602px; 84 | border: 1px solid #A2FF86; 85 | background-color: yellow; 86 | display: flex; /*these two wrap the divs so they fit into their parent */ 87 | flex-wrap: wrap; 88 | /* padding-top: 20px; 89 | text-align: center; 90 | float: left; 91 | display: flex; 92 | justify-content: center; */ 93 | } 94 | 95 | .fallingBlockGrid > div { 96 | height: 30px; 97 | width: 30px; 98 | } 99 | 100 | .blocks { 101 | background-color: red; 102 | } 103 | 104 | .mini-grid { 105 | width: 120px; 106 | height: 120px; 107 | display: flex; 108 | flex-wrap: wrap; 109 | background-color: yellow; 110 | } 111 | 112 | .mini-grid div { 113 | height: 30px; 114 | width: 30px; 115 | } 116 | 117 | /* 118 | .box { 119 | background-color: blue; 120 | } 121 | 122 | .zee { 123 | background-color: green; 124 | } 125 | 126 | .ess { 127 | background-color: orange; 128 | } 129 | 130 | .midFinger { 131 | background-color: purple; 132 | } 133 | 134 | .seven { 135 | background-color: pink; 136 | } 137 | 138 | .flat { 139 | background-color: grey; 140 | } */ 141 | 142 | #titleBoxes { 143 | background-color: #4FC0D0; 144 | width: 160px; 145 | height: 40px; 146 | border: 1px solid #A2FF86; 147 | text-align: center; 148 | float: left; 149 | display: flex; 150 | justify-content: center; 151 | } 152 | 153 | /* #titleBoxes h3 { 154 | vertical-align: middle; 155 | } */ 156 | 157 | #lowerBoxes { 158 | width: 160px; 159 | height: 80px; 160 | border: 1px solid #A2FF86; 161 | float: left; 162 | display: flex; 163 | justify-content: center; 164 | } 165 | 166 | #extraBox { 167 | width: 160px; 168 | height: 200px; 169 | border: 1px solid #A2FF86; 170 | float: left; 171 | display: flex; 172 | justify-content: center; 173 | } 174 | 175 | section { 176 | padding: 40px; 177 | } 178 | 179 | -------------------------------------------------------------------------------- /Misc/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Misc/.DS_Store -------------------------------------------------------------------------------- /Misc/bkimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Misc/bkimage.png -------------------------------------------------------------------------------- /Misc/bkimage2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Misc/bkimage2.png -------------------------------------------------------------------------------- /Misc/bkimage3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Misc/bkimage3.jpg -------------------------------------------------------------------------------- /Misc/wiredfram.drawio: -------------------------------------------------------------------------------- 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 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /Misc/wireframe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Misc/wireframe.png -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 | 2 |

Tetris Game

3 | 4 | Game build Using The DOM 5 | 6 | live github project link: https://notesmane.github.io/Tetris-Project/ 7 | 8 | ## Features 9 | 1. Players endeavors to beat the computers randomly generated score by creating lines out of eye popping tetrenimo shapes 10 | 2. Win/Lose state against the computer (2 play mode coming soon!) 11 | 3. Amazing music to play the game to 12 | 4. Spectacular cyberpunk theme and color scheme 13 | 14 | ## Tech Stack 15 | 1. HTML 16 | 2. CSS 17 | 3. JavaScript 18 | 4. Visual Studio Code 19 | 5. Google Sheets 20 | 21 | ## Resources 22 | 23 | - Youtube - https://www.youtube.com/watch?v=rAUn1Lom6dw 24 | - MDN 25 | - Markdown Cheatsheet - https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet 26 | - https://app.diagrams.net/ (for wire framing) 27 | - w3schools.com for css info 28 | - google sheets for tetremino layout 29 | - google for css and javasctipt help searches 30 | - freepik.com for background photo and eventual colorscheme 31 | - chosic.com for free use mp3 downloads for possible game music 32 | 33 | -------------------------------------------------------------------------------- /Sample Tetris Designs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/.DS_Store -------------------------------------------------------------------------------- /Sample Tetris Designs/Screen Shot 2023-07-19 at 10.44.26 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/Screen Shot 2023-07-19 at 10.44.26 AM.png -------------------------------------------------------------------------------- /Sample Tetris Designs/Screen Shot 2023-07-19 at 10.44.37 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/Screen Shot 2023-07-19 at 10.44.37 AM.png -------------------------------------------------------------------------------- /Sample Tetris Designs/Screen Shot 2023-07-19 at 10.45.09 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/Screen Shot 2023-07-19 at 10.45.09 AM.png -------------------------------------------------------------------------------- /Sample Tetris Designs/Screen Shot 2023-07-19 at 10.45.36 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/Screen Shot 2023-07-19 at 10.45.36 AM.png -------------------------------------------------------------------------------- /Sample Tetris Designs/Screen Shot 2023-07-19 at 10.46.39 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/Screen Shot 2023-07-19 at 10.46.39 AM.png -------------------------------------------------------------------------------- /Sample Tetris Designs/Screen Shot 2023-07-19 at 10.47.19 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/Screen Shot 2023-07-19 at 10.47.19 AM.png -------------------------------------------------------------------------------- /Sample Tetris Designs/Screen Shot 2023-07-19 at 10.48.29 AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/Sample Tetris Designs/Screen Shot 2023-07-19 at 10.48.29 AM.png -------------------------------------------------------------------------------- /bkimage4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/bkimage4.jpg -------------------------------------------------------------------------------- /buttonMusic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/buttonMusic.png -------------------------------------------------------------------------------- /buttonPower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/buttonPower.png -------------------------------------------------------------------------------- /buttonRestart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/buttonRestart.png -------------------------------------------------------------------------------- /help.css: -------------------------------------------------------------------------------- 1 | /* Box Model Hack */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* Clear fix hack */ 7 | .clearfix:after { 8 | content: "."; 9 | display: block; 10 | clear: both; 11 | visibility: hidden; 12 | line-height: 0; 13 | height: 0; 14 | } 15 | 16 | .clear { 17 | clear: both; 18 | } 19 | 20 | /****************************************** 21 | /* BASE STYLES 22 | /*******************************************/ 23 | 24 | html { 25 | /* height: 700px; */ 26 | background-image: url('bkimage4.jpg'); 27 | background-size: cover; 28 | background-position: center center; 29 | color: white; 30 | } 31 | 32 | main { 33 | display: flex; 34 | justify-content: center; 35 | height: 550px; 36 | } 37 | 38 | body { 39 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 40 | /* 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */ 41 | } 42 | 43 | a:link { 44 | color: white; 45 | } 46 | 47 | a:visited { 48 | color: white; 49 | } 50 | 51 | a:hover { 52 | color: white; 53 | } 54 | 55 | a:active{ 56 | color: white; 57 | } 58 | 59 | /* =========================================== HEADER CONTENT */ 60 | 61 | header { 62 | width: 100%; 63 | /* height: 50px; */ 64 | /* margin-bottom: 40px; 65 | padding: 5px; */ 66 | border: none; 67 | list-style: none; 68 | /* clear: both; */ 69 | display: flex; 70 | justify-content: center; 71 | } 72 | 73 | header div { 74 | width: 508px; 75 | margin: 20px 0px 30px 0px; 76 | flex: left; 77 | display: flex; 78 | justify-content: space-between; 79 | } 80 | 81 | #titleDiv { 82 | padding: 10px 0px, 10px, 0px; 83 | margin: 0px, 20px, 0px, 20px; 84 | background-color: rgb(4, 0, 44); 85 | border: 2px ridge rgb(184,69, 178); 86 | border-radius: 10px; 87 | /* position: relative; */ 88 | height: 50px; 89 | width: 150px; 90 | float: left; 91 | display: flex; 92 | justify-content: center; 93 | } 94 | 95 | #pageSelector { 96 | padding: 0px 0px 40px 0px; 97 | background-color: rgb(135, 193, 227); 98 | border: 2px ridge rgb(184,69, 178); 99 | border-radius: 10px; 100 | /* position: relative; */ 101 | height: 20px; 102 | width: 80px; 103 | float: left; 104 | display: flex; 105 | justify-content: center; 106 | } 107 | 108 | /* ============================================ BEGINNING OF MAIN CONTENT */ 109 | 110 | #buttons { 111 | width: 184; 112 | } 113 | /* 114 | #bigTitleBox { 115 | background-color: rgb(4, 0, 44); 116 | width: 184px; 117 | height: 80px; 118 | border: 2px ridge rgb(184,69, 178); 119 | padding-top: 20px; 120 | text-align: center; 121 | float: left; 122 | display: flex; 123 | justify-content: center; 124 | }*/ 125 | 126 | .fallingBlockGrid{ 127 | background-color: rgb(4, 0, 44);/*#0F3442;*/ 128 | width: 308px; 129 | height: 608px; 130 | border: 2px ridge rgb(184,69, 178); 131 | /* background-color: yellow; */ 132 | display: flex; /*these two wrap the divs so they fit into their parent */ 133 | flex-wrap: wrap; 134 | /* margin: 0px 0px, 50px, 0px; */ 135 | } 136 | 137 | .fallingBlockGrid > div { 138 | height: 30px; 139 | width: 30px; 140 | /* border: .5px solid #144457; */ 141 | } 142 | 143 | .tetros { 144 | background-color: red; 145 | border: 2px solid rgb(155,190, 220); 146 | border-style: inset; 147 | /* -moz-box-shadow: 2px 2px 8px 2px rgba(165,165,165,1); */ 148 | border-radius: 3px; 149 | } 150 | 151 | .taken { 152 | border: 0px; 153 | /* background-color: red; */ 154 | } 155 | 156 | /* #nextHeader { 157 | background-color: rgb(4, 0, 44); 158 | width: 184px; 159 | height: 44px; 160 | border: 2px ridge rgb(184,69, 178); 161 | border-style: groove; 162 | text-align: center; 163 | float: left; 164 | display: flex; 165 | justify-content: center; 166 | border-radius: 5px 5px 0px 0px; 167 | } */ 168 | 169 | #nextBox { 170 | padding: 0px; 171 | } 172 | 173 | .next-block { /*aka mini-grid */ 174 | width: 184px; 175 | height: 184px; 176 | flex-wrap: wrap; 177 | display: flex; 178 | border: 2px ridge rgb(184,69, 178); 179 | background-color: rgb(4, 0, 44); 180 | } 181 | 182 | .next-block div { 183 | height: 30px; 184 | width: 30px; 185 | /* border: 2px ridge rgb(184,69, 178); */ 186 | } 187 | 188 | #contolsTitleBox { 189 | background-color: rgba(4, 0, 44, .8); 190 | width: 150px; 191 | height: 40px; 192 | border: 4px ridge rgb(184,69, 178); 193 | /* text-align: center; */ 194 | float: left; 195 | display: flex; 196 | justify-content: left; 197 | border-radius: 5px 5px 0px 0px; 198 | margin-bottom: 0px; 199 | padding: 10px 10px 10px 7px; 200 | /* padding: 0px 0px 70px 0px; */ 201 | } 202 | 203 | #controlsLowerBox { 204 | background-color: rgba(4, 0, 44, .7); 205 | width: 440px; 206 | height: 320px; 207 | border: 4px ridge rgb(184,69, 178); 208 | float: left; 209 | display: flex; 210 | justify-content: left; 211 | } 212 | 213 | #rulesTitleBox { 214 | background-color: rgba(4, 0, 44, .8); 215 | width: 189px; 216 | height: 40px; 217 | border: 4px ridge rgb(184,69, 178); 218 | /* text-align: center; */ 219 | float: left; 220 | display: flex; 221 | justify-content: left; 222 | border-radius: 5px 5px 0px 0px; 223 | margin-bottom: 0px; 224 | padding: 10px 10px 10px 7px; 225 | /* padding: 0px 0px 70px 0px; */ 226 | } 227 | 228 | #rulesLowerBox { 229 | background-color: rgba(4, 0, 44, .7); 230 | width: 374px; 231 | height: 138px; 232 | border: 4px ridge rgb(184,69, 178); 233 | float: left; 234 | display: flex; 235 | justify-content: center; 236 | } 237 | 238 | #singleTitleBox { 239 | background-color: rgba(4, 0, 44, .8); 240 | width: 244px; 241 | height: 40px; 242 | border: 4px ridge rgb(184,69, 178); 243 | /* text-align: center; */ 244 | float: left; 245 | display: flex; 246 | justify-content: left; 247 | border-radius: 5px 5px 0px 0px; 248 | margin-bottom: 0px; 249 | padding: 10px 10px 10px 7px; 250 | /* padding: 0px 0px 70px 0px; */ 251 | } 252 | 253 | #singleLowerBox { 254 | background-color: rgba(4, 0, 44, .7); 255 | width: 383px; 256 | height: 125px; 257 | border: 4px ridge rgb(184,69, 178); 258 | float: left; 259 | display: flex; 260 | justify-content: center; 261 | } 262 | 263 | section { 264 | margin: 20px; 265 | } 266 | 267 | footer { 268 | padding: 30px; 269 | } 270 | 271 | footer div { 272 | font-size: 11px; 273 | display: flex; 274 | justify-content: center; 275 | color: rgb(114, 71, 108); 276 | } 277 | 278 | #copyrights { 279 | margin-bottom: 20px; 280 | } 281 | 282 | a:link { 283 | color: white; 284 | text-shadow: white 1px 0 5px; 285 | text-decoration: none; 286 | } 287 | 288 | a, a:link, a:visited { 289 | color: rgb(114, 39, 82); 290 | text-decoration: none; 291 | } 292 | 293 | a:hover { 294 | color: white; 295 | text-shadow: white 1px 0 5px; 296 | text-decoration: none; 297 | } 298 | 299 | a:active { 300 | color: white; 301 | text-decoration: none; 302 | } 303 | 304 | .webLinks { 305 | background-color: rgb(43, 38, 101); 306 | margin: 20px 20px 10px 20px; 307 | width: 70px; 308 | display: flex; 309 | justify-content: center; 310 | border: 2px ridge rgb(43, 38, 101); 311 | } 312 | -------------------------------------------------------------------------------- /help.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tetris Project - Help 8 | 9 | 10 |
11 |
12 | 13 |

HOME

14 | 16 | Tetris Logo 17 | 19 |

HELP

20 | 21 |
22 |
23 |
24 |
25 |
26 |

CONTROLS

27 |
28 |
29 |
    30 |
  • To start and pause the game, press the start/pause button.
    • 31 |
  • To start and pause the music, press the sound button.
    • 32 |
  • To restart the game, press the restart button.
    • 33 |
  • To restart the game, press the restart button.
    • 34 |
  • To rotate the block, press the up arrow ke.y
    • 35 |
  • To move the block left, press/hold the left arrow key.
    • 36 |
  • To move the block right, press/hold the right arrow key.
    • 37 |
  • To speed-up the blocks downward movement, press/hold the down arrow key.
    • 38 | 39 |
40 |
41 |
42 |
43 |
44 |

SCORING RULES

45 |
46 |
47 |
    48 |
  • Every time a full line across has been completed, player will be awarded 10 points.
    • 49 |
  • Every 20 points will push the player to the next level. The block-falling speed will increase.
    • 50 |
51 |
52 |
53 |

CREDITS

54 |
55 |
56 |
    57 |
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
    • 58 |
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
    • 59 |
60 |
61 |
62 | 63 | 64 | 65 |
66 | 101 | 102 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tetris Project 9 | 10 | 11 |
12 |
13 | Tetris Logo 14 |
15 | 18 |
19 |
20 |
21 |

START GAME

22 |
23 | 26 |
27 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tetris Project - Single Player 9 | 10 | 11 |
12 |
13 | 14 |

HOME

15 | 17 | Tetris Logo 18 | 20 |

HELP

21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 | 31 |
32 |
33 | 36 |
37 |
38 | 42 |
43 |
44 |
45 |

LEVEL

46 |
47 |
48 |

1

49 |
50 |
51 |
52 |

SCORE

53 |
54 |
55 |

0

56 |
57 |
58 |
59 |
60 |

COMP SCORE

61 |
62 |
63 |

0

64 |
65 |
66 |
67 | 69 |
70 | 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 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 | 303 |
304 |
305 |
306 |
307 |
308 |

NEXT

309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |

LINES

351 |
352 |
353 |

0

354 |
355 |
356 |
357 |
358 |
359 | 360 | 382 | 384 | 397 | 398 |
399 | 434 | 435 | 436 | 437 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tetris Project - Single Player 9 | 10 | 11 |
12 |
13 | 14 |

HOME

15 | 17 | Tetris Logo 18 | 20 |

HELP

21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 | 31 |
32 |
33 | 36 |
37 |
38 | 42 |
43 |
44 |
45 |

LEVEL

46 |
47 |
48 |

1

49 |
50 |
51 |
52 |

PLAYER 1

53 |
54 |
55 |

0

56 |
57 |
58 |
59 |
60 |

PLAYER 2

61 |
62 |
63 |

0

64 |
65 |
66 |
67 | 69 |
70 | 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 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 | 303 |
304 |
305 |
306 |
307 |
308 |

NEXT

309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |

LINES

351 |
352 |
353 |

0

354 |
355 |
356 |
357 |
358 |
359 | 360 | 382 | 384 | 397 | 398 |
399 | 434 | 435 | 436 | 437 | -------------------------------------------------------------------------------- /musicCyberPunk.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/musicCyberPunk.mp3 -------------------------------------------------------------------------------- /musicMatrix.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/musicMatrix.mp3 -------------------------------------------------------------------------------- /musicTrap.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/musicTrap.mp3 -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | //! goto week1 hw4 index.html for this html's spacing, as 2 | 3 | // at game start, user can pick if they want to play alone of in 2 player mode 4 | // user(s) will then be prompted to enter theie names which will be stored throughout the duration of the game 5 | // and then instructions will be given as to how the blocks can be manipulated 6 | // then the user will be prompted to press the start key 7 | 8 | // Need to build out an object 9 | // the object must fall at a steady speed 10 | // the object needs to have a specific set of capabilities: 11 | // ========== on press of down key, the object should speed up fall rate * 2 12 | // ========== on press of up key, the object position will change 13 | // ========== on press of right arrow, the object should move one space to the right 14 | // ========== on press of left arrow, the object should move one space to the left 15 | 16 | // the object needs to start right outside of the falling block box 17 | // the object then falls until it finally hits the bottom of the falling block box OR 18 | // until any side of the object hits another object 19 | // once the object finally touches another block, the activated object becomes dead 20 | // then the next piece begins to fall 21 | 22 | // the objective is to fill an entire row with all boxes 23 | // when a row is filled completely, that row will disappear and all above blocks will drop down 24 | // when multiple rows are filled completely, the rows will disappear and all above blocks will drop down 25 | 26 | // at start the first block will begin dropping 27 | // the next block will immediately be displayed in the "Next Piece Display Area" 28 | // once the active piece has touched the bottom of the "block falling area" that piece will no longer be active 29 | // then the next piece will begin dropping and this will repeat until a player loses 30 | // a player loses when there is no more space for a block to go 31 | 32 | // there will be 10 levels in total 33 | // each level will become increasingly harder by the blocks falling faster and faster 34 | // each level will have a total of 100 blocks (this number may be changed, based on gameplay enjoyment) 35 | 36 | document.addEventListener('DOMContentLoaded', () => { // this fires as soon as the HTML page is loaded so that you dont have to wait for everything (stylesheets, images, etc) to load 37 | 38 | const grid = document.querySelector('.fallingBlockGrid') 39 | let squares = Array.from(document.querySelectorAll('.fallingBlockGrid div')) // creates an array directly from this div 40 | const scoreDisplay = document.querySelector('#score') 41 | const startBtn = document.querySelector('#start-button') 42 | const width = 10 // tells the width of the falling Brick window, this will be used for the shape arrays 43 | let nextRandom = 0 44 | let timerId 45 | let score = 0 46 | 47 | // the below declares all of the shapes and their variations by calling their corresponding cells within the falling brick window 48 | const bed = [ 49 | [1, width+1, width*2+1, 2], 50 | [width, width+1, width+2, width*2+2], 51 | [1, width+1, width*2+1, width*2], 52 | [width, width*2, width*2+1, width*2+2] 53 | ] 54 | 55 | const box = [ 56 | [0, 1, width, width+1], 57 | [0, 1, width, width+1], 58 | [0, 1, width, width+1], 59 | [0, 1, width, width+1] 60 | ] 61 | 62 | const zee = [ 63 | [0, 1, width+1, width+2], 64 | [1, width, width+1, width*2], 65 | [0, 1, width+1, width+2], 66 | [1, width, width+1, width*2] 67 | ] 68 | 69 | const ess = [ 70 | [1, 2, width, width+1], 71 | [0, width, width+1, width*2+1], 72 | [1, 2, width, width+1], 73 | [0, width, width+1, width*2+1] 74 | ] 75 | const midFinger = [ 76 | [1, width, width+1, width+2], 77 | [1, width+1, width+2, width*2+1], 78 | [0, 1, 2, width+1], 79 | [1, width, width+1, width*2+1] 80 | ] 81 | const seven = [ 82 | [0, 1, width +1, width*2+1], 83 | [width,width+1, width+2, 2], 84 | [1, width+1, width*2+1, width*2+2], 85 | [width, width+1, width+2, width*2] 86 | ] 87 | const flat = [ 88 | [1, width+1, width*2+1, width*3+1], 89 | [width, width+1, width+2, width+3], 90 | [1, width+1, width*2+1, width*3+1], 91 | [width, width+1, width+2, width+3] 92 | ] 93 | 94 | const blocks = [bed, box, zee, ess, midFinger, seven, flat] 95 | 96 | let currentPosition = 4 // sets the starting position in the block box 97 | let currentRotation = 0 98 | 99 | let random = Math.floor(Math.random()*blocks.length) // selects a block randomly 100 | let currentBlock = blocks[random][currentRotation] // calls the first item of a random block from the array of blocks 101 | 102 | // draw the first rotation in the first block 103 | function draw() { 104 | currentBlock.forEach(index => { // using this to add the code to each index of the current array 105 | squares[currentPosition + index].classList.add('tetros') 106 | }) 107 | } 108 | 109 | // draw() 110 | 111 | // undraws the block 112 | function unDraw() { 113 | currentBlock.forEach(index => { 114 | squares[currentPosition + index].classList.remove('tetros') 115 | }) 116 | } 117 | 118 | // make the blocks move down every second 119 | // timerId = setInterval(moveDown, 800) 120 | 121 | // assign functions to keycodes 122 | function control(e) { // the e key is becuase the function is waiting for an event to invoke the function 123 | if(e.keyCode === 37) { // 37 is the keycode for arrow left 124 | moveLeft() 125 | } else if (e.keyCode === 38) { // 38 is the up arrow, and will rotate the block 126 | rotate() 127 | } else if (e.keyCode === 39) { // 39 is the right arrow and will move the block right 128 | moveRight() 129 | } else if (e.keyCode === 40) { // 40 is the down arrow and will move the block down 130 | moveDown() 131 | } 132 | } 133 | document.addEventListener('keydown', control) // send the function of contol to the browser when the key goes down 134 | 135 | // move down fucntion 136 | function moveDown() { 137 | unDraw() 138 | currentPosition += width 139 | draw() 140 | freeze() 141 | gameOver() 142 | } 143 | 144 | // write a freeze function 145 | function freeze() { 146 | if(currentBlock.some(index => squares[currentPosition + index + width].classList.contains('taken'))) { 147 | currentBlock.forEach(index => squares[currentPosition + index].classList.add('taken')) 148 | //start a new falling block 149 | random = nextRandom 150 | nextRandom = Math.floor(Math.random() * blocks.length) 151 | currentBlock = blocks[random][currentRotation] 152 | currentPosition = 4 153 | draw() 154 | displayShape() 155 | addScore() 156 | } 157 | } 158 | 159 | // move the blocks left, unless it is at the edge or there is a blockage 160 | function moveLeft() { 161 | unDraw() // this undraws any trace of the block so it is gone 162 | // if some of our block is touching the left then its true. curren block + its index (0) / 10 (size of grid) should equal zero 163 | const isAtLeftEdge = currentBlock.some(index => (currentPosition + index) % width === 0) 164 | 165 | if(!isAtLeftEdge) currentPosition -=1 // we want the box to stop if there is another block there 166 | 167 | // we want our block to stop if theres already another block there and we want to do this for every index in the block so we use the arrow 168 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 169 | currentPosition +=1 170 | } 171 | draw() 172 | } 173 | 174 | // move the block right, unless it is at the edge or there is a blockage 175 | function moveRight() { 176 | unDraw() 177 | const isAtRightEdge = currentBlock.some(index => (currentPosition + index) % width === width -1) 178 | 179 | if(!isAtRightEdge) currentPosition +=1 180 | 181 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 182 | currentPosition -=1 183 | } 184 | } 185 | 186 | // rotate the block 187 | function rotate() { 188 | unDraw() 189 | currentRotation ++ 190 | if(currentRotation === currentBlock.length) { //if the current rotation gets to 4, make it go back to 0 191 | currentRotation = 0 // if current rotation is false 192 | } 193 | currentBlock = blocks[random][currentRotation] 194 | draw() 195 | } 196 | 197 | // show up-next block in the mini grid display 198 | const displaySquares = document.querySelectorAll('.next-block div') 199 | const displayWidth = 4 200 | let displayIndex = 0 201 | 202 | // the blocks without rotations 203 | const nextUpBlocks = [ 204 | [1, displayWidth+1, displayWidth*2+1, 2], // bed block 205 | [0, 1, displayWidth, displayWidth+1], // box block 206 | [0, 1, displayWidth+1, displayWidth+2], // zee block 207 | [1, 2, displayWidth, displayWidth+1], // ess block 208 | [1, width, displayWidth+1, displayWidth+2], // mid finger block 209 | [0, 1, displayWidth +1, displayWidth*2+1], // seven block 210 | [1, displayWidth+1, displayWidth*2+1, displayWidth*3+1], // flat block 211 | ] 212 | 213 | // display the shape in the nextBlock display 214 | function displayShape() { 215 | //removes any trace of a block from the entire grid 216 | displaySquares.forEach(squares => { 217 | squares.classList.remove('tetros') 218 | }) 219 | 220 | nextUpBlocks[nextRandom].forEach( index => { 221 | displaySquares[displayIndex + index].classList.add('tetros') 222 | }) 223 | } 224 | 225 | // add functionality to the start button 226 | startBtn.addEventListener('click', () => { 227 | if (timerId) { 228 | clearInterval(timerId) 229 | timerId = null 230 | } else { 231 | draw() 232 | timerId = setInterval(moveDown, 800) 233 | nextRandom = Math.floor(Math.random()*blocks.length) 234 | displayShape() 235 | } 236 | }) 237 | 238 | // add score( 239 | function addScore() { 240 | for(let i = 0; i < 199; i +=width) { 241 | const row = [i, i+1, i+2, i+3, i+4, i+5, i+6, i+7, i+8, i+9] 242 | if(row.every(index => squares[index].classList.contains('taken'))) { 243 | score +=10 244 | scoreDisplay.innerHTML = score 245 | row.forEach(index => { 246 | squares[index].classList.remove('taken') 247 | squares[index].classList.remove('tetros') 248 | }) 249 | const squaresRemoved = squares.splice(i, width) 250 | squares = squaresRemoved.concat(squares) 251 | squares.forEach(cell => grid.appendChild(cell)) 252 | } 253 | } 254 | } 255 | // game over 256 | function gameOver() { 257 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 258 | scoreDisplay.innerHTML = 'end' 259 | clearInterval(timerId) 260 | } 261 | } 262 | 263 | }) -------------------------------------------------------------------------------- /script1.js: -------------------------------------------------------------------------------- 1 | //! goto week1 hw4 index.html for this html's spacing, as 2 | 3 | // at game start, user can pick if they want to play alone of in 2 player mode 4 | // user(s) will then be prompted to enter theie names which will be stored throughout the duration of the game 5 | // and then instructions will be given as to how the blocks can be manipulated 6 | // then the user will be prompted to press the start key 7 | 8 | // Need to build out an object 9 | // the object must fall at a steady speed 10 | // the object needs to have a specific set of capabilities: 11 | // ========== on press of down key, the object should speed up fall rate * 2 12 | // ========== on press of up key, the object position will change 13 | // ========== on press of right arrow, the object should move one space to the right 14 | // ========== on press of left arrow, the object should move one space to the left 15 | 16 | // the object needs to start right outside of the falling block box 17 | // the object then falls until it finally hits the bottom of the falling block box OR 18 | // until any side of the object hits another object 19 | // once the object finally touches another block, the activated object becomes dead 20 | // then the next piece begins to fall 21 | 22 | // the objective is to fill an entire row with all boxes 23 | // when a row is filled completely, that row will disappear and all above blocks will drop down 24 | // when multiple rows are filled completely, the rows will disappear and all above blocks will drop down 25 | 26 | // at start the first block will begin dropping 27 | // the next block will immediately be displayed in the "Next Piece Display Area" 28 | // once the active piece has touched the bottom of the "block falling area" that piece will no longer be active 29 | // then the next piece will begin dropping and this will repeat until a player loses 30 | // a player loses when there is no more space for a block to go 31 | 32 | // there will be 10 levels in total 33 | // each level will become increasingly harder by the blocks falling faster and faster 34 | // each level will have a total of 100 blocks (this number may be changed, based on gameplay enjoyment) 35 | 36 | document.addEventListener('DOMContentLoaded', () => { // this fires as soon as the HTML page is loaded so that you dont have to wait for everything (stylesheets, images, etc) to load 37 | 38 | const grid = document.querySelector('.fallingBlockGrid') 39 | let squares = Array.from(document.querySelectorAll('.fallingBlockGrid div')) // creates an array directly from this div 40 | const scoreDisplay = document.querySelector('#score') 41 | const computerScoreDisplay = document.querySelector('#computerScore') 42 | const levelDisplay = document.querySelector('#level') 43 | const lineDisplay = document.querySelector('#line') 44 | const startBtn = document.querySelector('#start-button') 45 | // const musicBtn = document.querySelector('#music-btn') 46 | const width = 10 // tells the width of the falling Brick window, this will be used for the shape arrays 47 | let nextRandom = 0 48 | let timerId 49 | let score = 500 50 | let level = 1 51 | let line = 0 52 | // let audio = new Audio('musicCyberPunk.mp3'); 53 | const colors = [ 54 | '#0000FF', //#6527BE', 55 | '#9933FF', //#213555', 56 | '#A2FF86', 57 | '#FFFF33', 58 | '#FF00FF', 59 | '#FF0000', 60 | '#00FFFF', 61 | ] 62 | 63 | //^ ========================================= end of intitally defined variables 64 | 65 | const music = [ 66 | './musicCyberPunk.mp3', 67 | './musicMatrix.mp3', 68 | './musicTrap.mp3', 69 | ] 70 | 71 | let audio; // Variable to store the audio element 72 | let isPlaying = false; // Track if music is currently playing or stopped 73 | let currentSongIndex = 0; // Track the index of the current playing song 74 | 75 | // Function to play the next random music 76 | function playNextRandomMusic() { 77 | // Stop the current music if it's playing 78 | if (audio) { 79 | audio.pause(); 80 | } 81 | 82 | // Select a random index from the musicList array 83 | currentSongIndex = Math.floor(Math.random() * music.length); 84 | 85 | // Get the selected music URL from the array 86 | const selectedMusic = music[currentSongIndex]; 87 | 88 | // Create an HTML audio element 89 | audio = new Audio(selectedMusic); 90 | 91 | // Play the selected music 92 | audio.play(); 93 | 94 | // Set the isPlaying flag to true 95 | isPlaying = true; 96 | 97 | // Add an event listener to the audio element to detect when the current song has ended 98 | audio.addEventListener('ended', playNextRandomMusic); 99 | } 100 | 101 | // Function to stop the music 102 | function stopMusic() { 103 | if (audio) { 104 | audio.pause(); 105 | } 106 | isPlaying = false; 107 | } 108 | 109 | // Function to handle the button click event 110 | function handleButtonClick() { 111 | if (isPlaying) { 112 | // If music is currently playing, stop it 113 | stopMusic(); 114 | } else { 115 | // If music is stopped, play the next random music 116 | playNextRandomMusic(); 117 | } 118 | } 119 | 120 | // Attach a click event listener to the playButton 121 | const musicBtn = document.getElementById('musicBtn'); 122 | musicBtn.addEventListener('click', handleButtonClick); 123 | 124 | //^ ========================================= end of audio button section 125 | // // play music function 126 | // function playRandomMusic() { 127 | // // select a random index from the music list 128 | // const randomIndex = Math.floor(Math.random() * music.length); 129 | // // get the selected music URL from the array 130 | // const selectedMusic = music[randomIndex]; 131 | // // create an HTML audio element 132 | // const audio = new Audio(selectedMusic); 133 | // // play tje selected music 134 | // audio.play(); 135 | // } 136 | 137 | // // attach a click event listener to the playButton 138 | // const musicBtn = document.getElementById('musicBtn'); 139 | // musicBtn.addEventListener('click', playRandomMusic); 140 | 141 | // function getRandomTrack() { 142 | 143 | // return music[randomIndex]; 144 | // } 145 | 146 | // function playSound() { 147 | // const soundFile = new Audio(getRandomTrack()); 148 | // soundFile.play(); 149 | // } 150 | 151 | // class Audio { 152 | // constructor(audioFile) { 153 | // this.audioFile = audioFile; 154 | // } 155 | // getAudio() { 156 | // return this.audioFile 157 | // } 158 | // } 159 | 160 | // const music = [("musicCyberPunk.mp3")] 161 | 162 | 163 | // the below declares all of the shapes and their variations by calling their corresponding cells within the falling brick window 164 | const bed = [ 165 | [0, width, width*2, 1], 166 | [width, width+1, width+2, width*2+2], 167 | [1, width+1, width*2+1, width*2], 168 | [width, width*2, width*2+1, width*2+2] 169 | ] 170 | 171 | const box = [ 172 | [0, 1, width, width+1], 173 | [0, 1, width, width+1], 174 | [0, 1, width, width+1], 175 | [0, 1, width, width+1] 176 | ] 177 | 178 | const zee = [ 179 | [0, 1, width+1, width+2], 180 | [1, width, width+1, width*2], 181 | [0, 1, width+1, width+2], 182 | [1, width, width+1, width*2] 183 | ] 184 | 185 | const ess = [ 186 | [1, 2, width, width+1], 187 | [0, width, width+1, width*2+1], 188 | [1, 2, width, width+1], 189 | [0, width, width+1, width*2+1] 190 | ] 191 | const midFinger = [ 192 | [1, width, width+1, width+2], 193 | [0, width, width+1, width*2], 194 | [0, 1, 2, width+1], 195 | [1, width, width+1, width*2+1] 196 | ] 197 | const seven = [ 198 | [0, 1, width +1, width*2+1], 199 | [width,width+1, width+2, 2], 200 | [0, width, width*2, width*2+1], 201 | [width, width+1, width+2, width*2] 202 | ] 203 | const flat = [ 204 | [0, width, width*2, width*3], 205 | [width, width+1, width+2, width+3], 206 | [0, width, width*2, width*3], 207 | [width, width+1, width+2, width+3] 208 | ] 209 | 210 | const blocks = [bed, box, zee, ess, midFinger, seven, flat] 211 | 212 | //^ ========================================= end of block arrays 213 | 214 | let currentPosition = 4 // sets the starting position in the block box 215 | let currentRotation = 0 216 | 217 | let random = Math.floor(Math.random()*blocks.length) // selects a block randomly 218 | let currentBlock = blocks[random][currentRotation] // calls the first item of a random block from the array of blocks 219 | 220 | 221 | // draw the first rotation in the first block 222 | function draw() { 223 | currentBlock.forEach(index => { // using this to add the code to each index of the current array 224 | squares[currentPosition + index].classList.add('tetros') 225 | squares[currentPosition + index].style.backgroundColor = colors[random] 226 | }) 227 | } 228 | 229 | // draw() 230 | 231 | // undraws the block 232 | function unDraw() { 233 | currentBlock.forEach(index => { 234 | squares[currentPosition + index].classList.remove('tetros') 235 | squares[currentPosition + index].style.backgroundColor = '' 236 | }) 237 | } 238 | 239 | //^ ========================================= end of block draw and unDraw assignments, allowing the shapes to disappear when needed 240 | 241 | // make the blocks move down every second 242 | // timerId = setInterval(moveDown, 800) 243 | 244 | // assign functions to keycodes 245 | function control(e) { // the e key is becuase the function is waiting for an event to invoke the function 246 | if(e.keyCode === 37) { // 37 is the keycode for arrow left 247 | moveLeft() 248 | } else if (e.keyCode === 38) { // 38 is the up arrow, and will rotate the block 249 | rotate() 250 | } else if (e.keyCode === 39) { // 39 is the right arrow and will move the block right 251 | moveRight() 252 | } else if (e.keyCode === 40) { // 40 is the down arrow and will move the block down 253 | moveDown() 254 | } 255 | } 256 | document.addEventListener('keydown', control) // send the function of contol to the browser when the key goes down 257 | 258 | //^ ========================================= end of block movement/rotation button assignments 259 | 260 | 261 | // move down function 262 | function moveDown() { 263 | if(!currentBlock.some(index => squares[currentPosition + index + width].classList.contains('taken'))) { 264 | unDraw() 265 | currentPosition += width 266 | draw() 267 | } else { 268 | freeze(); 269 | } 270 | } 271 | 272 | // write a freeze function 273 | function freeze() { 274 | currentBlock.forEach(index => squares[currentPosition + index].classList.add('taken')) 275 | //start a new block falling 276 | random = nextRandom 277 | nextRandom = Math.floor(Math.random() * blocks.length) 278 | currentBlock = blocks[random][currentRotation] 279 | currentPosition = 4 280 | draw() 281 | displayShape() 282 | // scoreBlocks() 283 | // playMusic() 284 | addScore() 285 | gameOver() 286 | } 287 | 288 | // move the blocks left, unless it is at the edge or there is a blockage 289 | function moveLeft() { 290 | unDraw() // this undraws any trace of the block so it is gone 291 | // if some of our block is touching the left then its true. curren block + its index (0) / 10 (size of grid) should equal zero 292 | const isAtLeftEdge = currentBlock.some(index => (currentPosition + index) % width === 0) 293 | 294 | if(!isAtLeftEdge) currentPosition -=1 // we want the box to stop if there is another block there 295 | 296 | // we want our block to stop if theres already another block there and we want to do this for every index in the block so we use the arrow 297 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 298 | currentPosition +=1 299 | } 300 | draw() 301 | } 302 | 303 | // move the block right, unless it is at the edge or there is a blockage 304 | function moveRight() { 305 | unDraw() 306 | const isAtRightEdge = currentBlock.some(index => (currentPosition + index) % width === width -1) 307 | 308 | if(!isAtRightEdge) currentPosition +=1 309 | 310 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 311 | currentPosition -=1 312 | } 313 | draw() 314 | } 315 | 316 | // rotate the block 317 | function rotate() { 318 | unDraw() 319 | currentRotation ++ 320 | if(currentRotation === currentBlock.length) { //if the current rotation gets to 4, make it go back to 0 321 | currentRotation = 0 // if current rotation is false 322 | } 323 | const isAtRightEdge = currentBlock.some(index => (currentPosition + index) % width === width -1) //! added code 324 | if(!isAtRightEdge) currentPosition +=1 //! added code 325 | const isAtLeftEdge = currentBlock.some(index => (currentPosition + index) % width === 0) //! added code 326 | if(!isAtLeftEdge) currentPosition -=1 //! added code 327 | 328 | currentBlock = blocks[random][currentRotation] 329 | draw() 330 | } 331 | 332 | // show up-next block in the mini grid display 333 | const displaySquares = document.querySelectorAll('.next-block div') 334 | const displayWidth = 6 //4 335 | const displayIndex = 7 //0 336 | 337 | // the blocks without rotations 338 | const nextUpBlocks = [ 339 | [1, displayWidth+1, displayWidth*2+1, 2], // bed block 340 | [0, 1, displayWidth, displayWidth+1], // box block 341 | [0, 1, displayWidth+1, displayWidth+2], // zee block 342 | [1, 2, displayWidth, displayWidth+1], // ess block 343 | [1, displayWidth, displayWidth+1, displayWidth+2], // mid finger block 344 | [0, 1, displayWidth +1, displayWidth*2+1], // seven block 345 | [1, displayWidth+1, displayWidth*2+1, displayWidth*3+1], // flat block 346 | ] 347 | 348 | // display the shape in the nextBlock display 349 | function displayShape() { 350 | //removes any trace of a block from the entire grid 351 | displaySquares.forEach(squares => { 352 | squares.classList.remove('tetros') 353 | squares.style.backgroundColor = '' 354 | }) 355 | 356 | nextUpBlocks[nextRandom].forEach( index => { 357 | displaySquares[displayIndex + index].classList.add('tetros') 358 | displaySquares[displayIndex + index].style.backgroundColor = colors[nextRandom] 359 | //! score ++ 360 | //! scoreDisplay.innerHTML = score need to find a PLACE FOR THESE TO INCREMENT THE SCORE WHEN A BLOCK FALLS 361 | }) 362 | } 363 | 364 | // add functionality to the start button 365 | startBtn.addEventListener('click', () => { 366 | if (timerId) { 367 | clearInterval(timerId) 368 | timerId = null 369 | } else { 370 | draw() 371 | timerId = setInterval(moveDown, 200) //& THIS IS THE FIRST DIFFERENCE I CAN FIND, THE ORIGINAL WAS 800 372 | nextRandom = Math.floor(Math.random()*blocks.length) 373 | displayShape() 374 | } 375 | }) 376 | 377 | // // add music to the game 378 | // function playMusic() 379 | // music-btn.addEventListener('click', () => { 380 | // audio.play(); 381 | // }) 382 | 383 | // add score( 384 | function addScore() { 385 | for(let i = 0; i < 199; i +=width) { 386 | const row = [i, i+1, i+2, i+3, i+4, i+5, i+6, i+7, i+8, i+9] 387 | if(row.every(index => squares[index].classList.contains('taken'))) { 388 | score +=10 389 | scoreDisplay.innerHTML = score 390 | lineUp() 391 | lineDisplay.innerHTML = line 392 | levelUp() 393 | levelDisplay.innerHTML = level 394 | // getRandomNumber() 395 | // computerScoreDisplay.innerHTML = computerScore 396 | // singlePlayerWin() //& this was also different in the other one it was activated so i activated it here too 397 | row.forEach(index => { 398 | squares[index].classList.remove('taken') 399 | squares[index].classList.remove('tetros') 400 | squares[index].style.backgroundColor = '' 401 | }) 402 | const squaresRemoved = squares.splice(i, width) 403 | squares = squaresRemoved.concat(squares) 404 | squares.forEach(cell => grid.appendChild(cell)) 405 | } 406 | // if (score % 10 === 0) { 407 | // level++; 408 | // levelDisplay.innerHTML = level 409 | // } 410 | } 411 | // levelUp() 412 | } 413 | 414 | // add to score per falling block 415 | // function scoreBlocks() { 416 | // score += 2; 417 | // } 418 | 419 | 420 | // level up function //! if the score jumps over a multiple of 200 then the function doesnt trigger 421 | function levelUp() { 422 | if (score >= 200 && score % 200 === 0) { 423 | level++; 424 | } 425 | timerId = setInterval(750) 426 | } 427 | 428 | // line up function 429 | function lineUp() { 430 | if (score % 10 === 0) { 431 | line++; 432 | } 433 | } 434 | 435 | // Create a random number as computers High Score 436 | function getRandomNumber(min, max) { 437 | return Math.floor(Math.random() * (max - min +1)) + min; 438 | } 439 | 440 | let computerScore = getRandomNumber(500,1000); 441 | computerScoreDisplay.innerHTML = computerScore 442 | 443 | // Player 1 mode Win State 444 | function singlePlayerWin() { 445 | if (score >= computerScore) { 446 | clearInterval(timerId) 447 | alert("Congratulations, you beat the computer!"); 448 | alert("Let\'s see if you can do it again!"); 449 | clearInterval(timerId) 450 | } else { 451 | alert("YOU LOSE! The computer beat your score!") 452 | alert("Take another shot at beating the computer!"); 453 | clearInterval(timerId) 454 | } 455 | clearInterval(timerId) 456 | location.replace() 457 | } 458 | 459 | // game over 460 | function gameOver() { 461 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 462 | scoreDisplay.innerHTML = 'end' 463 | clearInterval(timerId) 464 | singlePlayerWin(); 465 | } 466 | // if (score >= computerScore) { 467 | // alert("Congratulations, you beat the computer!"); 468 | // alert("Would you like to continue playing?"); 469 | // } else { 470 | // alert("YOU LOSE! The computer beat your score!") 471 | // } 472 | } 473 | 474 | 475 | // const playButton = document.getElementById('music-btn'); 476 | // const audioPlayer = document.getElementById('audioPlayer'); 477 | 478 | // playButton.addEventListener('click', function() { 479 | // if (audioPlayer.paused) { 480 | // audioPlayer.play(); 481 | // playButton.innerText = 'Pause Audio'; 482 | // } else { 483 | // audioPlayer.pause(); 484 | // playButton.innerText = 'Play Audio'; 485 | // } 486 | // }); 487 | 488 | 489 | }) 490 | 491 | // alert(promptUserName()); 492 | 493 | // function promptUserName() { 494 | // let name = prompt("What is your name?"); 495 | // name = name.toUpperCase(); { 496 | // if (name === ""); 497 | // prompt("Invalid response. Please Enter your name."); 498 | // promptUserName() 499 | // } 500 | // } 501 | // alert("Hi, " + name + "!"); 502 | // alert("Use the left-arrow key to move the block left."); 503 | // alert("Use the right-arrow key to move the block right."); 504 | 505 | // alert("Welcome to TETRIS"); 506 | // alert("Your goal is to beat my, (the computer\'s) High Score."); 507 | // alert("Use the arrow key\'s to move and rotate the blocks as they fall."); 508 | // alert("Gain points by completing a full line accross."); 509 | // alert("If you have any questions, visit the 'Help' page."); 510 | // alert(`Press the Power Button when you\'re ready to play. Good Luck... (your\'re gonna need it!!)`); 511 | 512 | 513 | //^ one player mode will get 2 tries to 'beat the computer'. the win state will be a high score that needs 514 | //^ to be reached in order to win. -------------------------------------------------------------------------------- /script2.js: -------------------------------------------------------------------------------- 1 | //! goto week1 hw4 index.html for this html's spacing, as 2 | 3 | // at game start, user can pick if they want to play alone of in 2 player mode 4 | // user(s) will then be prompted to enter theie names which will be stored throughout the duration of the game 5 | // and then instructions will be given as to how the blocks can be manipulated 6 | // then the user will be prompted to press the start key 7 | 8 | // Need to build out an object 9 | // the object must fall at a steady speed 10 | // the object needs to have a specific set of capabilities: 11 | // ========== on press of down key, the object should speed up fall rate * 2 12 | // ========== on press of up key, the object position will change 13 | // ========== on press of right arrow, the object should move one space to the right 14 | // ========== on press of left arrow, the object should move one space to the left 15 | 16 | // the object needs to start right outside of the falling block box 17 | // the object then falls until it finally hits the bottom of the falling block box OR 18 | // until any side of the object hits another object 19 | // once the object finally touches another block, the activated object becomes dead 20 | // then the next piece begins to fall 21 | 22 | // the objective is to fill an entire row with all boxes 23 | // when a row is filled completely, that row will disappear and all above blocks will drop down 24 | // when multiple rows are filled completely, the rows will disappear and all above blocks will drop down 25 | 26 | // at start the first block will begin dropping 27 | // the next block will immediately be displayed in the "Next Piece Display Area" 28 | // once the active piece has touched the bottom of the "block falling area" that piece will no longer be active 29 | // then the next piece will begin dropping and this will repeat until a player loses 30 | // a player loses when there is no more space for a block to go 31 | 32 | // there will be 10 levels in total 33 | // each level will become increasingly harder by the blocks falling faster and faster 34 | // each level will have a total of 100 blocks (this number may be changed, based on gameplay enjoyment) 35 | 36 | document.addEventListener('DOMContentLoaded', () => { // this fires as soon as the HTML page is loaded so that you dont have to wait for everything (stylesheets, images, etc) to load 37 | 38 | const grid = document.querySelector('.fallingBlockGrid') 39 | let squares = Array.from(document.querySelectorAll('.fallingBlockGrid div')) // creates an array directly from this div 40 | const scoreDisplay = document.querySelector('#score') 41 | const computerScoreDisplay = document.querySelector('#computerScore') 42 | const levelDisplay = document.querySelector('#level') 43 | const lineDisplay = document.querySelector('#line') 44 | const startBtn = document.querySelector('#start-button') 45 | // const musicBtn = document.querySelector('#music-btn') 46 | const width = 10 // tells the width of the falling Brick window, this will be used for the shape arrays 47 | // let nextRandom = 0 48 | let timerId 49 | let score = 0 50 | let score2 = 0 51 | let level = 1 52 | let line = 0 53 | // let audio = new Audio('musicCyberPunk.mp3'); 54 | const colors = [ 55 | '#0000FF', //#6527BE', 56 | '#9933FF', //#213555', 57 | '#A2FF86', 58 | '#FFFF33', 59 | '#FF00FF', 60 | '#FF0000', 61 | '#00FFFF', 62 | ] 63 | 64 | const music = [ 65 | './musicCyberPunk.mp3', 66 | './musicMatrix.mp3', 67 | './musicTrap.mp3', 68 | ] 69 | 70 | let audio; // Variable to store the audio element 71 | let isPlaying = false; // Track if music is currently playing or stopped 72 | let currentSongIndex = 0; // Track the index of the current playing song 73 | 74 | // Function to play the next random music 75 | function playNextRandomMusic() { 76 | // Stop the current music if it's playing 77 | if (audio) { 78 | audio.pause(); 79 | } 80 | 81 | // Select a random index from the musicList array 82 | currentSongIndex = Math.floor(Math.random() * music.length); 83 | // Get the selected music URL from the array 84 | const selectedMusic = music[currentSongIndex]; 85 | // Create an HTML audio element 86 | audio = new Audio(selectedMusic); 87 | // Play the selected music 88 | audio.play(); 89 | // Set the isPlaying flag to true 90 | isPlaying = true; 91 | // Add an event listener to the audio element to detect when the current song has ended 92 | audio.addEventListener('ended', playNextRandomMusic); 93 | } 94 | 95 | // Function to stop the music 96 | function stopMusic() { 97 | if (audio) { 98 | audio.pause(); 99 | } 100 | isPlaying = false; 101 | } 102 | 103 | // Function to handle the button click event 104 | function handleButtonClick() { 105 | if (isPlaying) { 106 | // If music is currently playing, stop it 107 | stopMusic(); 108 | } else { 109 | // If music is stopped, play the next random music 110 | playNextRandomMusic(); 111 | } 112 | } 113 | // Attach a click event listener to the playButton 114 | const musicBtn = document.getElementById('musicBtn'); 115 | musicBtn.addEventListener('click', handleButtonClick); 116 | 117 | // the below declares all of the shapes and their variations by calling their corresponding cells within the falling brick window 118 | const bed = [ 119 | [0, width, width*2, 1], 120 | [width, width+1, width+2, width*2+2], 121 | [1, width+1, width*2+1, width*2], 122 | [width, width*2, width*2+1, width*2+2] 123 | ] 124 | 125 | const box = [ 126 | [0, 1, width, width+1], 127 | [0, 1, width, width+1], 128 | [0, 1, width, width+1], 129 | [0, 1, width, width+1] 130 | ] 131 | 132 | const zee = [ 133 | [0, 1, width+1, width+2], 134 | [1, width, width+1, width*2], 135 | [0, 1, width+1, width+2], 136 | [1, width, width+1, width*2] 137 | ] 138 | 139 | const ess = [ 140 | [1, 2, width, width+1], 141 | [0, width, width+1, width*2+1], 142 | [1, 2, width, width+1], 143 | [0, width, width+1, width*2+1] 144 | ] 145 | const midFinger = [ 146 | [1, width, width+1, width+2], 147 | [0, width, width+1, width*2], 148 | [0, 1, 2, width+1], 149 | [1, width, width+1, width*2+1] 150 | ] 151 | const seven = [ 152 | [0, 1, width +1, width*2+1], 153 | [width,width+1, width+2, 2], 154 | [0, width, width*2, width*2+1], 155 | [width, width+1, width+2, width*2] 156 | ] 157 | const flat = [ 158 | [0, width, width*2, width*3], 159 | [width, width+1, width+2, width+3], 160 | [0, width, width*2, width*3], 161 | [width, width+1, width+2, width+3] 162 | ] 163 | 164 | const blocks = [bed, box, zee, ess, midFinger, seven, flat] 165 | 166 | let currentPosition = 4 // sets the starting position in the block box 167 | let currentRotation = 0 168 | 169 | let random = Math.floor(Math.random()*blocks.length) // selects a block randomly 170 | let currentBlock = blocks[random][currentRotation] // calls the first item of a random block from the array of blocks 171 | 172 | 173 | // draw the first rotation in the first block 174 | function draw() { 175 | currentBlock.forEach(index => { // using this to add the code to each index of the current array 176 | squares[currentPosition + index].classList.add('tetros') 177 | squares[currentPosition + index].style.backgroundColor = colors[random] 178 | }) 179 | } 180 | 181 | // draw() 182 | 183 | // undraws the block 184 | function unDraw() { 185 | currentBlock.forEach(index => { 186 | squares[currentPosition + index].classList.remove('tetros') 187 | squares[currentPosition + index].style.backgroundColor = '' 188 | }) 189 | } 190 | 191 | // make the blocks move down every second 192 | // timerId = setInterval(moveDown, 800) 193 | 194 | // assign functions to keycodes 195 | function control(e) { // the e key is becuase the function is waiting for an event to invoke the function 196 | if(e.keyCode === 37) { // 37 is the keycode for arrow left 197 | moveLeft() 198 | } else if (e.keyCode === 38) { // 38 is the up arrow, and will rotate the block 199 | rotate() 200 | } else if (e.keyCode === 39) { // 39 is the right arrow and will move the block right 201 | moveRight() 202 | } else if (e.keyCode === 40) { // 40 is the down arrow and will move the block down 203 | moveDown() 204 | } 205 | } 206 | document.addEventListener('keydown', control) // send the function of contol to the browser when the key goes down 207 | 208 | 209 | // move down function 210 | function moveDown() { 211 | if(!currentBlock.some(index => squares[currentPosition + index + width].classList.contains('taken'))) { 212 | unDraw() 213 | currentPosition += width 214 | draw() 215 | } else { 216 | freeze(); 217 | } 218 | } 219 | 220 | // write a freeze function 221 | function freeze() { 222 | currentBlock.forEach(index => squares[currentPosition + index].classList.add('taken')) 223 | //start a new block falling 224 | random = nextRandom 225 | nextRandom = Math.floor(Math.random() * blocks.length) 226 | currentBlock = blocks[random][currentRotation] 227 | currentPosition = 4 228 | draw() 229 | displayShape() 230 | // scoreBlocks() 231 | // playMusic() 232 | addScore() 233 | gameOver() 234 | } 235 | 236 | // move the blocks left, unless it is at the edge or there is a blockage 237 | function moveLeft() { 238 | unDraw() // this undraws any trace of the block so it is gone 239 | // if some of our block is touching the left then its true. curren block + its index (0) / 10 (size of grid) should equal zero 240 | const isAtLeftEdge = currentBlock.some(index => (currentPosition + index) % width === 0) 241 | 242 | if(!isAtLeftEdge) currentPosition -=1 // we want the box to stop if there is another block there 243 | 244 | // we want our block to stop if theres already another block there and we want to do this for every index in the block so we use the arrow 245 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 246 | currentPosition +=1 247 | } 248 | draw() 249 | } 250 | 251 | // move the block right, unless it is at the edge or there is a blockage 252 | function moveRight() { 253 | unDraw() 254 | const isAtRightEdge = currentBlock.some(index => (currentPosition + index) % width === width -1) 255 | 256 | if(!isAtRightEdge) currentPosition +=1 257 | 258 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 259 | currentPosition -=1 260 | } 261 | draw() 262 | } 263 | 264 | // rotate the block 265 | function rotate() { 266 | unDraw() 267 | currentRotation ++ 268 | if(currentRotation === currentBlock.length) { //if the current rotation gets to 4, make it go back to 0 269 | currentRotation = 0 // if current rotation is false 270 | } 271 | const isAtRightEdge = currentBlock.some(index => (currentPosition + index) % width === width -1) //! added code 272 | if(!isAtRightEdge) currentPosition +=1 //! added code 273 | const isAtLeftEdge = currentBlock.some(index => (currentPosition + index) % width === 0) //! added code 274 | if(!isAtLeftEdge) currentPosition -=1 //! added code 275 | 276 | currentBlock = blocks[random][currentRotation] 277 | draw() 278 | } 279 | 280 | // show up-next block in the mini grid display 281 | const displaySquares = document.querySelectorAll('.next-block div') 282 | const displayWidth = 6 //4 283 | const displayIndex = 7 //0 284 | 285 | // the blocks without rotations 286 | const nextUpBlocks = [ 287 | [1, displayWidth+1, displayWidth*2+1, 2], // bed block 288 | [0, 1, displayWidth, displayWidth+1], // box block 289 | [0, 1, displayWidth+1, displayWidth+2], // zee block 290 | [1, 2, displayWidth, displayWidth+1], // ess block 291 | [1, displayWidth, displayWidth+1, displayWidth+2], // mid finger block 292 | [0, 1, displayWidth +1, displayWidth*2+1], // seven block 293 | [1, displayWidth+1, displayWidth*2+1, displayWidth*3+1], // flat block 294 | ] 295 | 296 | // display the shape in the nextBlock display 297 | function displayShape() { 298 | //removes any trace of a block from the entire grid 299 | displaySquares.forEach(squares => { 300 | squares.classList.remove('tetros') 301 | squares.style.backgroundColor = '' 302 | }) 303 | 304 | nextUpBlocks[nextRandom].forEach( index => { 305 | displaySquares[displayIndex + index].classList.add('tetros') 306 | displaySquares[displayIndex + index].style.backgroundColor = colors[nextRandom] 307 | //! score ++ 308 | //! scoreDisplay.innerHTML = score need to find a PLACE FOR THESE TO INCREMENT THE SCORE WHEN A BLOCK FALLS 309 | }) 310 | } 311 | 312 | // add functionality to the start button 313 | startBtn.addEventListener('click', () => { 314 | if (timerId) { 315 | clearInterval(timerId) 316 | timerId = null 317 | } else { 318 | draw() 319 | timerId = setInterval(moveDown, 300) 320 | nextRandom = Math.floor(Math.random()*blocks.length) 321 | displayShape() 322 | } 323 | }) 324 | 325 | // // add music to the game 326 | // function playMusic() 327 | // music-btn.addEventListener('click', () => { 328 | // audio.play(); 329 | // }) 330 | 331 | // add score( 332 | function addScore() { 333 | for(let i = 0; i < 199; i +=width) { 334 | const row = [i, i+1, i+2, i+3, i+4, i+5, i+6, i+7, i+8, i+9] 335 | if(row.every(index => squares[index].classList.contains('taken'))) { 336 | score +=10 337 | scoreDisplay.innerHTML = score 338 | levelUp() 339 | levelDisplay.innerHTML = level 340 | lineUp() 341 | lineDisplay.innerHTML = line 342 | // getRandomNumber() 343 | // computerScoreDisplay.innerHTML = computerScore 344 | singlePlayerWin() 345 | row.forEach(index => { 346 | squares[index].classList.remove('taken') 347 | squares[index].classList.remove('tetros') 348 | squares[index].style.backgroundColor = '' 349 | }) 350 | const squaresRemoved = squares.splice(i, width) 351 | squares = squaresRemoved.concat(squares) 352 | squares.forEach(cell => grid.appendChild(cell)) 353 | } 354 | // if (score % 10 === 0) { 355 | // level++; 356 | // levelDisplay.innerHTML = level 357 | // } 358 | } 359 | // levelUp() 360 | } 361 | 362 | // add to score per falling block 363 | // function scoreBlocks() { 364 | // score += 2; 365 | // } 366 | 367 | // level up function //! if the score jumps over a multiple of 200 then the function doesnt trigger 368 | function levelUp() { 369 | if (score >= 20 && score % 20 === 0) { 370 | level++; 371 | } 372 | timerId = setInterval(750) 373 | } 374 | 375 | // line up function 376 | function lineUp() { 377 | if (score % 10 === 0) { 378 | line++; 379 | } 380 | } 381 | 382 | // // Create a random number as computers High Score 383 | // function getRandomNumber(min, max) { 384 | // return Math.floor(Math.random() * (max - min +1)) + min; 385 | // } 386 | 387 | // let computerScore = getRandomNumber(500,1000); 388 | // computerScoreDisplay.innerHTML = computerScore 389 | 390 | 391 | 392 | // // Player 1 mode Win State 393 | // function singlePlayerWin() { 394 | // if (score >= computerScore) { 395 | // alert("Congratulations, you beat the computer!"); 396 | // alert("Would you like to continue playing?"); 397 | // } 398 | // } 399 | 400 | // game over 401 | function gameOver() { 402 | if(currentBlock.some(index => squares[currentPosition + index].classList.contains('taken'))) { 403 | scoreDisplay.innerHTML = 'end' 404 | clearInterval(timerId) 405 | } 406 | } 407 | 408 | // const playButton = document.getElementById('music-btn'); 409 | // const audioPlayer = document.getElementById('audioPlayer'); 410 | 411 | // playButton.addEventListener('click', function() { 412 | // if (audioPlayer.paused) { 413 | // audioPlayer.play(); 414 | // playButton.innerText = 'Pause Audio'; 415 | // } else { 416 | // audioPlayer.pause(); 417 | // playButton.innerText = 'Play Audio'; 418 | // } 419 | // }); 420 | 421 | 422 | }) 423 | 424 | // alert(promptUserName()); 425 | 426 | // function promptUserName() { 427 | // let name = prompt("What is your name?"); 428 | // name = name.toUpperCase(); { 429 | // if (name === ""); 430 | // prompt("Invalid response. Please Enter your name."); 431 | // promptUserName() 432 | // } 433 | // } 434 | // alert("Hi, " + name + "!"); 435 | // alert("Use the left-arrow key to move the block left."); 436 | // alert("Use the right-arrow key to move the block right."); 437 | 438 | // alert("Welcome to TETRIS"); 439 | // alert("Your goal is to beat my, (the computer\'s) High Score."); 440 | // alert("Use the arrow key\'s to move and rotate the blocks as they fall."); 441 | // alert("Gain points by completing a full line accross."); 442 | // alert("If you have any questions, visit the 'Help' page."); 443 | // alert(`Press the Power Button when you\'re ready to play. Good Luck... (your\'re gonna need it!!)`); 444 | 445 | 446 | //^ one player mode will get 2 tries to 'beat the computer'. the win state will be a high score that needs 447 | //^ to be reached in order to win. 448 | 449 | 450 | 451 | 452 | -------------------------------------------------------------------------------- /smallDownload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/smallDownload.png -------------------------------------------------------------------------------- /smallInstagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/smallInstagram.png -------------------------------------------------------------------------------- /smallMeta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/smallMeta.png -------------------------------------------------------------------------------- /smallTwitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/smallTwitch.png -------------------------------------------------------------------------------- /smallTwitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/smallTwitter.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Box Model Hack */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* Clear fix hack */ 7 | .clearfix:after { 8 | content: "."; 9 | display: block; 10 | clear: both; 11 | visibility: hidden; 12 | line-height: 0; 13 | height: 0; 14 | } 15 | 16 | .clear { 17 | clear: both; 18 | } 19 | 20 | /****************************************** 21 | /* BASE STYLES 22 | /*******************************************/ 23 | 24 | html { 25 | /* height: 800px; */ 26 | background-image: url('bkimage4.jpg'); 27 | background-size: cover; 28 | background-position: center center; 29 | 30 | } 31 | 32 | main { 33 | align-content: start; 34 | display: flex; 35 | /* height: 600px; */ 36 | font-size: 24px; 37 | display: flex; 38 | justify-content: center; 39 | } 40 | 41 | section { 42 | padding: 50px; 43 | } 44 | 45 | body { 46 | /* background-image: 'bkimage.png' */ 47 | /* background-color: #164B60; */ 48 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 49 | } 50 | 51 | 52 | header { 53 | /* background-color: #164B60; */ 54 | /* float: left; */ 55 | /* width: 100px; */ 56 | height: 77px; 57 | margin-top: 100px; 58 | /* padding: 10px; */ 59 | border: none; 60 | list-style: none; 61 | clear: both; 62 | display: flex; 63 | justify-content: center; 64 | } 65 | 66 | /* header > div { 67 | background-color: rgb(4, 0, 44); 68 | border: 1px solid #A2FF86; 69 | text-align: center; 70 | position: relative; 71 | height: 150px; 72 | width: 50px; 73 | display: flex; 74 | justify-content: center; 75 | margin: 10%; 76 | } */ 77 | 78 | #titleDiv { 79 | /* padding: 10px 0px 10px 0px; */ 80 | margin: 0px 0px 0px 0px; 81 | /* background-color: rgb(4, 0, 44); 82 | border: 2px ridge rgb(184,69, 178); */ 83 | border-radius: 10px; 84 | /* position: relative; */ 85 | height: 77px; 86 | width: 340px; 87 | float: left; 88 | display: flex; 89 | justify-content: center; 90 | } 91 | 92 | #logoDiv { 93 | /* width: 555px; 94 | height: 35px; */ 95 | background-color: white; 96 | display: flex; 97 | } 98 | 99 | #logoDiv div { 100 | width: 5px; 101 | height: 5px; 102 | } 103 | 104 | #logoT { 105 | background-color: red; 106 | } 107 | 108 | #logoE { 109 | background-color: blue; 110 | } 111 | 112 | h1 { 113 | color: white; 114 | height: 100px; 115 | padding: 0px 0px 0px 0px; 116 | } 117 | 118 | h4 { 119 | height: 100px; 120 | } 121 | 122 | #help { 123 | padding: 10px 0px, 10px, 0px; 124 | margin: 0px, 20px, 0px, 20px; 125 | /* background-color: rgb(4, 0, 44); 126 | border: 2px ridge rgb(184,69, 178); 127 | border-radius: 10px; */ 128 | /* position: relative; */ 129 | height: 50px; 130 | width: 150px; 131 | float: left; 132 | display: flex; 133 | justify-content: center; 134 | } 135 | 136 | #playerSelector { 137 | height: 300px; 138 | padding-top: 100px; 139 | padding-bottom: 100px 140 | } 141 | 142 | h3 { 143 | color: white; 144 | } 145 | 146 | /* ============================ LINKS ======================= */ 147 | 148 | 149 | 150 | 151 | /* main section div { 152 | background-color: #4FC0D0; 153 | } */ 154 | 155 | footer { 156 | padding-top: 50px; 157 | margin: 0px; 158 | border: 0px; 159 | } 160 | 161 | footer div { 162 | font-size: 11px; 163 | display: flex; 164 | justify-content: center; 165 | color: rgb(114, 71, 108); 166 | padding: 0px; 167 | margin: 0px; 168 | border: 0px; 169 | } 170 | 171 | #copyrights { 172 | margin-bottom: 20px; 173 | } 174 | 175 | a:link { 176 | color: white; 177 | text-shadow: white 1px 0 5px; 178 | text-decoration: none; 179 | } 180 | 181 | a, a:link, a:visited { 182 | color: rgb(114, 39, 82); 183 | text-decoration: none; 184 | } 185 | 186 | a:hover { 187 | color: white; 188 | text-shadow: white 1px 0 5px; 189 | text-decoration: none; 190 | } 191 | 192 | a:active { 193 | color: white; 194 | text-decoration: none; 195 | } 196 | 197 | .webLinks { 198 | background-color: rgb(43, 38, 101); 199 | margin: 20px 20px 10px 20px; 200 | width: 70px; 201 | display: flex; 202 | justify-content: center; 203 | border: 2px ridge rgb(43, 38, 101); 204 | } 205 | 206 | -------------------------------------------------------------------------------- /style1.css: -------------------------------------------------------------------------------- 1 | /* Box Model Hack */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* Clear fix hack */ 7 | .clearfix:after { 8 | content: "."; 9 | display: block; 10 | clear: both; 11 | visibility: hidden; 12 | line-height: 0; 13 | height: 0; 14 | } 15 | 16 | .clear { 17 | clear: both; 18 | } 19 | 20 | /****************************************** 21 | /* BASE STYLES 22 | /*******************************************/ 23 | 24 | html { 25 | /* height: 800px; */ 26 | background-image: url('bkimage4.jpg'); 27 | background-size: cover; 28 | background-position: center center; 29 | color: white; 30 | } 31 | 32 | main { 33 | display: flex; 34 | justify-content: center; 35 | } 36 | 37 | body { 38 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 39 | /* 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */ 40 | } 41 | 42 | a:link { 43 | color: white; 44 | } 45 | 46 | a:visited { 47 | color: white; 48 | } 49 | 50 | a:hover { 51 | color: white; 52 | } 53 | 54 | a:active{ 55 | color: white; 56 | } 57 | 58 | a#start-button:hover { 59 | background-color: white; 60 | } 61 | 62 | /* =========================================== HEADER CONTENT */ 63 | 64 | header { 65 | width: 100%; 66 | /* height: 50px; */ 67 | /* margin-bottom: 40px; 68 | padding: 5px; */ 69 | border: none; 70 | list-style: none; 71 | /* clear: both; */ 72 | display: flex; 73 | justify-content: center; 74 | } 75 | 76 | #titleDiv { 77 | /* padding: 10px 0px, 10px, 0px; 78 | margin: 0px, 20px, 0px, 20px; */ 79 | /* background-color: rgb(4, 0, 44); 80 | border: 2px ridge rgb(184,69, 178); 81 | border-radius: 10px; */ 82 | /* position: relative; */ 83 | 84 | /* height: 50px; 85 | width: 308px; 86 | float: left; 87 | display: flex; 88 | justify-content: center; */ 89 | } 90 | 91 | #pageSelector { 92 | /* padding: 0px 0px 40px 0px; */ 93 | /* background-color: rgb(135, 193, 227); */ 94 | /* border: 2px ridge rgb(184,69, 178); */ 95 | /* border-radius: 10px; */ 96 | /* position: relative; */ 97 | /* float: left; 98 | display: flex; 99 | justify-content: center; */ 100 | 101 | 102 | /* height: 20px; 103 | width: 80px; */ 104 | } 105 | 106 | header div { 107 | width: 508px; 108 | margin: 20px 0px 30px 0px; 109 | flex: left; 110 | display: flex; 111 | justify-content: space-between; 112 | } 113 | 114 | #titleLinks { 115 | padding: 0px; 116 | margin: 0px; 117 | border: 0px; 118 | display: flex; 119 | justify-content: space-between; 120 | } 121 | 122 | 123 | /* ============================================ BEGINNING OF MAIN CONTENT */ 124 | 125 | #buttons { 126 | width: 188; 127 | margin: 5px; 128 | display: flex; 129 | justify-content: space-between; 130 | } 131 | 132 | #start-button { 133 | padding: 0px; 134 | margin: 0px; 135 | background-color: rgba(135, 193, 227, .9); 136 | border: 3px ridge rgb(135, 193, 227); 137 | height: 40px; 138 | width: 50px; 139 | } 140 | 141 | #restart-btn { 142 | padding: 0px; 143 | margin: 0px; 144 | background-color: rgba(135, 193, 227, .9); 145 | border: 3px ridge rgb(135, 193, 227); 146 | height: 40px; 147 | width: 50px; 148 | } 149 | /* #musicBox { 150 | height: 55px; 151 | width: 55px; 152 | } */ 153 | 154 | #musicBtn { 155 | padding: 0px; 156 | margin: 0px; 157 | background-color: rgba(135, 193, 227, .9); 158 | border: 3px ridge rgb(135, 193, 227); 159 | height: 40px; 160 | width: 50px; 161 | } 162 | /* 163 | #bigTitleBox { 164 | background-color: rgb(4, 0, 44); 165 | width: 184px; 166 | height: 80px; 167 | border: 2px ridge rgb(184,69, 178); 168 | padding-top: 20px; 169 | text-align: center; 170 | float: left; 171 | display: flex; 172 | justify-content: center; 173 | }*/ 174 | 175 | .fallingBlockGrid{ 176 | background-color: rgba(4, 0, 44, .98);/*#0F3442;*/ 177 | width: 308px; 178 | height: 608px; 179 | border: 3px ridge rgb(135, 193, 227); 180 | /* background-color: yellow; */ 181 | display: flex; /*these two wrap the divs so they fit into their parent */ 182 | flex-wrap: wrap; 183 | /* margin: 0px 0px, 50px, 0px; */ 184 | } 185 | 186 | .fallingBlockGrid > div { 187 | /* border: 5px ridge rgb(155,190, 220); 188 | border-radius: 5px; */ 189 | height: 30px; 190 | width: 30px; 191 | /* border: .5px solid #144457; */ 192 | } 193 | 194 | .tetros { 195 | /* background-color: red; */ 196 | border: 1px ridge rgb(184,69, 178);; 197 | /* border-style: inset; 198 | /* -moz-box-shadow: 2px 2px 8px 2px rgba(165,165,165,1); */ 199 | border-radius: 5px; 200 | } 201 | 202 | .taken { 203 | border: 0px; 204 | /* background-color: red; */ 205 | } 206 | 207 | /* #nextHeader { 208 | background-color: rgb(4, 0, 44); 209 | width: 184px; 210 | height: 44px; 211 | border: 2px ridge rgb(184,69, 178); 212 | border-style: groove; 213 | text-align: center; 214 | float: left; 215 | display: flex; 216 | justify-content: center; 217 | border-radius: 5px 5px 0px 0px; 218 | } */ 219 | 220 | #nextBox { 221 | padding: 0px 0px 0px 0px; 222 | margin: 0px 0px 0px 0px; 223 | } 224 | 225 | .next-block { /*aka mini-grid */ 226 | width: 184px; 227 | height: 184px; 228 | flex-wrap: wrap; 229 | display: flex; 230 | border: 2px ridge rgb(184,69, 178); 231 | background-color: rgb(4, 0, 44); 232 | } 233 | 234 | .next-block div { 235 | height: 30px; 236 | width: 30px; 237 | /* border: 2px ridge rgb(184,69, 178); */ 238 | } 239 | 240 | #titleBoxes { 241 | background-color: rgba(4, 0, 44, .8); 242 | width: 184px; 243 | height: 44px; 244 | border: 4px ridge rgb(184,69, 178); 245 | /* text-align: center; */ 246 | float: left; 247 | display: flex; 248 | justify-content: left; 249 | border-radius: 5px 5px 0px 0px; 250 | margin-bottom: 0px; 251 | padding: 10px 10px 10px 7px; 252 | /* padding: 0px 0px 70px 0px; */ 253 | } 254 | 255 | 256 | #lowerBoxes { 257 | background-color: rgba(4, 0, 44, .7); 258 | width: 184px; 259 | height: 84px; 260 | border: 4px ridge rgb(184,69, 178); 261 | float: left; 262 | display: flex; 263 | justify-content: center; 264 | } 265 | 266 | /* #compBox { 267 | display: flex; 268 | align-items: flex-end; 269 | } */ 270 | 271 | section { 272 | margin: 20px; 273 | } 274 | 275 | /* footer { 276 | padding: 30px; 277 | } */ 278 | 279 | footer div { 280 | font-size: 11px; 281 | display: flex; 282 | justify-content: center; 283 | color: rgb(114, 71, 108); 284 | } 285 | 286 | a:link { 287 | color: white; 288 | text-shadow: white 1px 0 5px; 289 | } 290 | 291 | a, a:link, a:visited { 292 | color: rgb(114, 39, 82); 293 | } 294 | 295 | a:hover { 296 | color: white; 297 | text-shadow: white 1px 0 5px; 298 | } 299 | 300 | a:active { 301 | color: white; 302 | } 303 | 304 | a.musicBox:hover { 305 | border: 3px ridge rgb(135, 193, 227); 306 | transition: 0.7s; 307 | } 308 | 309 | #webLinks { 310 | background-color: rgb(43, 38, 101); 311 | margin: 30px 20px 10px 20px; 312 | width: 50px; 313 | display: flex; 314 | justify-content: center; 315 | border: 2px ridge rgb(43, 38, 101); 316 | } -------------------------------------------------------------------------------- /style2.css: -------------------------------------------------------------------------------- 1 | /* Box Model Hack */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* Clear fix hack */ 7 | .clearfix:after { 8 | content: "."; 9 | display: block; 10 | clear: both; 11 | visibility: hidden; 12 | line-height: 0; 13 | height: 0; 14 | } 15 | 16 | .clear { 17 | clear: both; 18 | } 19 | 20 | /****************************************** 21 | /* BASE STYLES 22 | /*******************************************/ 23 | 24 | html { 25 | /* height: 800px; */ 26 | background-image: url('bkimage4.jpg'); 27 | background-size: cover; 28 | background-position: center center; 29 | color: white; 30 | } 31 | 32 | main { 33 | display: flex; 34 | justify-content: center; 35 | } 36 | 37 | body { 38 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 39 | /* 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */ 40 | } 41 | 42 | a:link { 43 | color: white; 44 | } 45 | 46 | a:visited { 47 | color: white; 48 | } 49 | 50 | a:hover { 51 | color: white; 52 | } 53 | 54 | a:active{ 55 | color: white; 56 | } 57 | 58 | a#start-button:hover { 59 | background-color: white; 60 | } 61 | 62 | /* =========================================== HEADER CONTENT */ 63 | 64 | header { 65 | width: 100%; 66 | /* height: 50px; */ 67 | /* margin-bottom: 40px; 68 | padding: 5px; */ 69 | border: none; 70 | list-style: none; 71 | /* clear: both; */ 72 | display: flex; 73 | justify-content: center; 74 | } 75 | 76 | #titleDiv { 77 | /* padding: 10px 0px, 10px, 0px; 78 | margin: 0px, 20px, 0px, 20px; */ 79 | /* background-color: rgb(4, 0, 44); 80 | border: 2px ridge rgb(184,69, 178); 81 | border-radius: 10px; */ 82 | /* position: relative; */ 83 | 84 | /* height: 50px; 85 | width: 308px; 86 | float: left; 87 | display: flex; 88 | justify-content: center; */ 89 | } 90 | 91 | #pageSelector { 92 | /* padding: 0px 0px 40px 0px; */ 93 | /* background-color: rgb(135, 193, 227); */ 94 | /* border: 2px ridge rgb(184,69, 178); */ 95 | /* border-radius: 10px; */ 96 | /* position: relative; */ 97 | /* float: left; 98 | display: flex; 99 | justify-content: center; */ 100 | 101 | 102 | /* height: 20px; 103 | width: 80px; */ 104 | } 105 | 106 | header div { 107 | width: 508px; 108 | margin: 20px 0px 30px 0px; 109 | flex: left; 110 | display: flex; 111 | justify-content: space-between; 112 | } 113 | 114 | #titleLinks { 115 | padding: 0px; 116 | margin: 0px; 117 | border: 0px; 118 | display: flex; 119 | justify-content: space-between; 120 | } 121 | 122 | 123 | /* ============================================ BEGINNING OF MAIN CONTENT */ 124 | 125 | #buttons { 126 | width: 188; 127 | margin: 5px; 128 | display: flex; 129 | justify-content: space-between; 130 | } 131 | 132 | #start-button { 133 | padding: 0px; 134 | margin: 0px; 135 | background-color: rgba(135, 193, 227, .9); 136 | border: 3px ridge rgb(135, 193, 227); 137 | height: 40px; 138 | width: 50px; 139 | } 140 | 141 | #restart-btn { 142 | padding: 0px; 143 | margin: 0px; 144 | background-color: rgba(135, 193, 227, .9); 145 | border: 3px ridge rgb(135, 193, 227); 146 | height: 40px; 147 | width: 50px; 148 | } 149 | /* #musicBox { 150 | height: 55px; 151 | width: 55px; 152 | } */ 153 | 154 | #musicBtn { 155 | padding: 0px; 156 | margin: 0px; 157 | background-color: rgba(135, 193, 227, .9); 158 | border: 3px ridge rgb(135, 193, 227); 159 | height: 40px; 160 | width: 50px; 161 | } 162 | /* 163 | #bigTitleBox { 164 | background-color: rgb(4, 0, 44); 165 | width: 184px; 166 | height: 80px; 167 | border: 2px ridge rgb(184,69, 178); 168 | padding-top: 20px; 169 | text-align: center; 170 | float: left; 171 | display: flex; 172 | justify-content: center; 173 | }*/ 174 | 175 | .fallingBlockGrid{ 176 | background-color: rgba(4, 0, 44, .98);/*#0F3442;*/ 177 | width: 308px; 178 | height: 608px; 179 | border: 3px ridge rgb(135, 193, 227); 180 | /* background-color: yellow; */ 181 | display: flex; /*these two wrap the divs so they fit into their parent */ 182 | flex-wrap: wrap; 183 | /* margin: 0px 0px, 50px, 0px; */ 184 | } 185 | 186 | .fallingBlockGrid > div { 187 | /* border: 5px ridge rgb(155,190, 220); 188 | border-radius: 5px; */ 189 | height: 30px; 190 | width: 30px; 191 | /* border: .5px solid #144457; */ 192 | } 193 | 194 | .tetros { 195 | /* background-color: red; */ 196 | border: 1px ridge rgb(184,69, 178);; 197 | /* border-style: inset; 198 | /* -moz-box-shadow: 2px 2px 8px 2px rgba(165,165,165,1); */ 199 | border-radius: 5px; 200 | } 201 | 202 | .taken { 203 | border: 0px; 204 | /* background-color: red; */ 205 | } 206 | 207 | /* #nextHeader { 208 | background-color: rgb(4, 0, 44); 209 | width: 184px; 210 | height: 44px; 211 | border: 2px ridge rgb(184,69, 178); 212 | border-style: groove; 213 | text-align: center; 214 | float: left; 215 | display: flex; 216 | justify-content: center; 217 | border-radius: 5px 5px 0px 0px; 218 | } */ 219 | 220 | #nextBox { 221 | padding: 0px; 222 | } 223 | 224 | .next-block { /*aka mini-grid */ 225 | width: 184px; 226 | height: 184px; 227 | flex-wrap: wrap; 228 | display: flex; 229 | border: 2px ridge rgb(184,69, 178); 230 | background-color: rgb(4, 0, 44); 231 | } 232 | 233 | .next-block div { 234 | height: 30px; 235 | width: 30px; 236 | /* border: 2px ridge rgb(184,69, 178); */ 237 | } 238 | 239 | #titleBoxes { 240 | background-color: rgba(4, 0, 44, .8); 241 | width: 184px; 242 | height: 44px; 243 | border: 4px ridge rgb(184,69, 178); 244 | /* text-align: center; */ 245 | float: left; 246 | display: flex; 247 | justify-content: left; 248 | border-radius: 5px 5px 0px 0px; 249 | margin-bottom: 0px; 250 | padding: 10px 10px 10px 7px; 251 | /* padding: 0px 0px 70px 0px; */ 252 | } 253 | 254 | 255 | #lowerBoxes { 256 | background-color: rgba(4, 0, 44, .7); 257 | width: 184px; 258 | height: 84px; 259 | border: 4px ridge rgb(184,69, 178); 260 | float: left; 261 | display: flex; 262 | justify-content: center; 263 | } 264 | 265 | /* #compBox { 266 | display: flex; 267 | align-items: flex-end; 268 | } */ 269 | 270 | section { 271 | margin: 20px; 272 | } 273 | 274 | /* footer { 275 | padding: 30px; 276 | } */ 277 | 278 | footer div { 279 | font-size: 11px; 280 | display: flex; 281 | justify-content: center; 282 | color: rgb(114, 71, 108); 283 | } 284 | 285 | a:link { 286 | color: white; 287 | text-shadow: white 1px 0 5px; 288 | } 289 | 290 | a, a:link, a:visited { 291 | color: rgb(114, 39, 82); 292 | } 293 | 294 | a:hover { 295 | color: white; 296 | text-shadow: white 1px 0 5px; 297 | } 298 | 299 | a:active { 300 | color: white; 301 | } 302 | 303 | a.musicBox:hover { 304 | border: 3px ridge rgb(135, 193, 227); 305 | transition: 0.7s; 306 | } 307 | 308 | #webLinks { 309 | background-color: rgb(43, 38, 101); 310 | margin: 60px 20px 10px 20px; 311 | width: 50px; 312 | display: flex; 313 | justify-content: center; 314 | border: 2px ridge rgb(43, 38, 101); 315 | } -------------------------------------------------------------------------------- /tetrisLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/tetrisLogo.png -------------------------------------------------------------------------------- /tetrisLogoBig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Notesmane/Tetris-Project/f8c88d7d79e861e59aa1d6149c1d107546192769/tetrisLogoBig.png -------------------------------------------------------------------------------- /wiredfram.drawio: -------------------------------------------------------------------------------- 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 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | --------------------------------------------------------------------------------