HTML/CSS/JS로 게임 만들기 3

https://conquer-it.tistory.com/131?category=1065783 

HTML/CSS/JS로 게임 만들기 2

---

7. 총알 생성을 위한 스페이스바 이벤트 생성하기

스페이스바가 눌렸을 때 총알이 발사 되고 싶다면 어떻게 해야할까?

우선, 우리가 만들어 놓은 keyup 이벤트에 스페이스바를 추가하면 된다.

(keydown 이벤트에 총알발사를 추가하게 되면 난이도가 굉장히 쉬워지기 때문에 keyup에 적용)

//방향키 이벤트
let keysDown = {};
const setupKeyboardListener=()=>{
    document.addEventListener("keydown",(event)=>{
        keysDown[event.key] = true;
    });

    document.addEventListener("keyup",(event)=>{
        delete keysDown[event.key]; 
        if(event.key == " "){ // 총알 발사를 위한 스페이스바에 이벤트 생성
            createBullet();
        }
    });
   
}

const createBullet=()=>{
    console.log("총알 발사");
}

위의 코드는 만약 스페이스바가 눌렸다가 떼어질 때 createBullet 함수를 호출하라는 뜻이다. 

여기까지는 잘 된다.

 

---

8. 총알의 xy 좌표 만들어 주기

굉장히 많은 총알의 좌표를 알기 위해서는 그것을 하나하나 코드를 쳐서

정의할 수는 없다. 그렇기 때문에 함수를 사용하여 총알의 좌표를 구해보자.

function Bullet(){
    this.x = 0;
    this.y = 0;
}

Bullet이라는 함수를 만들어 거기에 일단 x,y 좌표에 0을 넣어준다.

 

그 후 createBullet 함수에 와서 이 함수가 호출될 때마다 Bullet 함수를 새롭게

계속 호출시키는 것이다.

const createBullet=()=>{
    console.log("총알 발사");
    let b = new Bullet();
}

---

9. 총알리스트에 총알 저장하기

우주선의 위치가 바뀔 때마다 다른 위치에서 총알을 생성해야 하기때문에

let bulletList = []; // 총알들을 저장하는 리스트
function Bullet(){
    this.x = 0;
    this.y = 0;
    this.init= function(){
        this.x = spaceshipX;
        this.y = spaceshipY;

        bulletList.push(this);
    }
}

init이라는 곳에 우주선의 좌표를 넣어주고 이들을 

bulletList에 넣어준다.

 

이제 이것을 총알이 발사될때마다 불러주면 된다.

const createBullet=()=>{
    console.log("총알 발사");
    let b = new Bullet();
    b.init();
}

---

10. 총알 그려주기

총알을 그려주기 위해 render함수에 코드를 작성해야 한다.

//이미지 보여주기
const render=()=>{
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
    ctx.drawImage(spaceshipImage, spaceshipX, spaceshipY);

    for(let i = 0; i< bulletList.length; i++){
        ctx.drawImage(bulletImage, bulletList[i].x, bulletList[i].y);
    }
}

여러개의 총알을 보여주기 위해 for문을 사용했으며

ctx.drawImage를 통해 bulletList i번째 총알의 좌표 그려주었다.

여기서 문제점이 2가지 정도 보인다.

1. 총알이 우주선의 중앙에서 발사 되지않고 왼쪽에 치우쳐서 발사된다.

2. 총알이 움직이지 않고 발사된 위치에 고정되어있다.

 

우선 총알이 우주선의 중앙에 오게 하기 위해 

init 안에 있는 spaceshipX에 20px를 더해 주었다.

function Bullet(){
    this.x = 0;
    this.y = 0;
    this.init= function(){
        this.x = spaceshipX+20;
        this.y = spaceshipY;

        bulletList.push(this);
    }
}

---

이번에는 총알이 위로 발사가 되어야 한다.

위로 발사가 된다는 뜻은 y좌표가 점점 줄어든다는 것을 의미한다.

function Bullet(){

	// 생략 // 
    
    this.update = function(){ // 총알 발사할 시 y좌표 감소
        this.y -= 7;
    }
}

Bullet이라는 함수 안에 

y좌표가 7씩 감소할 수 있는 코드를 작성해 준다.

그 후 update 함수에 와서 호출해주면 총알이 발사가 된다.

//우주선 위치 움직이기
const update=()=>{

	// 생략 //
    
    //총알의 y좌표 업데이트하는 함수 호출
    for(let i =0; i< bulletList.length; i++){
        bulletList[i].update();
    }
}

---

지금까지 결과

---

참고 영상

https://www.youtube.com/watch?v=kfBsH4MHYUk