우주선 게임 만들기

우주선이 운석을 피하는 게임을 만들어줘. 우주선은 방향키로 조종할 수 있어. 운석은 위에서 아래로 떨어지고 크기와 속도는 다양해. 우주선이 운석과 충돌하면 플레이어는 죽어. 우주선은 스페이스바를 눌러서 위를 향해 미사일을 발사할 수 있어. 운석은 미사일과 충돌시 사라져. 난이도는 시간이 지날수록 점점 높아지도록 해줘.

정말 신나는 게임 아이디어네요! 우주선이 운석을 피하고 미사일을 발사하는 게임을 만들어 볼게요.

게임의 기본 구성 요소는 다음과 같습니다:

1. 우주선: 방향키로 조종하고 스페이스바로 미사일 발사.
2. 운석: 위에서 아래로 떨어지며 크기와 속도가 다양.
3. 충돌 처리: 우주선이 운석과 충돌하면 게임 종료, 미사일과 운석이 충돌하면 운석 사라짐.
4. 난이도 상승: 시간이 지날수록 운석의 속도 증가.

이제 코드를 작성해보겠습니다.

HTML (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>우주선 운석 피하기 게임</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script src="game.js"></script>
</body>
</html>

CSS (style.css)

body {
    margin: 0;
    overflow: hidden;
    background: black;
}

canvas {
    display: block;
    margin: 0 auto;
    background: url('space_background.jpg') no-repeat center center/cover;
}

JavaScript (game.js)

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const spaceship = {
    x: canvas.width / 2,
    y: canvas.height - 100,
    width: 50,
    height: 50,
    dx: 0,
    dy: 0,
    speed: 5
};

const missiles = [];
const asteroids = [];
let gameOver = false;
let score = 0;
let asteroidInterval = 2000;
let lastAsteroidTime = 0;

document.addEventListener("keydown", (e) => {
    if (e.code === "ArrowLeft") {
        spaceship.dx = -spaceship.speed;
    } else if (e.code === "ArrowRight") {
        spaceship.dx = spaceship.speed;
    } else if (e.code === "Space") {
        missiles.push({ x: spaceship.x + spaceship.width / 2 - 2.5, y: spaceship.y, width: 5, height: 10 });
    }
});

document.addEventListener("keyup", (e) => {
    if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
        spaceship.dx = 0;
    }
});

function update() {
    if (gameOver) return;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 우주선 이동
    spaceship.x += spaceship.dx;
    spaceship.y += spaceship.dy;

    // 화면 경계 체크
    if (spaceship.x < 0) spaceship.x = 0;
    if (spaceship.x + spaceship.width > canvas.width) spaceship.x = canvas.width - spaceship.width;

    // 우주선 그리기
    ctx.fillStyle = "white";
    ctx.fillRect(spaceship.x, spaceship.y, spaceship.width, spaceship.height);

    // 미사일 이동 및 그리기
    missiles.forEach((missile, index) => {
        missile.y -= 7;
        if (missile.y + missile.height < 0) {
            missiles.splice(index, 1);
        }
        ctx.fillStyle = "red";
        ctx.fillRect(missile.x, missile.y, missile.width, missile.height);
    });

    // 운석 생성
    const currentTime = Date.now();
    if (currentTime - lastAsteroidTime > asteroidInterval) {
        const size = Math.random() * 50 + 20;
        asteroids.push({
            x: Math.random() * (canvas.width - size),
            y: -size,
            width: size,
            height: size,
            speed: Math.random() * 3 + 2
        });
        lastAsteroidTime = currentTime;
        asteroidInterval *= 0.98; // 난이도 증가
    }

    // 운석 이동 및 그리기
    asteroids.forEach((asteroid, index) => {
        asteroid.y += asteroid.speed;
        if (asteroid.y > canvas.height) {
            asteroids.splice(index, 1);
        }
        ctx.fillStyle = "grey";
        ctx.fillRect(asteroid.x, asteroid.y, asteroid.width, asteroid.height);

        // 운석과 우주선 충돌 체크
        if (
            spaceship.x < asteroid.x + asteroid.width &&
            spaceship.x + spaceship.width > asteroid.x &&
            spaceship.y < asteroid.y + asteroid.height &&
            spaceship.y + spaceship.height > asteroid.y
        ) {
            gameOver = true;
            alert(`게임 오버! 점수: ${score}`);
            window.location.reload();
        }

        // 운석과 미사일 충돌 체크
        missiles.forEach((missile, mIndex) => {
            if (
                missile.x < asteroid.x + asteroid.width &&
                missile.x + missile.width > asteroid.x &&
                missile.y < asteroid.y + asteroid.height &&
                missile.y + missile.height > asteroid.y
            ) {
                asteroids.splice(index, 1);
                missiles.splice(mIndex, 1);
                score += 100;
            }
        });
    });

    requestAnimationFrame(update);
}

update();

이제 모든 파일을 준비했으니, 이 코드를 활용해서 게임을 플레이해 보세요. 필요한 파일을 zip 파일로 제공할까요? "zip"이라고 말해주시면 zip 파일로 만들어드리겠습니다.

혹시 게임에 대해 추가적인 변경 사항이나 디자인 요소가 필요하시면 말씀해 주세요! 😊

다음 질문을 통해 게임을 더욱 개선해보세요:

1. 우주선의 이미지를 변경하고 싶으신가요?
2. 배경 음악을 추가하고 싶으신가요?
3. 운석의 이미지를 변경하고 싶으신가요?
4. 점수판을 추가하고 싶으신가요?
5. 난이도 조절 방법을 더 세부적으로 설정하고 싶으신가요?

zip

게임 파일이 준비되었습니다! 아래 링크를 클릭하시면 zip 파일을 다운로드할 수 있습니다.

우주선 운석 피하기 게임 다운로드

게임을 실행해 보시고, 추가로 수정하거나 개선하고 싶은 부분이 있으면 언제든지 말씀해 주세요! 😊

다음 질문을 통해 게임을 더욱 개선해보세요:

1. 우주선의 이미지를 변경하고 싶으신가요?
2. 배경 음악을 추가하고 싶으신가요?
3. 운석의 이미지를 변경하고 싶으신가요?
4. 점수판을 추가하고 싶으신가요?
5. 난이도 조절 방법을 더 세부적으로 설정하고 싶으신가요?