From 6282a9c3f2aa043de7559be0739f5326c6702770 Mon Sep 17 00:00:00 2001 From: Ania Kubow Date: Wed, 17 Jul 2019 18:03:52 +0100 Subject: [PATCH] menu added --- css/style.css | 160 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 10 ++++ js/app.js | 1 - js/app2.js | 25 +++++--- 4 files changed, 183 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index a57eda2..c5acf09 100644 --- a/css/style.css +++ b/css/style.css @@ -8,18 +8,17 @@ margin-top: 30px; } body { + margin: auto; max-width: 600px; - display: inline-block; background: radial-gradient(circle, rgba(175,196,174,1) 0%, rgba(104,204,191,1) 89%, rgba(94,191,178,1) 100%); - margin-left: 100px; - } main { - margin: 0; + margin: auto; display: flex; justify-content: center; - margin: 30px; + margin-left: 60px; + margin-top: 0px; } div { @@ -62,6 +61,7 @@ h2 { display: flex; justify-content: center; display: inline; + margin-left: 60px; } @@ -241,3 +241,153 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; font-size: 12px; color: #85796b; } + +/*menu*/ + +:root { + --primary-color: rgba(13, 110, 139, 0.75); + --secondary-color: rgba(229, 148, 0, 0.9); + --overlay-color: rgba(24, 39, 51, 0.85); + --menu-speed: 0.75s; +} + + +.container { + max-width: 600px; + padding: 0 3rem; + margin: auto; + overflow: hidden; +} + +.btn:hover { opacity: 0.7; } + + +/* START of MENU STYLING */ +.menu-wrap { + position: fixed; + top: 0; + left: 0; + z-index: 1; +} + +.menu-wrap .toggler { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 50px; + height: 50px; + opacity: 0; + cursor: pointer; +} + +.menu-wrap .hamburger { + position: absolute; + top: 0; + left: 0; + z-index: 1; + display: flex; + width: 40px; + height:40px; + padding: 1rem; + background: var(--primary-color); + align-items: center; + justify-content: center; +} + +/* Hamburger Line */ +.menu-wrap .hamburger > div { + position: relative; + display: flex; + width: 150%; + height: 2px; + background: #fff; + flex: none; + align-items: center; + justify-content: center; + transition: all 0.4s ease; +} + +/* Hamburger Lines - Top & Bottom */ +.menu-wrap .hamburger > div:before, +.menu-wrap .hamburger > div:after { + position: absolute; + top: -7px; + z-index: 1; + width: 100%; + height: 2px; + background: inherit; + content: ''; +} + +/* Moves Line Down */ +.menu-wrap .hamburger > div:after { top: 7px; } + +/* Toggler Animation */ +.menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); } + + +/* Turns Lines Into X */ +.menu-wrap .toggler:checked + .hamburger > div:before, +.menu-wrap .toggler:checked + .hamburger > div:after { + top: 0; + transform: rotate(90deg); +} + +/* Rotate On Hover When Checked */ +.menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); } + +/* Show Menu */ +.menu-wrap .toggler:checked ~ .menu { + visibility: visible; +} + +.menu-wrap .toggler:checked ~ .menu > div { + transform: scale(1); + transition-duration: var(--menu-speed); +} + +.menu-wrap .toggler:checked ~ .menu > div > div { + opacity: 1; + transition: ease 0.4s; +} + +.menu-wrap .menu { + position: fixed; + top: 0; + left: 0; + display: flex; + width: 100%; + height: 100%; + visibility: hidden; + overflow: hidden; + align-items: center; + justify-content: center; +} + +p { + font-family: 'Montserrat', sans-serif; + font-size: 12px; + font-weight: 300; + color: #d8edea; + transition: color 0.4s ease; + +} + +.bold { + color: #f8de7e; +} + +.menu-wrap .menu > div { + display: flex; + flex-direction: column; + width: 200vw; + height: 200vh; + background: var(--overlay-color); + border-radius: 50%; + flex: none; + align-items: center; + justify-content: center; + transform: scale(0); + transition: all 0.4s ease; +} diff --git a/index.html b/index.html index 95e0f18..66d7852 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,16 @@ +
+ +
+
+
+

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

diff --git a/js/app.js b/js/app.js index 3781e93..74c2711 100644 --- a/js/app.js +++ b/js/app.js @@ -7,7 +7,6 @@ document.addEventListener('DOMContentLoaded', () => { //Make the The Tetrominoes move left, right and down on the board function moveSquare(e) { - squares[currentIndex].classList.remove('block') switch(e.keyCode) { diff --git a/js/app2.js b/js/app2.js index 097cf1f..bd8ef76 100644 --- a/js/app2.js +++ b/js/app2.js @@ -6,7 +6,6 @@ document.addEventListener('DOMContentLoaded', () => { let currentIndex = 0 let currentRotation = 0 const width = 10 - // const height = 20 let score = 0 //assign functions to keycodes @@ -90,7 +89,6 @@ document.addEventListener('DOMContentLoaded', () => { //move down on loop function moveDown() { - draw() undraw() currentPosition = currentPosition += width @@ -157,10 +155,23 @@ document.addEventListener('DOMContentLoaded', () => { } //Game Over - // function gameOver() { - // if - // } - // gameOver() + function gameOver() { + if(squares[10].classList.contains('block2')) { + scoreDisplay.innerHTML = 'end' + }else if(squares[11].classList.contains('block2')) { + scoreDisplay.innerHTML = 'end' + }else if(squares[12].classList.contains('block2')) { + scoreDisplay.innerHTML = 'end' + }else if(squares[13].classList.contains('block2')) { + scoreDisplay.innerHTML = 'end' + }else if (squares[14].classList.contains('block2')) { + scoreDisplay.innerHTML = 'end' + } + + } + + + gameOver() //show previous tetromino in scoreDisplay theTetrominoes[random][currentRotation] @@ -197,12 +208,12 @@ document.addEventListener('DOMContentLoaded', () => { score += 10 scoreDisplay.innerHTML = score row.forEach(index => squares[index].classList.remove('block2') || squares[index].classList.remove('block')) + //splice array const squaresRemoved = squares.splice(currentIndex,width) console.log(currentIndex, squaresRemoved) squares = squaresRemoved.concat(squares) console.log(squares) squares.forEach(cell => grid.appendChild(cell)) - // removeLine() } } }