우주선 게임 만들기

Anonymous

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

<나만의 웹게임 Maker> 게임 만들기 v1.3

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

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

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

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

HTML (`index.html`)

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

CSS (`style.css`)

css
1body {
2    margin: 0;
3    overflow: hidden;
4    background: black;
5}
6
7canvas {
8    display: block;
9    margin: 0 auto;
10    background: url('space_background.jpg') no-repeat center center/cover;
11}

JavaScript (`game.js`)

javascript
1const canvas = document.getElementById("gameCanvas");
2const ctx = canvas.getContext("2d");
3
4canvas.width = window.innerWidth;
5canvas.height = window.innerHeight;
6
7const spaceship = {
8    x: canvas.width / 2,
9    y: canvas.height - 100,
10    width: 50,
11    height: 50,
12    dx: 0,
13    dy: 0,
14    speed: 5
15};
16
17const missiles = [];
18const asteroids = [];
19let gameOver = false;
20let score = 0;
21let asteroidInterval = 2000;
22let lastAsteroidTime = 0;
23
24document.addEventListener("keydown", (e) => {
25    if (e.code === "ArrowLeft") {
26        spaceship.dx = -spaceship.speed;
27    } else if (e.code === "ArrowRight") {
28        spaceship.dx = spaceship.speed;
29    } else if (e.code === "Space") {
30        missiles.push({ x: spaceship.x + spaceship.width / 2 - 2.5, y: spaceship.y, width: 5, height: 10 });
31    }
32});
33
34document.addEventListener("keyup", (e) => {
35    if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
36        spaceship.dx = 0;
37    }
38});
39
40function update() {
41    if (gameOver) return;
42
43    ctx.clearRect(0, 0, canvas.width, canvas.height);
44
45    // 우주선 이동
46    spaceship.x += spaceship.dx;
47    spaceship.y += spaceship.dy;
48
49    // 화면 경계 체크
50    if (spaceship.x < 0) spaceship.x = 0;
51    if (spaceship.x + spaceship.width > canvas.width) spaceship.x = canvas.width - spaceship.width;
52
53    // 우주선 그리기
54    ctx.fillStyle = "white";
55    ctx.fillRect(spaceship.x, spaceship.y, spaceship.width, spaceship.height);
56
57    // 미사일 이동 및 그리기
58    missiles.forEach((missile, index) => {
59        missile.y -= 7;
60        if (missile.y + missile.height < 0) {
61            missiles.splice(index, 1);
62        }
63        ctx.fillStyle = "red";
64        ctx.fillRect(missile.x, missile.y, missile.width, missile.height);
65    });
66
67    // 운석 생성
68    const currentTime = Date.now();
69    if (currentTime - lastAsteroidTime > asteroidInterval) {
70        const size = Math.random() * 50 + 20;
71        asteroids.push({
72            x: Math.random() * (canvas.width - size),
73            y: -size,
74            width: size,
75            height: size,
76            speed: Math.random() * 3 + 2
77        });
78        lastAsteroidTime = currentTime;
79        asteroidInterval *= 0.98; // 난이도 증가
80    }
81
82    // 운석 이동 및 그리기
83    asteroids.forEach((asteroid, index) => {
84        asteroid.y += asteroid.speed;
85        if (asteroid.y > canvas.height) {
86            asteroids.splice(index, 1);
87        }
88        ctx.fillStyle = "grey";
89        ctx.fillRect(asteroid.x, asteroid.y, asteroid.width, asteroid.height);
90
91        // 운석과 우주선 충돌 체크
92        if (
93            spaceship.x < asteroid.x + asteroid.width &&
94            spaceship.x + spaceship.width > asteroid.x &&
95            spaceship.y < asteroid.y + asteroid.height &&
96            spaceship.y + spaceship.height > asteroid.y
97        ) {
98            gameOver = true;
99            alert(`게임 오버! 점수: ${score}`);
100            window.location.reload();
101        }
102
103        // 운석과 미사일 충돌 체크
104        missiles.forEach((missile, mIndex) => {
105            if (
106                missile.x < asteroid.x + asteroid.width &&
107                missile.x + missile.width > asteroid.x &&
108                missile.y < asteroid.y + asteroid.height &&
109                missile.y + missile.height > asteroid.y
110            ) {
111                asteroids.splice(index, 1);
112                missiles.splice(mIndex, 1);
113                score += 100;
114            }
115        });
116    });
117
118    requestAnimationFrame(update);
119}
120
121update();

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

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

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

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

Anonymous

zip

<나만의 웹게임 Maker> 게임 만들기 v1.3

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

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

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

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

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

우주선 게임 만들기

HTML (index.html)

CSS (style.css)

JavaScript (game.js)

HTML (`index.html`)

CSS (`style.css`)

JavaScript (`game.js`)