[Web Game] 달려라 르탄이 웹 게임 만들기

이번 글에서는 스파르타 코딩클럽에서 무료로 제공하는 르탄이 달리기 게임 개발 과정을 기록해보려고 한다. HTML, CSS, JavaScript를 사용해 간단한 게임을 개발하며 웹 개발의 기본기를 다질 수 있는 좋은 기회가 되었다. 개발 도구로는 VS Code를 사용했으며, 기본적인 웹 기술들을 활용해 게임을 구현해 나가는 실습을 해볼 예정이다.

이번 프로젝트는 JavaScript로 게임의 동작을 제어하고, CSS를 통해 게임 화면의 스타일을 꾸미며, HTML로 게임의 구조를 구성하는 방식으로 진행된다. 이 과정에서 화면 요소를 움직이게 만드는 방법, 사용자 입력에 반응하는 방법, 스타일과 애니메이션을 적용하는 기법 등을 학습할 수 있었다. 

HTML

HTML 파일에서는 페이지의 기본적인 레이아웃을 구성하고, 점수와 부제목을 표시하는 요소를 포함하여 사용자에게 현재 점수를 실시간으로 보여준다. canvas 요소를 통해 게임 화면을 렌더링하며, 이곳에서 캐릭터와 장애물 등 게임의 주요 그래픽이 그려지고 움직이게 된다. 

CSS

CSS 스타일링 코드는 르탄이 달리기 게임의 페이지 디자인을 정리한다.

body 요소는 부드러운 회색 배경색과 약간의 패딩을 적용해 전체 페이지 여백을 추가하고, 텍스트는 기본 색으로 설정했다.

canvas 요소는 게임이 렌더링되는 화면이므로 중앙에 배치하고 흰색 배경과 테두리, 둥근 모서리를 적용해 시각적으로 돋보이도록 스타일링했다.

부제목과 점수는 화면 중앙에 배치했다. 점수는 굵은 글씨로 강조해 가독성을 높였다.

JavaScript

JavaScript로는 게임의 동작을 구현했다.

이 강의에서는 캔버스 요소를 가져온 후 크기 설정을 js 코드로 구현한 후 2d 렌더링했다. 그 후, 게임의 기본 상태와 점수, 배경, 이동 속도 등을 초기화 해주었다. 캔버스 위 배경 이미지는 스크롤 효과를 주어 달리는 느낌을 연출했다.

플레이어블 캐릭터는 rtan 객체로, 게임 중 달리거나 충돌 시 이미지가 다르게 나타나도록 했다.

장애물은 클래스로 정의되어 일정 주기로 생성되고, 화면을 가로질러 이동한다.

 게임이 시작되면 애니메이션이 반복되고, 캐릭터는 점프할 수 있어 장애물을 피할 수 있다. 충돌이 감지되면 점수가 표시되고 게임이 종료됩니다. 게임 시작 및 재시작 버튼과 소리를 추가해 사용자가 상호작용할 수 있게 했다.

마무리

1시간이라는 짧은 강의 시간, 코딩에 대한 흥미를 이끌어내는 것을 주 목적으로 한 강의라 코드 자체는 무척 이해하기 쉽게 구성되어 있었다. HTML, CSS, JavaScript가 어떻게 상호작용하며 하나의 프로젝트를 이루는지를 자연스럽게 익힐 수 있었고, 비개발자도 부담 없이 따라올 수 있도록 설명이 간결하고 명확하게 이루어졌다.

만약 웹개발이나 게임개발을 배워보고 싶은데 아직 용기가 안 난다면, 이 강의로 첫 발을 내딛어보는 것을 추천하고 싶다. 기본적인 웹 개발 개념부터 코드를 직접 입력해보는 경험까지, 실습을 통해 작은 프로젝트를 완성해보는 성취감을 느낄 수 있을 것이다.