[웹 게임 개발] 스틱 히어로 - 게임 인트로 만들기(1)

폴더 구성

기본적은 게임을 구성하는 파일과 폴더를 생성합니다.

HTML 파일 생성

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>스틱 히어로 게임</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="550"></canvas>
<script src="js/game.js"></script>
</body>
</html>

이렇게 구성된 HTML파일은 캔버스를 생성하고, 외부 스타일시트 및 스크립트를 연결합니다. 게임 디자인과 로직을 구현할 수 있게 설정 합니다.

캔버스 위치 설정

canvas {
    border: 1px solid black;
    display: block;
    margin: 0 auto;
}

캔버스는 기본적으로 인라인 요소라서(inline element), 블록 요소로 변경해야 레이아웃을 가운데 정렬을 할수 있습니다.

캔버스 제어

game.js에 아래 코드를 작성 합니다.

// 캔버스 요소와 그래픽 컨텍스트를 가져옵니다.
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

캔버스 태그 요소를 HTML에서 가져와 2D 그래픽 컨텍스트를 얻어옵니다

게임 크기 설정

// 캔버스 크기 설정
let gameWidth = canvas.width = 400;
let gameHeigt= canvas.height = 550;

추후 게임 크기 설정 변경하기 좋게 변수 지정 합니다.

게임 제목 생성

game.js에 gameIntro() 함수를 생성합니다.

function gameIntro(){
    const text = "Stick Hero"
    ctx.fillStyle = 'black'
    ctx.textAlign = 'center'; // 가로 중앙 정렬
    ctx.font = "bold 34px Arial "
    ctx.fillText(text, canvas.width / 2, 70)
}

window.onload = gameIntro

웹 페이지가 로드가 완료 되면 gameIntro 함수를 실행 되며, "Stick Hero" 상단 가운데에 글을 작성 합니다.

게임 시작 버튼 생성

똑같이 gameIntro함수에 아래 코드를 작성합니다.

    //게임 시작 버튼과 글생성
    const btnPositionX = canvas.width / 2
    const btnPositionY = canvas.height / 2 - 100
    const radius = 50
    ctx.fillStyle = "red"
    ctx.beginPath();
    ctx.arc(btnPositionX,btnPositionY, radius,  0, 2 * Math.PI, false);
    ctx.fill();

    const btnText = "Start"
    ctx.font = "bold 30px Arial"
    ctx.textBaseline ="middle"
    ctx.fillStyle = "white"
    ctx.fillText(btnText, btnPositionX, btnPositionY)

버튼을 배치하고 "Start" 글자를 생성합니다.