Skip to content

Commit

Permalink
score working
Browse files Browse the repository at this point in the history
  • Loading branch information
@kubowania
kubowania committed Jul 17, 2019
1 parent 832ed6d commit 05bb1bf
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 68 deletions.
27 changes: 15 additions & 12 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ h2 {
font-weight:300;
color: rgb(133,121,107,0.5);
padding-left: 15px;
padding-bottom: 0px;
margin-bottom: 20px;
}

.column-left {
Expand All @@ -62,6 +64,7 @@ h2 {
display: inline;
}


.game {
width: 300px;
}
Expand All @@ -73,35 +76,35 @@ h2 {

.previous-shape {
width: 100px;
margin: 57px;
margin-left: 57px;
}

.previous-grid {
width:60px;
height: 60px;
background-color: blue;
width:80px;
height: 80px;
display: flex;
flex-wrap: wrap;
width: 80px;
}

.block {
background-image: url(/Users/limit/development/Tetris/images/blue_block.png);
/* background-color: #4BC39B; */
}

.block2 {
background-image: url(/Users/limit/development/Tetris/images/purple_block.png);
/* background-color: #4BC39B; */
}

.oTetromino {
background-color: green;
.block3 {
background-image: url(/Users/limit/development/Tetris/images/green_block.png);
}

.lTetromino {
background-color: yellow;
.block4 {
background-image: url(/Users/limit/development/Tetris/images/navy_block.png);
}

.zTetromino {
background-color: orange;
.block5 {
background-image: url(/Users/limit/development/Tetris/images/pink_block.png);
}

.tTetromino {
Expand Down
27 changes: 17 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,16 +195,6 @@ <h1>to tetris</h1>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="block2"></div>
<div class="block2"></div>
<div class="block2"></div>
Expand All @@ -225,6 +215,16 @@ <h1>to tetris</h1>
<div class="block2"></div>
<div class="block2"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
<div class="block3"></div>
</div>
</div>
<section class="column-left">
Expand All @@ -242,6 +242,13 @@ <h1 class="score-display">0</h1>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
Expand Down
143 changes: 97 additions & 46 deletions js/app2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@ 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
let currentRotation = 0
const width = 10
const height = 20


// const height = 20
let score = 0

//assign functions to keycodes
function control(e) {
Expand Down Expand Up @@ -65,7 +63,11 @@ document.addEventListener('DOMContentLoaded', () => {
//Randomly Select Tetromino
let random = Math.ceil(Math.random()*theTetrominoes.length)-1
let current = theTetrominoes[random][currentRotation]
// console.log(current)

//Color tetrominoes at random
// var colors = ['url(/Users/limit/development/Tetris/images/blue_block.png)', 'url(/Users/limit/development/Tetris/images/purple_block.png)', 'url(/Users/limit/development/Tetris/images/green_block.png)','url(/Users/limit/development/Tetris/images/navy_block.png)','url(/Users/limit/development/Tetris/images/pink_block.png)']
// var randomColor = colors[Math.floor(Math.random() * colors.length)]
// document.querySelectorAll('.block').style.background-image = randomColor

//move the Tetromino moveDown
let currentPosition = 4
Expand All @@ -92,41 +94,47 @@ document.addEventListener('DOMContentLoaded', () => {
draw()
freeze()
}
moveDown()

// startBtn.addEventListener('click', () => {
setInterval(moveDown, 1000)
// })
startBtn.addEventListener('click', () => {
setInterval(moveDown, 1000)
})

//move left
//move left and prevent collisions with shapes moving left
function moveright() {
draw()
undraw()
console.log(current)
const isAtRightEdge = current.some(index => (currentPosition + index) % width === width - 1)
if(!isAtRightEdge) currentPosition += 1
if(current.some(index => squares[currentPosition + index + 1].classList.contains('block2'))) {
currentPosition -= 1
}
draw()
}

//move right
//move right and prevent collisions with shapes moving right
function moveleft() {
draw()
undraw()
const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0)
if(!isAtLeftEdge) currentPosition -= 1
if(current.some(index => squares[currentPosition + index + -1].classList.contains('block2'))) {
currentPosition += 1
}
draw()
}

//freeze the shape
function freeze() {
// if block has settled
if(current.some(index => squares[currentPosition + index + width].classList.contains('block2'))) {
if(current.some(index => squares[currentPosition + index + width].classList.contains('block2', 'block3'))) {
// make it block2
current.forEach(index => squares[index + currentPosition].classList.add('block2'))
// start a new tetromino falling
random = Math.ceil(Math.random()*theTetrominoes.length)-1
current = theTetrominoes[random]
current = theTetrominoes[random][currentRotation]
currentPosition = 4
addScore()
}
}
freeze()
Expand All @@ -145,47 +153,90 @@ document.addEventListener('DOMContentLoaded', () => {
draw()
}

//Game Over
function gameOver() {
let gameOverHeight = [currentIndex,currentIndex+width,currentIndex+width*2,currentIndex+width*3,currentIndex+width*4,currentIndex+width*5,currentIndex+width*6,currentIndex+width*7,currentIndex+width*8,currentIndex+width*9,currentIndex+width*10,currentIndex+width*11,currentIndex+width*12,currentIndex+width*13,currentIndex+width*14,currentIndex+width*15,currentIndex+width*16,currentIndex+width*17,currentIndex+width*18,currentIndex+width*19]
function containsBlocks(element, index){
return squares[gameOverHeight[index]].classList.contains('block2', 'block')
}
for (currentIndex = 0; currentIndex < 199;currentIndex += width) {
console.log(currentIndex)
gameOverHeight = [currentIndex,currentIndex+width,currentIndex+width*2,currentIndex+width*3,currentIndex+width*4,currentIndex+width*5,currentIndex+width*6,currentIndex+width*7,currentIndex+width*8,currentIndex+width*9,currentIndex+width*10,currentIndex+width*11,currentIndex+width*12,currentIndex+width*13,currentIndex+width*14,currentIndex+width*15,currentIndex+width*16,currentIndex+width*17,currentIndex+width*18,currentIndex+width*19]
if(gameOverHeight.every(containsBlocks)) {
console.log('gameOver')
scoreDisplay.innerHTML = 'End'
}
}
}

gameOver()



//show previous tetromino in scoreDisplay
theTetrominoes[random][currentRotation]
const displayWidth = 4

const displaySquares = document.querySelectorAll('.previous-grid div')
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 */
]

const nextCurrent = smallTetrominoes[random]
console.log(nextCurrent)

function displayShape() {
nextCurrent.forEach( index => {
displaySquares[displayIndex + index].classList.add('block')
})
}
displayShape()



//Add score
function addScore() {
let row = [currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9]
function containsBlock2(element, index){
return squares[row[index]].classList.contains('block2')
}
for (currentIndex = 0; currentIndex < 199;currentIndex += width) {
console.log(currentIndex)
row = [currentIndex,currentIndex+1,currentIndex+2,currentIndex+3,currentIndex+4,currentIndex+5,currentIndex+6,currentIndex+7,currentIndex+8,currentIndex+9]
if(row.every(containsBlock2)) {
score += 10
console.log(score)
scoreDisplay.innerHTML = score
// removeLine()
}
}
}
console.log(score)



//show previous tetromino in scoreDisplay
// function previousTetromino() {
//
// }
//
// previousTetromino()

//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 () {
// let y = 0
// let point = 1
//
// while (y < width) {
//
// }
// function removeLine(){
//
// }
//



// function removeFourLines() {
//
// }

//present Score
//present Score



//Styling eventListeners


})

0 comments on commit 05bb1bf

Please sign in to comment.