Как правильно задать условие в function appendP

Question

let block = document.createElement(`div`);
block.className = `block`;
block.id = `blockId`;
block.style.margin = 0;
block.style.position = 'absolute';
block.style.left = `${Math.floor((window.innerWidth / 2 - 50) / 10) * 10}px`;
block.style.top = `${Math.floor((window.innerHeight / 2 - 50) / 10) * 10}px`;
document.querySelector(`body`).append(block);

   
    window.addEventListener('keydown', (e) => {
        let moveBy = 10;
        let back = 20;
        let newLeft;
        let newRight;
    
        switch (e.key) {
            case 'ArrowLeft':
                newLeft = parseInt(block.style.left) - moveBy;
    
                if (newLeft >= 0) {
                    block.style.left = `${newLeft}px`;
                } else {
                    newLeft = parseInt(block.style.left);
                    block.style.left = `${newLeft +  back}px`;
                }
                break;
            case 'ArrowRight':
                newLeft = parseInt(block.style.left) + moveBy;
    
                if (newLeft <= window.innerWidth - 100 ) {
                    block.style.left = `${newLeft}px`;
                } else {
                    newLeft = parseInt(block.style.left);
                    block.style.left = `${newLeft - back}px`;
                }
    
                break;
            case 'ArrowUp':
                newRight = parseInt(block.style.top) - moveBy
    
                if (newRight >= 0) {
                    block.style.top = `${newRight}px`;
                } else {
                    newRight = parseInt(block.style.top);
                    block.style.top = `${newRight +  back}px`;
                }
    
                break;
            case 'ArrowDown':
                newRight = parseInt(block.style.top) + moveBy
    
                if (newRight <= window.innerHeight - 100) {
                    block.style.top = `${newRight}px`;
                } else  {
                    newRight = parseInt(block.style.top);
                    block.style.top = `${newRight - back}px`;
                }
    
                break;
        }
        
            appendP();
        
    });


    
 function appendP() {
    
    if(block.style.left <= '0px' ||  block.style.top <= '0px'  ) {
       let text = document.createElement(`p`);
           text.innerHTML = 'БЭМС';
           document.querySelector(`div`).append(text);
           setTimeout(removeP, 2000);
        }
           
   }
  
   function  removeP() {
    document.querySelector('p').remove('text');
}

Моя проблема в том что не могу правильно задать условия в function appendP в самом if , на данный момент те условия что есть покрывают то что когда блок достигает левого 0 и и верхнего то он отскакивает и появляется надпись , а вот как задать что бы когда в правом краю будет 0 и внизу происходило то же самое допереть не могу , перепробовал уже всякое(

Answer 1

let block = document.createElement(`div`);
block.className = `block`;
block.style.position = 'absolute';
block.style.left = `${Math.floor((window.innerWidth / 2 - 50) / 10) * 10}px`;
block.style.top = `${Math.floor((window.innerHeight / 2 - 50) / 10) * 10}px`;
document.querySelector(`body`).append(block);

   
    window.addEventListener('keydown', (e) => {
        let moveBy = 10;
        let back = 20;
        let newLeft;
        let newRight;
    
        switch (e.key) {
            case 'ArrowLeft':
                newLeft = parseInt(block.style.left) - moveBy;
    
                if (newLeft >= 0) {
                    block.style.left = `${newLeft}px`;
                } else {
                    newLeft = parseInt(block.style.left);
                    block.style.left = `${newLeft +  back}px`;

                    appendP();
                }
                break;
            case 'ArrowRight':
                newLeft = parseInt(block.style.left) + moveBy;
    
                if (newLeft <= window.innerWidth - 100 ) {
                    block.style.left = `${newLeft}px`;
                } else {
                    newLeft = parseInt(block.style.left);
                    block.style.left = `${newLeft - back}px`;

                    appendP();
                }
    
                break;
            case 'ArrowUp':
                newRight = parseInt(block.style.top) - moveBy
    
                if (newRight >= 0) {
                    block.style.top = `${newRight}px`;
                } else {
                    newRight = parseInt(block.style.top);
                    block.style.top = `${newRight +  back}px`;

                    appendP();
                }
    
                break;
            case 'ArrowDown':
                newRight = parseInt(block.style.top) + moveBy
    
                if (newRight <= window.innerHeight - 100) {
                    block.style.top = `${newRight}px`;
                } else  {
                    newRight = parseInt(block.style.top);
                    block.style.top = `${newRight - back}px`;

                    appendP();
                }
    
                break;
        }
        
        
    });


    
 function appendP() {

       let text = document.createElement(`p`);
           text.innerHTML = 'БЭМС';
           document.querySelector(`div`).append(text);
           setTimeout(removeP, 2000);
           
   }
  
   function  removeP() {
    document.querySelector('p').remove('text');
}

В общем немного переписал , дурная затея была задавать эти условия в функции , лучше использовать функцию в конце каждого else

Answer 2

Предлагаю Вам сократить код, заменив четыре условия одним. Для этого нужно задать вспомогательный объект, который хранит информацию о направлениях и свойствах, относительно которых происходит позиционирование:

let block = document.createElement('div');
block.className = 'block';
block.style.left = '50px';
block.style.top = '50px';
document.querySelector('body').append(block);

const moveBy = 10;
const back = 20;

const dirs = {
  'ArrowLeft':  { sign: -1, prop: 'left', propW: 'innerWidth'},
  'ArrowRight': { sign: 1,  prop: 'left', propW: 'innerWidth'},
  'ArrowUp':    { sign: -1, prop: 'top',  propW: 'innerHeight'},
  'ArrowDown':  { sign: 1,  prop: 'top',  propW: 'innerHeight'},
};

const setPos = (p, v) => block.style[p] = v + 'px';

window.addEventListener('keydown', (e) => {
  if (dirs.hasOwnProperty(e.key)) {
    let dir = dirs[e.key];
    let curPos = parseInt(block.style[dir.prop]);
    let nextPos = curPos + dir.sign * moveBy;

    let check = nextPos >= 0 && nextPos <= window[dir.propW] - block.offsetWidth;

    if (check)
      setPos(dir.prop, nextPos);
    else {
      setPos(dir.prop, curPos - dir.sign * back);
      appendP();
    }
  }
});

function appendP() {
  let text = document.createElement('p');
  text.innerHTML = 'БЭМС';
  document.querySelector('div').append(text);
  setTimeout(removeP, 2000);
}

function removeP() {
  document.querySelector('p').remove();
}

body {
  overflow: hidden;
  position: relative;
  margin: 0;
}

.block {
  position: absolute;
  margin: 0;
  width: 10px;
  height: 10px;
  background: blue;
}

БЛОГ НА HUSL

Как правильно задать условие в function appendP

Ответы (2 шт):