From 642a509470771900c8b3a3396b03410fc3239742 Mon Sep 17 00:00:00 2001 From: lightify Date: Tue, 14 Apr 2020 17:37:41 +0500 Subject: [PATCH] Very basic refactor of HTML/CSS and JS. Yes, I removed vendor prefixes from css. We are using flexbox without prefixes. Don't think we need them for border radius, etc. Still a lot to be done though. We are now responding to 'keydown' event as opposed to 'keyup' which lacked the classic tetris behaviour of running the tetris down if the button is kept pressed. TODO: There is a bug to be fixed. When a tetromino is rotated at the edge of the grid it wraps to next row. --- css/style.css | 318 ++++++++++++++++++++++---------------------------- index.html | 301 +++++++---------------------------------------- js/app.js | 142 +++++++++++++--------- 3 files changed, 263 insertions(+), 498 deletions(-) diff --git a/css/style.css b/css/style.css index b6d830e..3481bf5 100644 --- a/css/style.css +++ b/css/style.css @@ -1,105 +1,98 @@ -* { - box-sizing: border-box; +:root { + /* default font size in browsers is 16px = 1em, we make + things easier for us and make 10px our base size. + We have 10/16 = 0.625 = 1rem as it is set on root element. + So 1rem is now 10px throughout our stylesheet.*/ + font-size: 0.625em; } -header { -text-align: center; -margin-top: 30px; +* { + box-sizing: border-box; } body { + font-family: "Montserrat", sans-serif; + font-size: 1.6rem; margin: auto; - max-width: 600px; - background: radial-gradient(circle, rgba(175,196,174,1) 0%, rgba(104,204,191,1) 89%, rgba(94,191,178,1) 100%); + max-width: 60rem; + color: #d8edea; + background: radial-gradient( + circle, + rgba(175, 196, 174, 1) 0%, + rgba(104, 204, 191, 1) 89%, + rgba(94, 191, 178, 1) 100% + ); } -main { - margin: auto; - display: flex; - justify-content: center; - margin-left: 60px; - margin-top: 0px; +header { + text-align: center; + margin-top: 3rem; } div { - height: 20px; - width: 20px; + height: 2rem; + width: 2rem; } -h1 { - font-family: 'Montserrat', sans-serif; +/* some utility classes */ +.t-ucase { text-transform: uppercase; - font-size: 50px; - letter-spacing: 15px; - font-weight: 300; - color: #d8edea; } -h2 { - font-family: 'Montserrat', sans-serif; - text-transform: uppercase; - letter-spacing: 10px; - font-size: 15px; - font-weight: 300; - color: #d8edea; +.t-big { + font-size: 1.5em; } -h3 { - text-align: center; - font-family: 'Montserrat', sans-serif; - text-transform: uppercase; - font-size: 10px; - font-weight: 300; - color: #d8edea; - margin-top: 100px; - margin-left: -60px; +.t-wide { + letter-spacing: 1.5rem; } -.score-display { - font-family: 'Montserrat', sans-serif; - text-transform: uppercase; - font-size: 50px; - letter-spacing: 2px; - font-weight:300; - color: rgb(133,121,107,0.5); - padding-left: 0px; - padding-bottom: 0px; - margin-bottom: 20px; - margin-top: 15px; - padding-top: 0px; +.t-close { + letter-spacing: 1rem; } +.fw-300 { + font-weight: 300; +} +.fw-400 { + font-weight: 400; +} -.column-left { - width: 300px; +.score-display { + font-size: 5rem; + color: rgb(133, 121, 107, 0.5); +} + +.game-area { display: flex; justify-content: center; - display: inline; - margin-left: 60px; } - .game { + height: 0; width: 300px; } .grid { - width: 200px; - height: 400px; + display: flex; + flex-wrap: wrap; + align-items: center; + width: 20rem; + height: 40rem; } .previous-shape { - width: 100px; - margin-left: 57px; + width: 10rem; + padding-left: 2rem; + margin-top: -5rem; } .previous-grid { - width:80px; - height: 80px; display: flex; flex-wrap: wrap; - width: 80px; + width: 8rem; + height: 8rem; } .block { @@ -122,123 +115,88 @@ h3 { background-image: url(../images/pink_block.png); } -.grid { - margin-top: 10px; - display: flex; - flex-wrap: wrap; - width: 200px; -} - .end { background-color: #d8edea; } - .button { - position: relative; - width:220px; - height:22px; - text-align:center; - color:#FFF; - text-transform: uppercase; + position: relative; + width: 22rem; + height: 2.2rem; + text-align: center; + color: #fff; letter-spacing: 1px; - text-decoration:none; - line-height:23px; - font-family: 'Montserrat', sans-serif; + text-decoration: none; + line-height: 23px; font-size: 10px; - display: block; - margin: 30px; - text-shadow:-1px -1px 0 #A84155; - background: #D25068; - border:1px solid #D25068; - width: 120px; - - background-image:-webkit-linear-gradient(top, #F66C7B, #D25068); - background-image:-moz-linear-gradient(top, #F66C7B, #D25068); - background-image:-ms-linear-gradient(top, #F66C7B, #D25068); - background-image:-o-linear-gradient(top, #F66C7B, #D25068); - background-image:linear-gradient(to bottom, #F66C7B, #D25068); - - -webkit-border-radius:5px; - -moz-border-radius:5px; - border-radius:5px; - - -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); - -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); - box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); + display: block; + margin: 30px; + text-shadow: -1px -1px 0 #a84155; + background: #d25068; + border: 1px solid #d25068; + width: 12rem; + background-image: linear-gradient(to bottom, #f66c7b, #d25068); + border-radius: 5px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, + 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #ad4257, + 0 4px 2px rgba(0, 0, 0, 0.5); } -.button:before { - background:#f0f0f0; - background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0)); - - -webkit-border-radius:5px; - -moz-border-radius:5px; - border-radius:5px; - - -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; - -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; - box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; - position: absolute; - content: ""; - left: -6px; right: -6px; - top: -6px; bottom: -10px; - z-index: -1; +.button:before { + background: #f0f0f0; + background-image: linear-gradient(#d0d0d0, #f0f0f0); + border-radius: 5px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; + position: absolute; + content: ""; + left: -6px; + right: -6px; + top: -6px; + bottom: -10px; + z-index: -1; } .button:active { - -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; - top:5px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, + 0 -1px 0 rgba(255, 255, 255, 0.1) inset; + top: 5px; } -.button:active:before{ - top: -11px; - bottom: -5px; - content: ""; + +.button:active:before { + top: -11px; + bottom: -5px; + content: ""; } .button:hover { - background: #F66C7B; - background-image:-webkit-linear-gradient(top, #D25068, #F66C7B); - background-image:-moz-linear-gradient(top, #D25068, #F66C7B); - background-image:-ms-linear-gradient(top, #D25068, #F66C7B); - background-image:-o-linear-gradient(top, #D25068, #F66C7B); - background-image:linear-gradient(top, #D25068, #F66C7B); + background: #f66c7b; + background-image: linear-gradient(top, #d25068, #f66c7b); } .end { - background-image: url(/Users/limit/development/Tetris/images/blue_block.png) + background-image: url(/Users/limit/development/Tetris/images/blue_block.png); } .display { -text-align: center; -width: 175px; -height: 250px; -background:#f0f0f0; -background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0)); - --webkit-border-radius:5px; --moz-border-radius:5px; -border-radius:5px; - --webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; --moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; -box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; -} - -.score{ - padding-top: 15px; - letter-spacing: 1px; - font-size: 12px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + text-align: center; + margin-top: 1rem; + width: 17.5rem; + height: 25rem; + background: #f0f0f0; + background-image: linear-gradient(#d0d0d0, #f0f0f0); + border-radius: 5px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; color: #85796b; - padding-bottom: 0px; - margin-bottom: 0px; } +.score, .lines-display { - letter-spacing: 1px; - font-size: 12px; - color: #85796b; - margin-left: -60px; + padding-top: 1rem; + font-size: 1.2rem; } /*menu*/ @@ -249,8 +207,9 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; overflow: hidden; } -.btn:hover { opacity: 0.7; } - +.btn:hover { + opacity: 0.7; +} /* START of MENU STYLING */ .menu-wrap { @@ -278,7 +237,7 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; z-index: 1; display: flex; width: 40px; - height:40px; + height: 40px; padding: 1rem; background: rgba(13, 110, 139, 0.75); align-items: center; @@ -307,15 +266,18 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; width: 100%; height: 2px; background: inherit; - content: ''; + content: ""; } /* Moves Line Down */ -.menu-wrap .hamburger > div:after { top: 7px; } +.menu-wrap .hamburger > div:after { + top: 7px; +} /* Toggler Animation */ -.menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); } - +.menu-wrap .toggler:checked + .hamburger > div { + transform: rotate(135deg); +} /* Turns Lines Into X */ .menu-wrap .toggler:checked + .hamburger > div:before, @@ -325,8 +287,9 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; } /* Rotate On Hover When Checked */ -.menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); } - +.menu-wrap .toggler:checked:hover + .hamburger > div { + transform: rotate(225deg); +} .menu { display: flex; @@ -342,34 +305,27 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; } .menu-content { - text-align: center; - width: 600px; - align-items: center; - margin-top: 230px; - justify-content: center; - width: 200vw; - height: 200vh; - border-radius: 50%; - transition: all 0.8s ease; - + text-align: center; + width: 600px; + align-items: center; + margin-top: 230px; + justify-content: center; + width: 200vw; + height: 200vh; + border-radius: 50%; + transition: all 0.8s ease; } -p { - font-family: 'Montserrat', sans-serif; +.rules { font-size: 12px; - font-weight: 300; - color: #d8edea; transition: color 0.4s ease; } -.bold { - color: #f8de7e; +.key { + color: #f8de7e; } .close { - border-style: none; border-radius: 5px; - font-family: 'Montserrat', sans-serif; - font-weight: 400; - color:rgba(24, 39, 51, 0.85); + color: rgba(24, 39, 51, 0.85); } diff --git a/index.html b/index.html index d211923..616aa7c 100644 --- a/index.html +++ b/index.html @@ -1,272 +1,49 @@ - - - Tetris! - - - - - -
- -
-
+ + + + Tetris! + + + + + + +
+ +
+
+
+
-

rules

-

Please use the UP key to rotate your tetromino, and LEFT and RIGHT to
move across the board. Pressing DOWN will speed up the tetromino.

- +

rules

+

Please use the UP key to rotate your tetromino, and LEFT + and RIGHT to
move across the board. Pressing DOWN will speed up the + tetromino.

+
+
-
-
-

Welcome

-

to tetris

-
-
+
+

Welcome
to tetris

+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-

Your Score

-

0

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+

Your Score
0

+
+
-

Lines:

+

Lines:0

-
- -

made with love 2019

+ + made with love 2019
-
- - +
+ + + \ No newline at end of file diff --git a/js/app.js b/js/app.js index f96a63c..c4d6503 100644 --- a/js/app.js +++ b/js/app.js @@ -1,5 +1,11 @@ document.addEventListener('DOMContentLoaded', () => { - const grid = document.querySelector('.grid') + // TODO: we can also get the grid size from user + const GRID_WIDTH = 10 + const GRID_HEIGHT = 20 + const GRID_SIZE = GRID_WIDTH * GRID_HEIGHT + + // no need to type 200 divs :) + const grid = createGrid(); let squares = Array.from(grid.querySelectorAll('div')) const startBtn = document.querySelector('.button') const hamburgerBtn = document.querySelector('.toggler') @@ -22,69 +28,96 @@ document.addEventListener('DOMContentLoaded', () => { 'url(images/yellow_block.png)' ] + + function createGrid() { + // the main grid + let grid = document.querySelector(".grid") + for (let i = 0; i < GRID_SIZE; i++) { + let gridElement = document.createElement("div") + grid.appendChild(gridElement) + } + + // set base of grid + for (let i = 0; i < GRID_WIDTH; i++) { + let gridElement = document.createElement("div") + gridElement.setAttribute("class", "block3") + grid.appendChild(gridElement) + } + + let previousGrid = document.querySelector(".previous-grid") + // Since 16 is the max grid size in which all the Tetrominoes + // can fit in we create one here + for (let i = 0; i < 16; i++) { + let gridElement = document.createElement("div") + previousGrid.appendChild(gridElement); + } + return grid; + } + + //assign functions to keycodes function control(e) { - if(e.keyCode === 39) { + if (e.keyCode === 39) moveright() - } else if (e.keyCode ===38) { + else if (e.keyCode === 38) rotate() - } else if (e.keyCode ===37) { + else if (e.keyCode === 37) moveleft() - } else if (e.keyCode === 40) { + else if (e.keyCode === 40) moveDown() - } } - document.addEventListener('keyup', control) + + // the classical behavior is to speed up the block if down button is kept pressed so doing that + document.addEventListener('keydown', control) //The Tetrominoes const lTetromino = [ - [1,width+1,width*2+1,2], - [width,width+1,width+2,width*2+2], - [1,width+1,width*2+1,width*2], - [width,width*2,width*2+1,width*2+2] + [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, 2], + [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 2], + [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2], + [GRID_WIDTH, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2 + 2] ] const zTetromino = [ - [0,width,width+1,width*2+1], - [width+1, width+2,width*2,width*2+1], - [0,width,width+1,width*2+1], - [width+1, width+2,width*2,width*2+1] + [0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1], + [GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1], + [0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1], + [GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1] ] const tTetromino = [ - [1,width,width+1,width+2], - [1,width+1,width+2,width*2+1], - [width,width+1,width+2,width*2+1], - [1,width,width+1,width*2+1] + [1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2], + [1, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1], + [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1], + [1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1] ] const oTetromino = [ - [0,1,width,width+1], - [0,1,width,width+1], - [0,1,width,width+1], - [0,1,width,width+1] + [0, 1, GRID_WIDTH, GRID_WIDTH + 1], + [0, 1, GRID_WIDTH, GRID_WIDTH + 1], + [0, 1, GRID_WIDTH, GRID_WIDTH + 1], + [0, 1, GRID_WIDTH, GRID_WIDTH + 1] ] const iTetromino = [ - [1,width+1,width*2+1,width*3+1], - [width,width+1,width+2,width+3], - [1,width+1,width*2+1,width*3+1], - [width,width+1,width+2,width+3] + [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1], + [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3], + [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1], + [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3] ] const theTetrominoes = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino] //Randomly Select Tetromino - let random = Math.floor(Math.random()*theTetrominoes.length) + let random = Math.floor(Math.random() * theTetrominoes.length) let current = theTetrominoes[random][currentRotation] //move the Tetromino moveDown let currentPosition = 4 - //draw the shape function draw() { - current.forEach( index => { + current.forEach(index => { squares[currentPosition + index].classList.add('block') squares[currentPosition + index].style.backgroundImage = colors[random] }) @@ -92,10 +125,9 @@ document.addEventListener('DOMContentLoaded', () => { //undraw the shape function undraw() { - current.forEach( index => { + current.forEach(index => { squares[currentPosition + index].classList.remove('block') squares[currentPosition + index].style.backgroundImage = 'none' - }) } @@ -108,13 +140,13 @@ document.addEventListener('DOMContentLoaded', () => { } startBtn.addEventListener('click', () => { - if(timerId) { + if (timerId) { clearInterval(timerId) timerId = null } else { draw() timerId = setInterval(moveDown, 1000) - nextRandom = Math.floor(Math.random()*theTetrominoes.length) + nextRandom = Math.floor(Math.random() * theTetrominoes.length) displayShape() } }) @@ -123,8 +155,8 @@ document.addEventListener('DOMContentLoaded', () => { function moveright() { undraw() const isAtRightEdge = current.some(index => (currentPosition + index) % width === width - 1) - if(!isAtRightEdge) currentPosition += 1 - if(current.some(index => squares[currentPosition + index].classList.contains('block2'))) { + if (!isAtRightEdge) currentPosition += 1 + if (current.some(index => squares[currentPosition + index].classList.contains('block2'))) { currentPosition -= 1 } draw() @@ -134,8 +166,8 @@ document.addEventListener('DOMContentLoaded', () => { function moveleft() { undraw() const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0) - if(!isAtLeftEdge) currentPosition -= 1 - if(current.some(index => squares[currentPosition + index].classList.contains('block2'))) { + if (!isAtLeftEdge) currentPosition -= 1 + if (current.some(index => squares[currentPosition + index].classList.contains('block2'))) { currentPosition += 1 } draw() @@ -144,7 +176,7 @@ document.addEventListener('DOMContentLoaded', () => { //freeze the shape function freeze() { // if block has settled - if(current.some(index => squares[currentPosition + index + width].classList.contains('block3') || squares[currentPosition + index + width].classList.contains('block2'))) { + if (current.some(index => squares[currentPosition + index + width].classList.contains('block3') || squares[currentPosition + index + width].classList.contains('block2'))) { // make it block2 current.forEach(index => squares[index + currentPosition].classList.add('block2')) // start a new tetromino falling @@ -163,9 +195,9 @@ document.addEventListener('DOMContentLoaded', () => { //Rotate the Tetromino function rotate() { undraw() - currentRotation ++ - if(currentRotation === current.length) { - currentRotation=0 + currentRotation++ + if (currentRotation === current.length) { + currentRotation = 0 } current = theTetrominoes[random][currentRotation] draw() @@ -173,7 +205,7 @@ document.addEventListener('DOMContentLoaded', () => { //Game Over function gameOver() { - if(current.some(index => squares[currentPosition + index].classList.contains('block2'))) { + if (current.some(index => squares[currentPosition + index].classList.contains('block2'))) { scoreDisplay.innerHTML = 'end' clearInterval(timerId) } @@ -185,11 +217,11 @@ document.addEventListener('DOMContentLoaded', () => { let displayIndex = 0 const smallTetrominoes = [ - [1,displayWidth+1,displayWidth*2+1,2], /* lTetromino */ - [0,displayWidth,displayWidth+1,displayWidth*2+1], /* zTetromino */ - [1,displayWidth,displayWidth+1,displayWidth+2], /* tTetromino */ - [0,1,displayWidth,displayWidth+1], /* oTetromino */ - [1,displayWidth+1,displayWidth*2+1,displayWidth*3+1] /* iTetromino */ + [1, displayWidth + 1, displayWidth * 2 + 1, 2], /* lTetromino */ + [0, displayWidth, displayWidth + 1, displayWidth * 2 + 1], /* zTetromino */ + [1, displayWidth, displayWidth + 1, displayWidth + 2], /* tTetromino */ + [0, 1, displayWidth, displayWidth + 1], /* oTetromino */ + [1, displayWidth + 1, displayWidth * 2 + 1, displayWidth * 3 + 1] /* iTetromino */ ] function displayShape() { @@ -197,7 +229,7 @@ document.addEventListener('DOMContentLoaded', () => { square.classList.remove('block') square.style.backgroundImage = 'none' }) - smallTetrominoes[nextRandom].forEach( index => { + smallTetrominoes[nextRandom].forEach(index => { displaySquares[displayIndex + index].classList.add('block') displaySquares[displayIndex + index].style.backgroundImage = colors[nextRandom] }) @@ -205,11 +237,11 @@ document.addEventListener('DOMContentLoaded', () => { //Add score function addScore() { - for (currentIndex = 0; currentIndex < 199;currentIndex += width) { - const row = [currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9] - if(row.every(index => squares[index].classList.contains('block2'))) { + for (currentIndex = 0; currentIndex < GRID_SIZE; currentIndex += GRID_WIDTH) { + const row = [currentIndex, currentIndex + 1, currentIndex + 2, currentIndex + 3, currentIndex + 4, currentIndex + 5, currentIndex + 6, currentIndex + 7, currentIndex + 8, currentIndex + 9] + if (row.every(index => squares[index].classList.contains('block2'))) { score += 10 - lines +=1 + lines += 1 scoreDisplay.innerHTML = score linesDisplay.innerHTML = lines row.forEach(index => { @@ -218,7 +250,7 @@ document.addEventListener('DOMContentLoaded', () => { }) //splice array - const squaresRemoved = squares.splice(currentIndex,width) + const squaresRemoved = squares.splice(currentIndex, width) squares = squaresRemoved.concat(squares) squares.forEach(cell => grid.appendChild(cell)) } @@ -233,4 +265,4 @@ document.addEventListener('DOMContentLoaded', () => { menu.style.display = 'none' }) -}) +}) \ No newline at end of file