🚀 챗GPT로 포켓몬 슈팅 게임 만들기

런빌더2024-05-27 12:51

요약

챗GPT와 함께 간단한 포켓몬 슈팅 게임 개발 과정을 단계별로 안내합니다.
HTML과 JavaScript를 사용하여 코드 작성, 플레이어 조작, 장애물 생성 등 기능을 구현합니다.
게임에 포켓몬 이미지, 배경 음악, 효과음을 추가하여 게임을 완성하고 실제 웹서버에 업로드하여 플레이 가능합니다.

😀 챗GPT로 포켓몬 슈팅 게임 만들기

🔗 탕탕포켓몬 슈팅게임 바로가기

포켓몬 슈팅 게임을 만들고 싶으신가요? 챗GPT와 함께라면 누구나 쉽게 만들 수 있습니다. 이번 글에서는 챗GPT를 이용해 포켓몬 슈팅 게임을 만드는 과정을 단계별로 설명드리겠습니다.

1. 게임 시작하기

먼저, 챗GPT에게 프론트엔드 개발자로 역할을 부여하고 게임을 만들기 시작합시다. HTML 파일 하나에 모든 코드를 작성하여 간단한 슈팅 게임을 만들어보겠습니다. 코드펜(CodePen)을 이용하면 실시간으로 결과를 확인할 수 있어 편리합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pokemon Shooting Game</title>
    <style>
        canvas {
            background: url('background.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // Initial game setup
    let player = { x: 400, y: 500, width: 50, height: 50, color: 'blue' };
    let bullets = [];
    let obstacles = [];

    function drawPlayer() {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.width, player.height);
    }

    function drawBullet(bullet) {
        ctx.fillStyle = bullet.color;
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    }

    function drawObstacle(obstacle) {
        ctx.fillStyle = obstacle.color;
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }

    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        bullets.forEach(drawBullet);
        obstacles.forEach(drawObstacle);
        requestAnimationFrame(gameLoop);
    }

    document.addEventListener('keydown', (e) => {
        if (e.code === 'ArrowLeft') player.x -= 10;
        if (e.code === 'ArrowRight') player.x += 10;
        if (e.code === 'Space') bullets.push({ x: player.x + 20, y: player.y, width: 5, height: 10, color: 'red' });
    });

    gameLoop();
</script>
</body>
</html>

2. 플레이어 움직임 추가

플레이어를 키보드로 조작할 수 있게 만들어 보겠습니다. 챗GPT에게 키보드 입력을 받아 플레이어가 좌우로 움직이도록 코드를 추가해 달라고 요청합니다.

document.addEventListener('keydown', (e) => {
    if (e.code === 'ArrowLeft') player.x -= 10;
    if (e.code === 'ArrowRight') player.x += 10;
    if (e.code === 'Space') bullets.push({ x: player.x + 20, y: player.y, width: 5, height: 10, color: 'red' });
});

3. 적 장애물 추가

적 장애물이 위에서 아래로 떨어지도록 코드를 추가합니다. 장애물을 만들어 내려오게 하고, 총알로 맞추면 장애물이 사라지게 합니다.

function createObstacle() {
    obstacles.push({ x: Math.random() * 800, y: 0, width: 50, height: 50, color: 'green' });
}

setInterval(createObstacle, 2000);

function updateObstacles() {
    obstacles.forEach(obstacle => obstacle.y += 5);
    obstacles = obstacles.filter(obstacle => obstacle.y < 600);
}

function checkCollisions() {
    bullets.forEach((bullet, bulletIndex) => {
        obstacles.forEach((obstacle, obstacleIndex) => {
            if (bullet.x < obstacle.x + obstacle.width &&
                bullet.x + bullet.width > obstacle.x &&
                bullet.y < obstacle.y + obstacle.height &&
                bullet.y + bullet.height > obstacle.y) {
                obstacles.splice(obstacleIndex, 1);
                bullets.splice(bulletIndex, 1);
            }
        });
    });
}

4. 게임 정보 표시

게임 화면 상단에 시간과 에너지를 표시합니다. 장애물과 충돌 시 에너지가 감소하게 코드를 수정합니다.

let energy = 10;
let time = 0;

function drawInfo() {
    ctx.fillStyle = 'white';
    ctx.font = '20px Arial';
    ctx.fillText(`Energy: ${energy}`, 10, 20);
    ctx.fillText(`Time: ${time}`, 700, 20);
}

setInterval(() => time++, 1000);

function checkCollisions() {
    bullets.forEach((bullet, bulletIndex) => {
        obstacles.forEach((obstacle, obstacleIndex) => {
            if (bullet.x < obstacle.x + obstacle.width &&
                bullet.x + bullet.width > obstacle.x &&
                bullet.y < obstacle.y + obstacle.height &&
                bullet.y + bullet.height > obstacle.y) {
                obstacles.splice(obstacleIndex, 1);
                bullets.splice(bulletIndex, 1);
            }
        });
    });

    obstacles.forEach(obstacle => {
        if (player.x < obstacle.x + obstacle.width &&
            player.x + player.width > obstacle.x &&
            player.y < obstacle.y + obstacle.height &&
            player.y + player.height > obstacle.y) {
            energy--;
            obstacles.splice(obstacleIndex, 1);
        }
    });
}

5. 게임 완성

포켓몬 이미지를 사용하여 플레이어와 장애물을 변경하고, 배경 음악과 효과음을 추가합니다.

<style>
    canvas {
        background: url('background.jpg') no-repeat center center;
        background-size: cover;
    }
</style>

<script>
    let playerImg = new Image();
    playerImg.src = 'player.png';

    let obstacleImg = new Image();
    obstacleImg.src = 'obstacle.png';

    function drawPlayer() {
        ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);
    }

    function drawObstacle(obstacle) {
        ctx.drawImage(obstacleImg, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }

    let bgMusic = new Audio('background.mp3');
    bgMusic.loop = true;
    bgMusic.play();

    let hitSound = new Audio('hit.mp3');

    function checkCollisions() {
        bullets.forEach((bullet, bulletIndex) => {
            obstacles.forEach((obstacle, obstacleIndex) => {
                if (bullet.x < obstacle.x + obstacle.width &&
                    bullet.x + bullet.width > obstacle.x &&
                    bullet.y < obstacle.y + obstacle.height &&
                    bullet.y + bullet.height > obstacle.y) {
                    obstacles.splice(obstacleIndex, 1);
                    bullets.splice(bulletIndex, 1);
                    hitSound.play();
                }
            });
        });

        obstacles.forEach((obstacle, obstacleIndex) => {
            if (player.x < obstacle.x + obstacle.width &&
                player.x + player.width > obstacle.x &&
                player.y < obstacle.y + obstacle.height &&
                player.y + player.height > obstacle.y) {
                energy--;
                obstacles.splice(obstacleIndex, 1);
                hitSound.play();
            }
        });
    }
</script>

이제 게임이 완성되었습니다! 코드를 웹 서버에 업로드하여 실제로 게임을 즐길 수 있습니다. 여러분도 직접 따라 해보시고 자신만의 게임을 만들어 보세요.

🎥참고영상 :