🔫 총알 위치 잡기 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

구분

• 날짜 : 2025.05.14
• 종류 : 버그
• 중요도 : 🟡

---

1. 문제 상황

플레이어 위치 중앙으로 총알이 발사 되도록 해야 하는데

왜 살짝 오른쪽으로 발사가 될까? 분명 코드는 맞는거 같다..

---

2. 코드 첨부

 shoot() {
    // 1. 총알 좌표 잡기
    // x 좌표는 플레이어의 딱 중간 위치 따라서 width / 2 절반
    // y 좌표는 플레이어의 머리 위치 y
    const bulletX = this.x + this.width / 2;
    const bulletY = this.y;

    // 2. 총알 생성하기 x좌표, y좌표, 넓이, 높이, 스피드, 이미지, update, draw
    this.bullets.push({
      x: bulletX,
      y: bulletY,
      width: 20,
      height: 20,
      speedY: 3,
      sprite: bulletImg,
      // update 함수에는 총알이 이동하는 모습을 구현
      update() {
        // 현재 y 위치에서 스피드 만큼 빼서 위로 올라가도록 구현
        this.y = this.y - this.speedY;
      },
      draw() {
        // ctx.drawImage(이미지, x, y, width, height);
        ctx.drawImage(this.sprite, this.x, this.y, this.width, this.height);
      },
    });
  },

설명하자면 bulletX 와 bulletY로 좌표를 잡는데,

현재 플레이어의 위치는 0,0 좌표에 있기에, this.x 와 this.y 에는 0, 0

this.width, this.heigth 에는 플레이어의 크기인 70, 60 이 담겨 있다.

따라서 bullet 의 좌표는 ( 0 + 35, 0) ⇒ (35,0) 이다. 그러면 중앙 아니냐구요.

보조 강사님에게 물어보니 문제점이 내 image의 크기를 생각하지 못했던 것이였다.. bullet 이미지의 시작점 0.0 은 왼쪽 상단 부터 시작하는 점. 그래서 위 코드처럼 중앙으로 찍었지만 저 여백 만큼 떨어져 보인 것이였다..

강사님이 해결 방법으로 총알의 넓이 절반 만큼 빼주면 된다고 해주셔서 const bulletX = this.x + this.width / 2- 10;으로 바꿔보니 바로

중앙으로 이동한다 ~~ 해결 완