snakejs

    0

    0

    }

    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);
    }
    
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.