자바스크립트로 퐁(Pong) 게임 만들기 (프롤로그 )

어렸을 때, 나는 게임을하는 것을 좋아했습니다. 나이가 들어감에 따라 직접 만들어 보고 싶었습니다. 그리고 성인이 되어 게임 제작을 직업으로 하고 있습니다.

나는 내 일자리를 정말로 즐깁니다. 그러나 나는 여전히 게임을 만드는 것에 대해 생각합니다. 그러면 간단한 퐁게임을 자바스크립트로 만들어 보겠습니다.

여기서 데모게임을 할수 있습니다.

여기서 게임코드를 찾을수 있습니다.

나는 각각을 위한 데모와 함께 5 개의 섹션으로 게임개발 내용을 나누었습니다.

GameRunner

Part1에서는 GameRunner를 소개합니다. 캔버스 게임을 만드는 데 필요한 최소한의 프레임 워크로 60fps 이중 버퍼 캔버스 게임 루프를 제공하므로 update () 메서드가 호출 될 때마다 게임 상태를 업데이트하고 draw () 메서드가 호출 될 때마다 게임 자체를 렌더링하는 데 집중할 수 있습니다.

Bouncing Balls

Part 2에서는 GameRunner 프레임 워크를 사용하여 간단한 튀는 공 예제를 표시하고 GameRunner와 Pong 게임 자체의 분리를 보여줍니다.

GameLoop

Part 3에서는 GameLoop를 소개합니다. 기본 메뉴로 시작하여 사용자 입력으로 게임을 시작하거나, 승자가있을 때까지 게임을 실행하거나, 사용자가 포기할 때까지 기다린 다음 메뉴로 돌아가서 반복합니다.

충돌 감지

Part 4에서는 패들과 볼 사이의 충돌 감지 기능을 구현하여 처음으로 게임을 실행하게하여 게임 자체의 문제점을 해결했습니다. 컴퓨터 AI는 없지만 이제는 2 명이 즐길 수 있습니다.

컴퓨터 인공 지능

Part 5에서는 컴퓨터 플레이어 용 기본 AI를 구현합니다. 싱글 플레이어 게임을하거나 심지어 컴퓨터 게임을 보는 것도 허용합니다.

결론

Pong은 상당히 사소한 게임이지만 여전히 제대로 작동하려면 인프라가 약간 필요합니다. 이것은 다소 지나치게 엔지니어링 된 버전이지만 여전히 추가 될 수있는 것이 더 있습니다 :

터치 이벤트 - 모바일 브라우저의 경우 사용자 입력에 대해 다른 디자인이 필요합니다. 아마도 패들 이동에 대한 터치 이벤트를 지원할 수 있습니다.

CSS @media 쿼리 - 우리는 아마도 사용자 화면 영역을 기반으로 퐁 게임 캔버스를 확장해야합니다. (업데이트 : 이것은 마지막 순간에 추가되었으며, 브라우저 창 크기로 놀고 무슨 일이 일어나는 지 봅니다)

requestAnimationFrame - 이중 버퍼링 및 60fps로 잠긴 경우에도 애니메이션에 약간의 자국이 남아 있습니다. 가비지 콜렉션 또는 제어가 불가능한 vsync 문제 일 수도 있지만 setInterval과 같은 충실도가 낮은 타이밍 메커니즘을 사용하는 것도 효과가 없습니다. 최신 브라우저에서는 requestAnimationFrame을 구현하여 게임 루프를 통해 미세한 입자 제어가 가능하지만 아직 주요 시간대에는 준비가되어 있지 않습니다.

이 구현은 미래의 다른 간단한 게임으로 성장할 수있는 기본 프레임 워크를 제공합니다. 앞으로 몇 개월 동안 좀 더 작은 게임을 개발하고 싶습니다. 꽤 작 으면 무언가를 완성 할 가능성이 가장 높다고 가정하면 브레이크 아웃, 뱀, 테트리스, 영웅, 돌격, 돌 발치 등 오래된 고전 게임의 캔버스 버전을 만들 수 있다고 상상합니다.