우주선 게임 만들기

ユーザー

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

<나만의 웹게임 Maker> 게임 만들기 v1.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. **난이도 상승**: 시간이 지날수록 운석의 속도 증가. 이제 코드를 작성해보겠습니다. ### HTML (`index.html`) ```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`) ```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`) ```javascript 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. 난이도 조절 방법을 더 세부적으로 설정하고 싶으신가요?

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

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

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

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

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

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

게임 파일이 준비되었습니다! 아래 링크를 클릭하시면 zip 파일을 다운로드할 수 있습니다. [우주선 운석 피하기 게임 다운로드](sandbox:/mnt/data/space_game.zip) 게임을 실행해 보시고, 추가로 수정하거나 개선하고 싶은 부분이 있으면 언제든지 말씀해 주세요! 😊 다음 질문을 통해 게임을 더욱 개선해보세요: 1. 우주선의 이미지를 변경하고 싶으신가요? 2. 배경 음악을 추가하고 싶으신가요? 3. 운석의 이미지를 변경하고 싶으신가요? 4. 점수판을 추가하고 싶으신가요? 5. 난이도 조절 방법을 더 세부적으로 설정하고 싶으신가요?

우주선 게임 만들기

ユーザー

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

HTML (index.html)

CSS (style.css)

JavaScript (game.js)

ユーザー

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

HTML (index.html)

CSS (style.css)

JavaScript (game.js)

HTML (`index.html`)

CSS (`style.css`)

JavaScript (`game.js`)

HTML (`index.html`)

CSS (`style.css`)

JavaScript (`game.js`)