Skip to content

Commit

Permalink
rotation 90deg on all shapes working
Browse files Browse the repository at this point in the history
  • Loading branch information
@kubowania
kubowania committed Jul 15, 2019
1 parent 696f5f9 commit bf0f3c8
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 53 deletions.
10 changes: 10 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,16 @@ h2 {
color: #d8edea;
}

.score-display {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 50px;
letter-spacing: 15px;
font-weight:300;
color: rgb(133,121,107,0.5);
padding-left: 15px;
}

.column-left {
width: 300px;
display: flex;
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ <h1>to tetris</h1>
<section class="column-left">
<div class="display">
<h2 class="score">Your Score</h2>
<h1 class="score-display">0</h1>
</div>
<a class="button" href="#">Start</a>
</section>
Expand Down
122 changes: 69 additions & 53 deletions js/app2.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
document.addEventListener('DOMContentLoaded', () => {
const squares = document.querySelectorAll('.grid div')
const startBtn = document.querySelector('.button')
const scoreDisplay = document.querySelector('.score-display')
let currentScore = +scoreDisplay.textContent
let currentIndex = 0
const width = 10
const height = 20
Expand All @@ -9,8 +11,8 @@ document.addEventListener('DOMContentLoaded', () => {
function control(e) {
if(e.keyCode === 39) {
moveright()
// } else if (e.keyCode ===38) {
// rotate()
} else if (e.keyCode ===38) {
rotate()
} else if (e.keyCode ===37) {
moveleft()
} else if (e.keyCode === 40) {
Expand All @@ -26,8 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
const oTetromino = [0,1,width,width+1]
const iTetromino = [1,width+1,width*2+1,width*3+1]

const theTetrominoes = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino]

let theTetrominoes = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino]

//Randomly Select Tetromino
let random = Math.ceil(Math.random()*theTetrominoes.length)-1
Expand Down Expand Up @@ -65,29 +66,22 @@ document.addEventListener('DOMContentLoaded', () => {
function moveright() {
draw()
undraw()

console.log(current)
const isAtRightEdge = current.some(index => (currentPosition + index) % width === width - 1)

if(!isAtRightEdge) currentPosition += 1
//how to I stop the whole shape if ANY of the shapes Classlist are too long for the width?
draw()
}

//move right
function moveleft() {
draw()
undraw()

const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0)

if(!isAtLeftEdge) currentPosition -= 1
draw()
}

//freeze the shape
//if ANY of the tetrominos currentindexes meet a div with block in it plus width, i want to envoke freeze function and change them to classList block2. this function will change ALL tetrominos classLists into block2. it will also stop them from moving.

function freeze() {
// if block has settled
if(current.some(index => squares[currentPosition + index + width].classList.contains('block2'))) {
Expand All @@ -101,71 +95,93 @@ document.addEventListener('DOMContentLoaded', () => {
}
freeze()


//Rotate the Tetromino
const lTetromino2 = [width,width+1,width+2,width*2+2]
const zTetromino2 = [0,width,width+1,width*2+1]
const tTetromino2 = [1,width+1,width+2,width*2+1]
const oTetromino2 = [0,1,width,width+1]
const iTetromino2 = [1,width+1,width+2]
const iTetromino2 = [width,width+1,width+2,width+3]

const lTetromino3 = [width+1, width+2,width*2,width*2+1]
const zTetromino3 = [width+1,width+2,width*2,width*2+1]
const tTetromino3 = [width,width+1,width+2,width*2+1]
const oTetromino3 = [0,1,width,width+1]
const iTetromino3 = [1,width+1,width*2+1]
const iTetromino3 = [1,width+1,width*2+1,width*3+1]

const lTetromino4 = [width,width*2,width*2+1,width*2+2]
const zTetromino4 = [0,width,width+1,width*2+1]
const tTetromino4 = [1,width,width+1,width*2+1]
const oTetromino4 = [0,1,width,width+1]
const iTetromino4 = [1,width+1,width+2]
const iTetromino4 = [1,width+1,width*2+1,width*3+1]


//how to I add a number to the const chosen to return the alternative Tetromino shapes above
// function rotate() {
// draw()
// undraw()
// console.log(theTetrominoes[random])
// console.log(random)
// let current = iTetromino2
// current.forEach( index => {
// squares[currentPosition + index].classList.add('block')
// })
// console.log(current)
// if (current === lTetromino) {
// current = lTetromino2
// }
// draw()
// }


//score
let score = 0
function addScore() {
if(squares[currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9].classList.contains('block2')) {
score+= 10
removeLine()
} else if (
squares[currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9,currentIndex+10,currentIndex+11,currentIndex+12,currentIndex+13,currentIndex+14,currentIndex+15,currentIndex+16,currentIndex+17,currentIndex+18,currentIndex+19,currentIndex+20,currentIndex+21,currentIndex+22,currentIndex+23,currentIndex+24,currentIndex+25,currentIndex+26,currentIndex+27,currentIndex+28,currentIndex+29,currentIndex+30,currentIndex+31,currentIndex+32,currentIndex+33,currentIndex+34,currentIndex+35,currentIndex+36,currentIndex+37,currentIndex+38,currentIndex+39].classList.contains('block2')
) {
score+= 40
removeFourLines()
function rotate() {
draw()
undraw()
console.log(current)
if (current === lTetromino) {
current = lTetromino2
console.log(current)
current.forEach( index => {
squares[currentPosition + index].classList.add('block')
})
} if (current === zTetromino) {
current = zTetromino2
console.log(current)
current.forEach( index => {
squares[currentPosition + index].classList.add('block')
})
}if (current === tTetromino) {
current = tTetromino2
console.log(current)
current.forEach( index => {
squares[currentPosition + index].classList.add('block')
})
}if (current === oTetromino) {
current = oTetromino2
console.log(current)
current.forEach( index => {
squares[currentPosition + index].classList.add('block')
})
}if (current === iTetromino) {
current = iTetromino2
console.log(current)
current.forEach( index => {
squares[currentPosition + index].classList.add('block')
})
}
}
addScore()
console.log(score)


//Lines to remove
function removeLine () {
squares[currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9].classList.remove('block2')
draw()
}

function removeFourLines() {

}
//score
// let currentScore = 0
// function addScore() {
// if(squares[currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9].classList.contains('block2')) {
// score+= 10
// removeLine()
// } else if (
// squares[currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9,currentIndex+10,currentIndex+11,currentIndex+12,currentIndex+13,currentIndex+14,currentIndex+15,currentIndex+16,currentIndex+17,currentIndex+18,currentIndex+19,currentIndex+20,currentIndex+21,currentIndex+22,currentIndex+23,currentIndex+24,currentIndex+25,currentIndex+26,currentIndex+27,currentIndex+28,currentIndex+29,currentIndex+30,currentIndex+31,currentIndex+32,currentIndex+33,currentIndex+34,currentIndex+35,currentIndex+36,currentIndex+37,currentIndex+38,currentIndex+39].classList.contains('block2')
// ) {
// score+= 40
// removeFourLines()
// }
// }
// addScore()
// console.log(score)
//
//
// //Lines to remove
// function removeLine () {
// squares[currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9].classList.remove('block2')
// }
//
// function removeFourLines() {
//
// }

//present Score


})

0 comments on commit bf0f3c8

Please sign in to comment.