웹브라우저에 공이 사각형 안에 움직이는 화면

화면은 다음과 같습니다.


Python으로 웹 게임을 만들기 위해서는 웹 프레임워크와 JavaScript를 함께 사용하는 방식이 일반적입니다. Python을 이용해 서버 측 로직을 처리하고, JavaScript를 이용해 클라이언트 측에서 게임 인터페이스와 상호작용을 처리하는 방식입니다. 여기에 Flask와 HTML5, JavaScript를 사용하여 간단한 웹 화면을 만들어 보도록 하겠습니다.

1. Flask 설정 및 기본 구조

Flask는 간단한 웹 애플리케이션을 개발할 수 있는 Python 웹 프레임워크입니다. Flask를 사용하여 게임을 호스팅할 수 있습니다.

1.1 Flask 설치

먼저 Flask를 설치합니다.

pip install flask

1.2 프로젝트 구조

프로젝트 구조는 아래와 같이 구성됩니다:

flask_game/
│
├── app.py              # Flask 서버 코드
├── static/
│   └── game.js         # JavaScript 파일
└── templates/
    └── index.html      # HTML 파일 (게임 인터페이스)

2. Flask 서버 코드 (app.py)

Flask 서버는 HTML 페이지를 렌더링하고 클라이언트 요청을 처리하는 역할을 합니다. 여기에선 간단한 웹 페이지를 보여주는 서버를 구현합니다.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)
  • @app.route('/'): 기본 URL(홈페이지)에서 index.html 페이지를 렌더링합니다.
  • app.run(debug=True): 애플리케이션을 디버그 모드에서 실행합니다.

3. HTML5와 JavaScript로 게임 인터페이스 만들기 (index.html)

index.html 파일에서는 HTML5와 JavaScript를 사용해 간단한 게임 인터페이스를 만듭니다. 여기서는 공을 좌우로 움직이며 화면에서 떨어지지 않게 유지하는 간단한 게임을 만들 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Web Game</title>
    <style>
        canvas {
            background: #f0f0f0;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Web Game</h1>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

    <script src="{{ url_for('static', filename='game.js') }}"></script>
</body>
</html>
  • canvas: 게임이 렌더링될 HTML5 캔버스입니다. 여기에 공을 그리게 됩니다.
  • {{ url_for('static', filename='game.js') }}: Flask가 static 폴더에서 game.js 파일을 불러옵니다.

4. JavaScript로 게임 로직 처리 (game.js)

다음은 간단한 JavaScript 코드로 공을 좌우로 움직이며 화면 밖으로 떨어지지 않게 유지하는 게임 로직입니다.

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

let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;
const ballRadius = 10;

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function updateBallPosition() {
    if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }

    if(y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }

    x += dx;
    y += dy;
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    updateBallPosition();
    requestAnimationFrame(gameLoop);
}

document.addEventListener("keydown", (event) => {
    if (event.code === "ArrowLeft" && x - ballRadius > 0) {
        x -= 10;
    } else if (event.code === "ArrowRight" && x + ballRadius < canvas.width) {
        x += 10;
    }
});

gameLoop();

설명

  • canvas: HTML5 캔버스 요소를 통해 그래픽을 그리는 공간을 제공합니다.
  • drawBall(): 공을 그리는 함수입니다.
  • updateBallPosition(): 공의 좌표를 업데이트하고, 공이 화면 경계에 도달하면 방향을 반대로 바꿉니다.
  • gameLoop(): 게임의 메인 루프입니다. 화면을 계속해서 업데이트하며 공을 움직입니다.
  • keydown 이벤트: 좌우 화살표 키를 눌러 공을 좌우로 움직일 수 있습니다.

5. Flask 웹 애플리케이션 실행

이제 app.py 파일이 있는 디렉터리에서 Flask 서버를 실행합니다.

python app.py
  • 브라우저에서 http://127.0.0.1:5000/으로 접속하면 간단한 공 움직이기 게임이 실행됩니다.

6. 요약

이 프로젝트는 간단한 Flask 기반의 웹 게임을 구현한 예제입니다. 주요 구성 요소는 다음과 같습니다:

  1. Flask 서버 (app.py): HTML 페이지를 서빙하고 웹 게임을 호스팅합니다.
  2. HTML5 Canvas: 게임 인터페이스를 제공하고 그래픽을 그립니다.
  3. JavaScript (game.js): 게임 로직을 처리하고 공을 움직이며, 플레이어가 키보드로 상호작용할 수 있도록 합니다.

목록

댓글 쓰기

댓글 저장

댓글 목록