2D 횡스크롤 점프 게임 제작기(항해플러스 코육대 2회)

아직 기본적인 기능 위주로 제작된 상태입니다. 만들면서 추가로 업데이트될 수 있습니다.

---

항해플러스에서 주최하는 코육대의 과제 중 "개발자의 편지"를 수행하기로 하고 빠르게 작업을 해보았습니다.
여러 주제 중 스캔을 하는 과정에서 빠르게 기본 작업만을 마치고 나서 작업을 공유해봅니다.

Repository 바로 가기 / 게임 시연하기

GitHub - fliklab/p5-jumping-game: A Jumping Game made with p5.js

코육대 대회 관련 정보는 여기를 참고하세요
(참가하시는 분이 있다면 제출시 추천인 Flik을 작성하고 가산점 +1점 받으세요)

반응형

---

기술 스택

JavaScript와 p5.js

우선 웹 기반으로 작업을 하기로 결정했고, javascript를 사용했습니다. 우선 빨리 만드는게 목표여서 다른 프레임워크는 사용하지 않고 기본적인 기능을 만들기로 했습니다. 그래픽 라이브러리로는 p5.js를 사용했습니다. 2D 게임 개발에 필요한 기능을 구현하는데 충분할 것으로 생각됩니다.

코드 설계

게임의 주요 구성 요소를 몇명 클래스로 나누어 관리하였습니다.
간단한 기능이지만 몇가지 객체로 코드를 분리하면서 가독성과 유지보수성을 높이려고 했습니다.

Character
Obstacle
Background
GameManager
 
추가로, 게임에서 사용되는 장애물과 스테이지는 json으로 정의하고 추후에 커스텀으로 설계할 수 있도록 하려고 했습니다.

1. Character

• 캐릭터의 모든 동작을 관리합니다. (그래픽 표현, 이동, 점프)

class Character {
    constructor() {
        this.x = 50;
        this.y = 300; // 바닥 높이
        this.gravity = 0.6;
        this.lift = -15;
        this.velocity = 0;
    }

    show() {
        fill(255);
        ellipse(this.x, this.y, 50, 50); // 원형 캐릭터
    }

    update() {
        this.velocity += this.gravity;
        this.y += this.velocity;

        if (this.y > 300) {
            this.y = 300;
            this.velocity = 0;
        }
    }

    jump() {
        if (this.y === 300) {
            this.velocity += this.lift;
        }
    }
}

2. Obstacle

• 게임 내 존재하는 장애물을 Object로 정의하고, 장애물을 화면에 그릴 수 있도록 별도 클래스 Obstacle을 만들었습니다.
• 장애물의 위치 값을 업데이트하고 캐릭터와 충돌했는지 판별하는 메소드가 포함되어 있습니다.

const obstacleTypes = {
  redBox: {
    color: [255, 0, 0],
    size: 40,
    image: null,
  },
  blueBox: {
    color: [0, 0, 255],
    size: 30,
    image: null,
  },
};

class Obstacle {
  constructor(type, xPosition) {
    this.type = obstacleTypes[type];
    this.x = xPosition;
    this.y = 300 - this.type.size * 0.5;
    this.image = this.type.image;
  }

  show() {
    rectMode(CENTER);
    if (this.image) {
      image(this.image, this.x, this.y, this.type.size, this.type.size);
    } else {
      fill(this.type.color);
      noStroke();
      rect(this.x, this.y, this.type.size, this.type.size);
    }
  }

  update(speed) {
    this.x -= speed;
  }

  hits(character) {
    let distance = dist(this.x, this.y, character.x, character.y);
    return distance < 25;
  }

  offscreen() {
    // 화면 밖으로 나갔는지 판별
    return this.x < -this.type.size;
  }
}

3. Background

• 게임의 배경을 관리합니다. 캐릭터가 이동할 때 배경이 스크롤되는 효과를 나타내려고 했는데 일단은 단색으로 표현되어서 현재는 큰 차이는 없는 상태입니다.

4. GameManager

• 게임의 전반적인 상태와 진행을 관리합니다.
• 게임의 다양한 상태와 스테이지를 중앙에서 관리하여 코드의 복잡성을 줄이고, 게임 흐름을 효율적으로 제어합니다.
• 스테이지 로딩, 게임 상태(시작, 종료), 스코어.

---

 

자세한 코드는 레포를 참고해주시면 좋을 것 같습니다. 아직 기본적인 수준이라 점차 작업을 완성하면서 더 업데이트할 예정입니다.

코육대가 궁금하신분 & 참가하고 싶은 분들을 위해 링크를 남깁니다.
(혹시 참가하실 분이 있다면 제출시 추천인 Flik을 작성하고 가산점 1점 받으세요)

항해 플러스: 제2회 코육대