ISA
3k
2020-09-03 18:41:32
10
1409

토이프로젝트로 벽돌깨기를 만들어봤습니다.


최근 spa라이브러리 바닐라로 개발하면서 골머리를 썩히다 보니 뭔가 간단한게 만들고 싶어져서 미루다 만든 토이 프로젝트입니다.
사용된 기술은 html,css,js,부트스트랩이고

Html canvas이용해서 2d렌더링으로 벽돌깨기 게임을 만들었네요.
Js는 두 파일로 분리해서 class 객체지향을 조금 적용해봤고

프로젝트 내용으론 대략 공튀기기 + 벽돌깨기 + 아이템 + 간단한 난이도 조절 + 점수 저장
기능 구현했습니다.
8월 30일 ~ 9월 3일 총 5일 소요되었네요. 딴거하다가 심심하거나 뭐할거 없을때 마다 틈틈히 시간 투자해서 만들어 봤습니다. ㅎㅎ

링크는 여기

혹시 코드 리뷰 해주실 맘씨 착한분 있을까 싶어 깃허브 링크도 올려봅니다.(부끄럽네요.)

0
  • 댓글 10

  • dodo99
    18
    2020-09-03 19:34:18

    770점 찍었습니당 근데 공을 한 몇십번 튀겼는데 막대가 최대에서 안좁혀져서 가만히 있어도 깨지네요ㅎㅎ

  • meanji
    40
    2020-09-03 19:35:45

    벽돌깨기 무척 좋아해서 기쁜 마음으로 실행했는데
    도중에 공이 바에 찰싹 붙어서 진행이 안되네요ㅠㅠ

  • 내꿈은오로라
    125
    2020-09-03 19:36:16

    html,css,js 로도 게임이 만들어지는구나.. 신기

  • ISA
    3k
    2020-09-03 19:54:21

    Dodo99 //

    난이도 조절은 솔직히 못했어요 스테이지도 단순하게 공속도 1씩 늘어나는거고 아이템도 오버밸런스 기획하려다 머리 아파서 걍 생각나는대로 만들자했습니다 ㅋㅋㅋ

  • ISA
    3k
    2020-09-03 19:55:38

    Meanji //

    감사합니다. 그건 아이템 중 하나 로 설정된 기능이라 버그는 아닙니다 스페이스 바 입력으로 원하는 위치에서 튕길 수 있게 하는 기능입니다.

  • ISA
    3k
    2020-09-03 19:56:44

    내꿈은 오로라 //

    간단하게 뭐 만들기 좋은거 같아요.애초에 예전엔 웹게임이라는게 꽤 유행했었죠 스마트폰 나오기전에

    저도 공부용으로 한번 해봤어요.

  • DaYoon
    43
    2020-09-03 20:31:59 작성 2020-09-03 20:34:15 수정됨

    1. js에서 싱글 쓰레드 게임 루프를

    let dt = 0;

    let last = 0;

    function gameLoop (milliSecond) {

      requestAnimationFrame(gameLoop);

      const t = milliSecond / 1000;

      dt = t - last;

      last = t;


      //update scene

      //render

    }

    같은 식으로 작성할 수 있고, 이것에 맞춰서 게임 엔진을 구현할 수 있는데

    게임 엔진을 쓰지 않고 그냥 만드신것 같네요.


    ad hoc으로 하지 않고 게임엔진을 써서 만들어야 배우는게 있습니다.

  • ISA
    3k
    2020-09-03 20:40:45

    Dayoon //

    오 그런가요. 오픈소스 좋은거 많다고 알고 있긴 했습니다. 게임엔진 구현인가요 혹시 비슷한거 개발하게 될때는 공부해서 적용해보겠습니다.

    이 프로젝트는 크게

    1. 기획 조금하고 빨리 만들 수 있는 걸 하자.

    2. js 프론트에서 class 문법 과 getter setter등 기초적인 oop방법론 간단히 적용해보기.

    3. 바닐라로 성의 없어 보이지 않는 수준의 뭔가 만들기


    3가지 목적으로 개발 되었습니다.

  • 오후
    2k
    2020-09-03 22:22:42

    - 공사이즈가 커졌다작아졌다

    - 바닥판이 풀사이즈로커짐

    - 어느순간 바닥판이아닌 공이 마우스포인터 따라다님

  • ISA
    3k
    2020-09-03 22:53:59

    오후 //

    확실히 급조하다 보니 ux상으로 불친절하긴 한거 같네요.

    View items 보면 아이템 목록이 있습니다.

    해당 현상들 모두 아이템이라는 기능입니다.

    색깔이 다른 벽돌을 부수면 작동하는 기능들이죠.

    사실 버그 리포터보다는 코드 리뷰 oop관련 뭔가를 듣고 싶어서 글을 올렸는데 안타깝게도 그런걸 해주시는 분은 안보이네요.

  • 로그인을 하시면 댓글 을 등록할 수 있습니다.