JavaScript로 게임 만들기 - 2

EventListener의 keydown을 통해 입력된 key를 받아보자

window.addEventListener("keydown", (event) => {
  console.log(event);
});

먼저 간단하게 clg로 event를 출력해보면

입력한 key들이 나온다 우리는 어떤 키가 입력되었는지만 알면 되기 때문에 event.key로 바꾸자

window.addEventListener("keydown", (event) => {
  console.log(event.key);
});

d가 입력되면 player를 x축으로 이동시키도록 하자
update 메소드에 x축 관련 코드를 추가하고

  update() {
    this.draw();
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;

    if (this.position.y + this.height + this.velocity.y >= canvas.height) {
      this.velocity.y = 0;
    } else this.velocity.y += gravity;
  }

a와 d를 눌렀을 때와 떼었을 때 동작할 내용을 switch문으로 작성했다.

window.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "d":
      player.velocity.x = 1;
      break;
    case "a":
      player.velocity.x = -1;
      break;
  }
  console.log(event.key);
});

window.addEventListener("keyup", (event) => {
  switch (event.key) {
    case "d":
      player.velocity.x = 0;
      break;
    case "a":
      player.velocity.x = 0;
      break;
  }
  console.log(event.key);
});

그런데 조작감이 좀 부드럽지 않다.
a와 d를 빠르게 번갈아가며 누를 때 키가 조금 씹히는 느낌이 들어 코드 동작방식을 수정해야겠다.

const keys = {
  a: {
    pressed: false,
  },
  d: {
    pressed: false,
  },
};

let lastKey;

function animate() {
  window.requestAnimationFrame(animate);
  c.fillStyle = "black";
  c.fillRect(0, 0, canvas.width, canvas.height);
  player.update();
  enemy.update();

  player.velocity.x = 0;

  if (keys.a.pressed && lastKey === "a") {
    player.velocity.x = -1;
  } else if (keys.d.pressed && lastKey === "d") {
    player.velocity.x = 1;
  }
}

각 key의 기본을 불린값을 false로 설정, 마지막으로 입력한 key갚을 저장할 변수를 생성하고 animate함수 안에 기본 velocity x 값을 주고 각 key의 pressed가 true일때만 velocity값을 주도록 한 뒤 if조건에 마지막으로 입력한 key의 조건을 추가하고

window.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "d":
      keys.d.pressed = true;
      lastKey = "d";
      break;
    case "a":
      keys.a.pressed = true;
      lastKey = "a";
      break;
  }
  console.log(event.key);
});

window.addEventListener("keyup", (event) => {
  switch (event.key) {
    case "d":
      keys.d.pressed = false;
      break;
    case "a":
      keys.a.pressed = false;
      break;
  }
  console.log(event.key);
});

case문의 동작을 ture와 false를 스위칭 하는 동시에 lastKey의 값을 바꿔주는 방식으로 바꾸었다.
코드를 이렇게 수정하면 키 입력이 훨씬 부드러워진다.

window.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "d":
      keys.d.pressed = true;
      lastKey = "d";
      break;
    case "a":
      keys.a.pressed = true;
      lastKey = "a";
      break;
    case "w":
      player.velocity.y = -7;
      break;
  }
  console.log(event.key);
});

window.addEventListener("keyup", (event) => {
  switch (event.key) {
    case "d":
      keys.d.pressed = false;
      break;
    case "a":
      keys.a.pressed = false;
      break;
    case "w":
      keys.a.pressed = false;
      break;
  }
  console.log(event.key);
});

case문에 w키도 추가하여 점프기능도 만들어주자 w키의 경우 앞서 설정한 gravity덕에 velocity.y의 값만 바꾸어주면 된다.

이제 enemy의 key들을 player와 유사하게 작성하면 되는데 먼저 player와 enemy의 lastKey를 구분하기 위해 Sprite클래스 내에 this.lastKey를 추가하자

class Sprite {
  constructor({ position, velocity }) {
    this.position = position;
    this.velocity = velocity;
    this.height = 150;
    this.lastKey
  }

window.addEventListener("keydown", (event) => {
  //player key
  switch (event.key) {
    case "d":
      keys.d.pressed = true;
      player.lastKey = "d";
      break;
    case "a":
      keys.a.pressed = true;
      player.lastKey = "a";
      break;
    case "w":
      player.velocity.y = -7;
      break;

    //enemy key
    case "ArrowRight":
      keys.ArrowRight.pressed = true;
      enemy.lastKey = "ArrowRight";
      break;
    case "ArrowLeft":
      keys.ArrowLeft.pressed = true;
      enemy.lastKey = "ArrowLeft";
      break;
    case "ArrowUp":
      enemy.velocity.y = -7;
      break;
  }
  console.log(event.key);
});

window.addEventListener("keyup", (event) => {
  //player key
  switch (event.key) {
    case "d":
      keys.d.pressed = false;
      break;
    case "a":
      keys.a.pressed = false;
      break;
    case "w":
      keys.w.pressed = false;
      break;
  }

  //enemy key
  switch (event.key) {
    case "ArrowRight":
      keys.ArrowRight.pressed = false;
      break;
    case "ArrowLeft":
      keys.ArrowLeft.pressed = false;
      break;
  }
  console.log(event.key);
});

각각의 이벤트리스너에 player와 enemy의 코드를 추가하면

이제 속도와 중력을 게임 스타일에 맞게 설정하면 되겠다.

다음엔 공격기능을 구현해보자