/**** Setup ****/

​

const ROWS = 12;

const COLS = 7;

const LEFT = 0;

const RIGHT = 1;

const EMPTY = '.';

const ACTIVE = 'X';

​

let activeRow = 0;

let activeColumn = Math.floor(Math.random() * COLS);

let activeDirection = RIGHT;

​

let userClicked = false;

​

let body = document.querySelector('body');

body.addEventListener('click', function() {

  userClicked = true;

})

body.addEventListener('touchstart', function() {

  userClicked = true;

})

​

const board = createBoard()

​

/**** Game loop ****/

​

let gameLoop = setInterval(() => {

  if (userClicked) {

    let win = checkForWin(board);

    let loss = checkForLoss(board);

    if (loss) {

      alert('You lost!');

      clearInterval(gameLoop);

      return;

    } else if (win) {

      alert('You won!');

      clearInterval(gameLoop);

      return;

    } else {

      activeRow++;

      activeColumn = Math.floor(Math.random() * COLS);

    }

    userClicked = false;

  }

  updatePosition();

  updateBoard(board);

  displayBoard(board);

}, 125);

​

/**** Utilities ****/

function checkForWin(board) {

  return activeRow === ROWS - 1

}

​

function checkForLoss(board) {

  return (activeRow > 0 &&

      board[activeRow][activeColumn] === ACTIVE &&

      board[activeRow - 1][activeColumn] !== ACTIVE)

}

​

function updatePosition() {

    if (activeDirection === RIGHT) {

      if (activeColumn === COLS - 1) {

        activeDirection = LEFT; // reached end of screen, go back

        activeColumn--;

      } else {

        activeColumn++;

      }

    } else if (activeDirection === LEFT) {

      if (activeColumn === 0) {

        activeDirection = RIGHT;

        activeColumn++;

      } else {

        activeColumn--;

      }

    }

}

​

function createBoard() {

  let board = [ROWS];

  for (let i = 0; i < ROWS; i++) {

    board[i] = [COLS];

    for (let j = 0; j < COLS; j++) {

      board[i][j] = EMPTY;

    }

  }

  return board;

}

​

function updateBoard(board) {

  for (let i = 0; i < board[activeRow].length; i++) {

    board[activeRow][i] = EMPTY;  

  }

  board[activeRow][activeColumn] = ACTIVE; 

}

​

function displayBoard(board) {

  let str = ''

  for (let i = board.length-1; i >= 0; i--) {

    for (let j = 0; j < board[i].length ; j++) {

      str += board[i][j]

    }

    str += "\n"

  }

  document.getElementById('canvas').innerText = str

}

​

​