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関数の部分を宣言し、ボールが左右に移動できるようにします.左の位置をそれぞれ入力し、正の値で左に移動し、左が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()CSS属性値をJSにインポートするために使用します.
https://developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle
Javascriptを使用してCSS(1)-CSOM:CSSオブジェクトモデルを制御する 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