200920__JS Falling ball game 정리 (1/2)

Javascript Game Tutorial for Beginners 에 대해 공부한 TIL 입니다.

function moveLeft() {
  var left = parseInt(
    window.getComputedStyle(character).getPropertyValue('left')
  );
  if (left > 0) {
    character.style.left = left - 2 + 'px';
  }
}

function moveRight() {
  var left = parseInt(
    window.getComputedStyle(character).getPropertyValue('left')
  );
  if (left < 380) {
    character.style.left = left + 2 + 'px';
  }
}

Create two very similar functions, moveLeft and moveRight. They create a variable equal to the current left position of the character, and then set a new left position for the character while either adding or subtracting 2 pixels.

공이 좌우로 움직일 수 있도록 moveLeft와 moveRight 함수를 선언하는 부분. 각각 left 위치를 가져와서 left가 양수일 경우 왼쪽으로 움직이고, left가 380보다 작을 경우 우측으로 움직일 수 있도록 설정합니다.

declare function parseInt(s: string, radix?: number): number;

정수 값으로 변환해주는 함수.

• Converts a string to an integer.

* @param s A string to convert into a number.

* @param radix A value between 2 and 36 that specifies the base of the number in numString.

* If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.

* All other strings are considered decimal.

getComputedStyle()

JS로 CSS 속성 값 가져올 때 사용.

https://developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle

Javascript로 CSS 제어하기(1) - CSSOM : CSS Object Model

getPropertyValue()

The CSSStyleDeclaration.getPropertyValue() method interface returns a DOMString containing the value of a specified CSS property.

html {
  --color-accent: #00eb9b;
}

const colorAccent = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-accent'); // #00eb9b

What happens, though, when it’s not just one property we need access to in JavaScript, but a whole bunch of them?

html {
  --color-accent: #00eb9b;
  --color-accent-secondary: #9db4ff;
  --color-accent-tertiary: #f2c0ea;
  --color-text: #292929;
  --color-divider: #d7d7d7;
}

const colorAccent = getComputedStyle(document.documentElement).getPropertyValue('--color-accent'); // #00eb9b
const colorAccentSecondary = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-secondary'); // #9db4ff
const colorAccentTertiary = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-tertiary'); // #f2c0ea
const colorText = getComputedStyle(document.documentElement).getPropertyValue('--color-text'); // #292929
const colorDivider = getComputedStyle(document.documentElement).getPropertyValue('--color-text'); // #d7d7d7

const getCSSProp = (element, propName) => getComputedStyle(element).getPropertyValue(propName);
const colorAccent = getCSSProp(document.documentElement, '--color-accent'); // #00eb9b
// repeat for each custom property...

How to Get All Custom Properties on a Page in JavaScript | CSS-Tricks