[JavaScript] 비행기 슈팅 게임 만들기 - (2) 적 생성하기

안녕하세요.

오늘은 지난 시간에 이어서 비행기 슈팅 게임을 만들기 위해 화면에 적을 생성하는 기능을 구현하겠습니다.

적은 화면의 가장 위에서 나타나서, 시간이 지나면 아래로 이동해야 합니다.

 

 

 

이전에 작성했던 코드는 다음 링크를 참고바랍니다.

2024.09.15 - [JavaScript] - [JavaScript] 비행기 슈팅 게임 만들기 - (1) 비행기 그리기

[JavaScript] 비행기 슈팅 게임 만들기 - (1) 비행기 그리기

 

 

1. 적 배열 설정

• 다수의 적을 관리하기 위해 enemies 배열을 사용합니다.

const enemies = []; // 적을 담을 배열

 

2. 적 객체를 생성 함수 작성

 

• 적의 초기 위치와 속도를 랜덤으로 설정하여 적을 생성합니다.
• Math.random()을 사용해 적의 x 좌표를 화면 안에서 무작위로 설정합니다.

// 적 객체를 생성하는 함수
function createEnemy() {
    const enemy = {
        x: Math.random() * (canvas.width - 40), // 적의 X 위치를 랜덤으로 설정
        y: 0, // 적의 초기 Y 위치는 화면 위
        width: 40, // 적의 너비
        height: 40, // 적의 높이
        speed: 2, // 적이 내려오는 속도
    };
    enemies.push(enemy); // 적을 배열에 추가
}

 

 

3. 적을 화면에 그리는 함수 작성

 

• fillRect() 함수를 이용해 적을 그립니다. 적은 빨간색으로 표시하겠습니다.
• 배열 안의 각 적을 반복문으로 그립니다.

// 적을 그리는 함수
function drawEnemies() {
    enemies.forEach((enemy) => {
        ctx.fillStyle = 'red'; // 적의 색상을 빨간색으로 설정
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); // 적을 그립니다.
    });
}

 

 

4. 적 위치 업데이트 함수 작성

 

• 적이 아래로 움직이도록 enemy.y 값을 증가시킵니다.
• 적이 화면을 벗어나면 배열에서 제거됩니다.

// 적의 위치를 업데이트하는 함수
function updateEnemies() {
    enemies.forEach((enemy, index) => {
        enemy.y += enemy.speed; // 적이 아래로 이동

        // 적이 화면 아래로 나가면 배열에서 제거
        if (enemy.y > canvas.height) {
            enemies.splice(index, 1); // 적 제거
        }
    });
}

 

 

5. 일정 시간마다 적이 생성되도록 이벤트 설정

// 일정 시간마다 적이 생성되도록 설정 (적이 계속 등장)
setInterval(createEnemy, 1000); // 1초마다 적을 생성

 

6. 게임 루프 함수 수정

// 게임 루프 함수 수정
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 이전 프레임 지우기

    drawPlane(); // 비행기 그리기
    update(); // 비행기 위치 업데이트

    drawEnemies(); // 적 그리기
    updateEnemies(); // 적 위치 업데이트
    
    requestAnimationFrame(gameLoop); // 다음 프레임 호출
}

 

 

---

 

현재까지 전체 코드

const canvas = document.getElementById('gameCanvas'); // HTML에서 캔버스를 가져옵니다.
const ctx = canvas.getContext('2d'); // 캔버스에서 2D 그리기 기능을 사용할 수 있게 합니다.

canvas.width = 400; // 캔버스의 너비를 400px로 설정
canvas.height = 600; // 캔버스의 높이를 600px로 설정

// 비행기 객체 설정
const plane = {
    x: canvas.width / 2 - 20, // 비행기의 초기 x 위치를 캔버스 중앙에 설정
    y: canvas.height - 60, // 비행기의 초기 y 위치를 캔버스 하단에 설정
    width: 40, // 비행기의 너비
    height: 40, // 비행기의 높이
    speed: 5, // 비행기의 이동 속도
    moveLeft: false, // 왼쪽으로 이동 중인지 여부
    moveRight: false, // 오른쪽으로 이동 중인지 여부
};

// 비행기 그리기 함수
function drawPlane() {
    ctx.fillStyle = 'white'; // 비행기의 색상을 흰색으로 설정
    ctx.fillRect(plane.x, plane.y, plane.width, plane.height); // 비행기를 직사각형으로 그립니다.
}

// 비행기 위치 업데이트 함수
function update() {
    if (plane.moveLeft && plane.x > 0) { // 왼쪽으로 이동 중이고 캔버스를 벗어나지 않았을 때
        plane.x -= plane.speed; // 왼쪽으로 이동
    }
    if (plane.moveRight && plane.x + plane.width < canvas.width) { // 오른쪽으로 이동 중이고 캔버스를 벗어나지 않았을 때
        plane.x += plane.speed; // 오른쪽으로 이동
    }
}

// 적 배열을 선언하여 다수의 적을 관리합니다.
const enemies = [];

// 적 객체를 생성하는 함수
function createEnemy() {
    const enemy = {
        x: Math.random() * (canvas.width - 40), // 적의 X 위치를 랜덤으로 설정
        y: 0, // 적의 초기 Y 위치는 화면 위
        width: 40, // 적의 너비
        height: 40, // 적의 높이
        speed: 2, // 적이 내려오는 속도
    };
    enemies.push(enemy); // 적을 배열에 추가
}

// 적을 그리는 함수
function drawEnemies() {
    enemies.forEach((enemy) => {
        ctx.fillStyle = 'red'; // 적의 색상을 빨간색으로 설정
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); // 적을 그립니다.
    });
}

// 적의 위치를 업데이트하는 함수
function updateEnemies() {
    enemies.forEach((enemy, index) => {
        enemy.y += enemy.speed; // 적이 아래로 이동

        // 적이 화면 아래로 나가면 배열에서 제거
        if (enemy.y > canvas.height) {
            enemies.splice(index, 1); // 적 제거
        }
    });
}

// 일정 시간마다 적이 생성되도록 설정 (적이 계속 등장)
setInterval(createEnemy, 1000); // 1초마다 적을 생성


// 키보드 입력 처리: 키를 눌렀을 때
window.addEventListener('keydown', function(e) {
    if (e.code === 'ArrowLeft') { // 왼쪽 화살표 키가 눌렸을 때
        plane.moveLeft = true; // 왼쪽 이동을 시작
    }
    if (e.code === 'ArrowRight') { // 오른쪽 화살표 키가 눌렸을 때
        plane.moveRight = true; // 오른쪽 이동을 시작
    }
});

// 키보드 입력 처리: 키를 뗐을 때
window.addEventListener('keyup', function(e) {
    if (e.code === 'ArrowLeft') { // 왼쪽 화살표 키를 뗐을 때
        plane.moveLeft = false; // 왼쪽 이동을 멈춤
    }
    if (e.code === 'ArrowRight') { // 오른쪽 화살표 키를 뗐을 때
        plane.moveRight = false; // 오른쪽 이동을 멈춤
    }
});

// 게임 루프 함수: 게임의 각 프레임을 업데이트하고 렌더링하는 함수
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 전체를 지워서 이전 프레임의 그림을 지움
    drawPlane(); // 비행기 그리기
    update(); // 비행기 위치 업데이트

    drawEnemies(); // 적 그리기
    updateEnemies(); // 적 위치 업데이트

    requestAnimationFrame(gameLoop); // 다음 프레임 호출
}

gameLoop(); // 게임 시작