snakejs

class CSSProperties {
  constructor(width, height, position, top, left, backgroundColor) {
    this.width = width;
    this.height = height;
    this.position = position;
    this.top = top;
    this.left = left;
    this.background = backgroundColor;
  }
}

//!GAME AREA && X COORDINATE , Y XOORDINATE VALUES
let GAME_BOARD, GAMBE_BOARD_WIDTH, GAME_BOARD_HEIGHT;
GAME_BOARD = document.querySelector('.game-area');
GAME_BOARD_HEIGHT = parseInt(
  getComputedStyle(GAME_BOARD).height.split('px')[0],
);
GAMBE_BOARD_WIDTH = parseInt(getComputedStyle(GAME_BOARD).width.split('px')[0]);

//!RANDOM BETWEEN MIN && MAX X AND Y COORDINATE FOR MEAL
let randomXCoordinate, randomYCoordinate;

//!GAME START BUTTON
let BUTTON_START = document.getElementById('game-start');

eventListeners();

function eventListeners() {
  BUTTON_START.addEventListener('click', start);
}

function start() {
  mealGenerator();
  // GAME_BOARD.appendChild(mealGenerator().htmlData);
}

function mealGenerator() {
  randomXCoordinate = Math.floor(Math.random() * GAMBE_BOARD_WIDTH);
  randomYCoordinate = Math.floor(Math.random() * GAME_BOARD_HEIGHT);
  let meal = document.createElement('div');
  let cssProperty = '';
  let cssAndHtml = new CSSProperties(
    '4px',
    '4px',
    'absolute',
    `${randomXCoordinate}px`,
    `${randomYCoordinate}px`,
    'yellow',
  );

  for (let x in cssAndHtml) {
    cssProperty += `${x}: ${cssAndHtml[x]};`;
  }

  meal.setAttribute('style', cssProperty);
  console.log(cssProperty)
  GAME_BOARD.appendChild(meal);
}