[TIL-113] 위코드 12일차: enemyRain 게임 - 배경 이미지와 캐릭터 이동

CSS

 

Image Sprite

개념

여러 개의 이미지를 합쳐서 하나의 이미지 파일에 저장하여, 그때그때 원하는 부분만 잘라서 사용하는 방식이다. 페이지에 여러 가지 이미지가 필요해도 브라우저가 해당 이미지 파일 하나만 다운받으면 되기 때문에 서버 요청 과정이 효율적이다. 또한 수시로 이미지가 바뀌어야할 경우, 아무리 로딩이 빨라도 새로운 이미지 파일을 받아오려면 시간이 걸려서 깜박여 보이는 효과가 발생하는데 이를 막아준다.

 

사용법

.front-face {
  background-position: 0 0;
}

.right-face {
  background-position: 35px 0;
}

.left-face {
  background-position: 70px 0;
}

.back-face {
  background-position: 105px 0;
}

1. <div>를 원하는 사이즈로 만들고, 여기에 배경 이미지로 넣는다.
2. background-position 속성의 값을 조정하여 이미지의 원하는 부분을 보여준다.
3. 클래스에 따른 css 코드를 짜놓고, 필요한 때에 해당 클래스를 적용한다.
   • 예) ArrowLeft 키가 눌렸을 때, <div id="hero">에 "left-face" 클래스 추가

 

참고

http://www.tcpschool.com/css/css_basic_imageSprites 

 

 

---

 

Javascript

 

window.addEventListener()

개념

특정 태그에 대해서 일어나는 이벤트만이 아니라, 브라우저 자체에서 일어나는 이벤트도 있다. 키보드 이벤트가 이에 속한다. 그럴 땐 window에 addEventListener()를 달아주면 된다.

 

keyboard event

키보드 이벤트에는 keydown, keypress, keyup이 있어서 상황에 따라 적절한 것을 골라 사용해야 한다. 키보드를 눌렀을 때 keydown -> keypress -> keyup 순으로 이벤트가 발생한다. 주의할 점은 keypress에는 문자키(알파벳, 숫자, space, enter)만 해당하고, keyup에는 tab, caps lock이 해당되지 않는다는 점이다. 방향키를 누르는 걸 감지하려면 keydown 이벤트를 사용해야 한다.

function moveHero(event) {
  console.log(event);
}

window.addEventListener("keydown", moveHero);

키보드 이벤트를 콘솔에서 확인해보면 event 객체에서 "key"의 값으로 어떤 키를 눌렀는지 확인할 수 있다.

 

참고

Javascript의 DOM API 이벤트 핸들링-키보드 https://alalstjr.github.io/javascript/2018/09/25/JavaScript-DOM-API-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%A7%81-%ED%82%A4%EB%B3%B4%EB%93%9C(KeyBoard)/

 

Class

개념

,,,

class Hero {
  constructor() {
    this.left = 383;
    this.bottom = 0;
  }

  moveLeft() {
    if (this.left > 0) {
      this.left--;
    }
  }
  moveRight() {
    if (this.left < 765) {
      this.left++;
    }
  }
  moveUp() {
    if (this.bottom < 546) {
      this.bottom++;
    }
  }
  moveDown() {
    if (this.bottom > 0) {
      this.bottom--;
    }
  }
}

const myHero = new Hero();

Hero 클래스가 있길래 뭐라도 만들어봤는데 굳이 이렇게 해야 하나...? 인자도 필요 없고, 여러 인스턴스를 찍어낼 일이 없는데??

 

switch문

오답노트

function moveHero(event) {
  const arrow = event.key;
  switch (arrow) {
    case "ArrowLeft":
      divHero.className = "left-face";
      myHero.moveLeft();
      break;
    case "ArrowUp":
      divHero.className = "back-face";
      myHero.moveUp();
      break;
    case "ArrowRight":
      divHero.className = "right-face";
      myHero.moveRight();
      break;
    case "ArrowDown":
      divHero.className = "front-face";
      myHero.moveDown();
      break;
  }
  heroClass = divHero.classList[0];
  divHero.style.left = myHero.left + "px";
  divHero.style.bottom = myHero.bottom + "px";
}

window.addEventListener("keydown", moveHero);

case마다 실행할 코드가 끝나면 break를 꼭 써줘야 한다. 안 그러면 일치여부에 상관없이 이어지는 case문을 실행한다. break가 필수는 아닌 줄 알고 안 썼더니 제대로 실행이 안 됐다.

 

참고

https://ko.javascript.info/switch  

 

 

복합 할당 연산자

개념

x = y는 x(왼쪽 피연산자)에 y(오른쪽 피연산자)를 할당하는 식이다. 이때 사용하는 =(등호)가 할당연산자이다. 그런데 연산과 할당을 동시에 수행하는 복합 할당 연산자도 있다. 다른 연산자와 할당연산자(=)를 붙여쓰는 형태로, 오른쪽 항에 x를 포함하지 않아도 되기 때문에 단축해서 표현할 수 있다.

 

사용법

// 더하기 할당 : x = x + 5
x += 5

// 빼기 할당 : x = x - 5
x -= 5

// 곱하기 할당 : x = x * 5
x *= 5

기본적인 산술연산자와 할당연산자의 조합의 예를 보면, x += y는 x에 y를 더한 값을 할당시킨다는 뜻이다. x의 값을 5만큼 증가시키려면, x += 5라고 표현할 수 있다.

enemyRain에서 움직이는 캐릭터를 구현하기 위해 left, bottom 값을 증감하는 데 사용했다. ++, --는 1만큼만 증감시킬 수 있었는데, left += 3 으로 움직이는 속도를 높였다.

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators