> 웹 프론트엔드 > JS 튜토리얼 > JSM 프로그래밍 챌린지에서 우승한 방법

JSM 프로그래밍 챌린지에서 우승한 방법

Linda Hamilton
풀어 주다: 2024-09-20 06:50:02
원래의
722명이 탐색했습니다.

How I Won the JSM Programming Challenge

JSM 프로그래밍 챌린지는 프로그래밍 챌린지의 광대한 세계에서 개발자가 자신의 기술과 창의성을 선보일 수 있는 절호의 기회입니다. 지난 달 주제인 "비디오 게임"은 참가자들이 게임 개발의 새로운 영역을 탐험하도록 유도하는 흥미진진한 경쟁의 장을 마련했습니다. 이 블로그 게시물에서는 성간 코딩 모험에서 궁극적으로 나를 승리로 이끈 게임인 "Cosmic Explorer"를 어떻게 만들었는지에 대한 여정을 공유하겠습니다.

게임: 우주 탐험가
코드: GitHub

과제: 가능성의 우주

JSM 프로그래밍 챌린지는 참가자들에게 "비디오 게임"이라는 광범위한 주제를 제시했습니다. 우리는 처음부터 비디오 게임을 만들거나, 게임 API를 활용하거나, 심지어 기존 게임에 대한 팬 페이지를 구축할 수도 있었습니다. 가능성은 우주만큼이나 무궁무진했습니다.

나의 길을 선택하다: 우주탐험가의 탄생

내 여자친구(스포일러 경고, 이 챌린지에서 내 비밀 무기가 됨)와 몇 가지 브레인스토밍 세션을 마친 후 우리는 우주 기반 게임을 만들기로 결정했습니다. 그리하여 우주 탐사, 머나먼 행성에서 자원 수집, 적 함선 전투를 중심으로 한 게임인 "Cosmic Explorer"가 탄생했습니다.

여행 준비: Phaser 학습

제가 내린 가장 중요한 결정 중 하나는 게임 개발 라이브러리로 Phaser를 선택한 것입니다. 이전에 웹 게임을 만들어 본 적이 없음에도 불구하고 저는 Phaser의 기능에 매료되어 뛰어들기로 결정했습니다. 이 결정은 대회 기간 동안 저의 가장 큰 도전이자 가장 중요한 학습 경험을 위한 발판을 마련했습니다.

// Example of initializing a Phaser game
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);
로그인 후 복사

가장 힘든 소행성 필드: 페이저 마스터하기

게임 개발과 동시에 Phaser를 배우는 것은 소행성 지대를 워프 속도로 탐색하는 것과 같았습니다. 학습 곡선은 가파르고 때로는 우주에서 길을 잃은 것처럼 느껴졌습니다. 그러나 진행하면서 상황이 제자리를 잡기 시작했습니다. 내 코드는 깔끔한 별표라기보다는 스파게티에 더 가까웠지만 작업은 완료되었습니다.

// Example of adding a sprite in Phaser
function create() {
    this.add.image(400, 300, 'sky');
    this.player = this.physics.add.sprite(100, 450, 'player');
    this.player.setCollideWorldBounds(true);
}
로그인 후 복사

예상치 못한 성운: 치열한 경쟁

챌린지는 24일 동안 진행되었는데, 첫 출시 후 5일 만에 여행을 떠난 줄 알았습니다. 그동안 저는 Cosmic Explorer 개발에 편안한 자세로 접근해왔습니다. 영감을 받았을 때 작업했고 필요할 때 휴식을 취했습니다. 이러한 접근 방식을 통해 프로세스가 즐겁게 진행되고 번아웃이 방지되었습니다.

새로운 별자리: 학습과 성장

이번 챌린지를 통해 저는 제 프로그래밍 툴킷인 Phaser에서 새로운 별자리를 발견했습니다. 이 라이브러리를 사용하는 방법을 배우면서 게임 개발에서 이전에 탐색하지 못했던 완전히 새로운 가능성의 은하계가 열렸습니다.

승리의 공식: 향수와 원활한 게임 플레이

Cosmic Explorer의 차별화된 점은 향수를 불러일으키는 픽셀 아트(제 놀라운 여자친구가 모든 것을 만들었고 확실히 제가 승리하게 해준 작품)와 현대적인 게임플레이 요소가 혼합되어 있다는 것입니다. 시차별 배경은 몰입감 넘치는 경험을 선사했으며, 움직임 시스템은 많은 플레이어들로부터 호평을 받았습니다. 레트로풍의 음향 효과는 심사위원과 선수 모두에게 공감을 불러일으키며 또 다른 매력을 더했습니다.

// Example of creating a parallax background
function create() {
    this.bg1 = this.add.tileSprite(0, 0, config.width, config.height, 'background1').setOrigin(0, 0);
    this.bg2 = this.add.tileSprite(0, 0, config.width, config.height, 'background2').setOrigin(0, 0);
}

function update() {
    this.bg1.tilePosition += 0.5;
    this.bg2.tilePosition += 1;
}
// This was not my solution, but the same principle. Check out the GitHub repo for the solution :)
로그인 후 복사

미래 우주 사관생도를 위한 조언

비슷한 코딩 여정을 시작하려는 분들을 위해 다음 조언을 드립니다.

  1. 일보다는 재미로 하세요.
  2. 필요할 때 휴식을 취하세요. 돌아오더라도 우주는 여전히 거기에 있을 것입니다.
  3. 학습 경험을 포용하세요.
  4. 치열한 경쟁에 좌절하지 말고 동기부여로 활용하세요.
  5. 우승하지 못했다고 해서 프로그램이 좋지 않다는 의미는 아닙니다. 모든 창작물에는 가치가 있습니다.

결론

Cosmic Explorer를 사용하여 JSM 프로그래밍 챌린지에서 우승한 것은 방대한 게임 개발 과정을 거치는 놀라운 여정이었습니다. 그것은 나에게 새로운 기술을 가르쳐 주고, 나의 한계를 넓혔으며, 가장 중요한 것은 나에게 코딩의 즐거움을 상기시켜 주었다는 것입니다. 노련한 우주 선장이든, 신인 생도이든, 비슷한 도전에 도전해 보시기 바랍니다. 어떤 새로운 세계를 발견하게 될지 결코 알 수 없습니다.

즐거운 코딩을 즐기시기 바랍니다. 컴파일 시간이 짧고 버그가 줄어들기를 바랍니다!

위 내용은 JSM 프로그래밍 챌린지에서 우승한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿