Tetris

A vanilla javascript game

Tetris is a tile-matching puzzle game from the 80’s. Try to get your personal high score by moving each of the 5 randomly selected Tetromino shapes sideways and/or rotating by quarter-turns, so that they form a solid horizontal line without gaps. When such a line is formed, it disappears and any blocks above it fall down to fill the space. For each line you will receive 10 points.

This was my first project from General Assembly's Software Engineering Immersive Course. It was also my first time building a project with JavaScript.


Brief

• The game should stop if a Tetrimino fills the highest row of the game board
• The player should be able to rotate each Tetrimino about its own axis
• If a line is completed it should be removed and the pieces above should take its place
• Render a grid-based game in the browser
• Include separate HTML / CSS / JavaScript files
• Use Javascript for DOM manipulation
• Deploy your game online, using Github Pages, where the rest of the world can access it
• Use semantic markup for HTML and CSS (adhere to best practices)

Technologies Used

• HTML5
• CSS3
• JavaScript
• Git
• GitHub
• Google Fonts

Features piece of code no.1

//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'))) {
      // make it block2
      current.forEach(index => squares[index + currentPosition].classList.add('block2'))
      // start a new tetromino falling
      random = nextRandom
      nextRandom = Math.floor(Math.random() * theTetrominoes.length)
      current = theTetrominoes[random][currentRotation]
      currentPosition = 4
      draw()
      displayShape()
      addScore()
      gameOver()
    }
  }
  freeze()

Features piece of code no.2

  //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'))) {
        score += 10
        lines +=1
        scoreDisplay.innerHTML = score
        linesDisplay.innerHTML = lines
        row.forEach(index => {
          squares[index].style.backgroundImage = 'none'
          squares[index].classList.remove('block2') || squares[index].classList.remove('block')

        })