박윤재의 저장소

Project Momizi

프로젝트 계획 및 시작

기획 :  HTML, CSS, JavaScript를 배우고 나중에도 활용될 수 있는 프로젝트를 생각하다가 
        팬게임을 모아둔 사이트를 제작하게 되었습니다.
        미니 게임은 총 3가지 제작 예정입니다. ( 카드 짝 맞추기, 수박 게임, 반응속도 테스트) 추후 추가 예정

        주말에 시간이 생겨 두가지 게임을 추가함

깃허브 링크 https://github.com/PARK-Yunjae/ProjectMomizi

사이트 링크 https://park-yunjae.github.io/ProjectMomizi/

기획

일정 - 2024. 01. 23 ~ 2024. 01. 28 ( 6일 )
    a. 1일차 : 전체적인 일정 기획및 스토리 보드와 css js가 올라갈 html 태그 작성
    b. 2일차 : 사이트의 전체적인 구조 (css 적용) 만들기
    c. 3일차 : 카드짝맞추기 제작
    d. 4일차 : 슈팅게임 제작 - 취소 
    e. 5일차 : 수박게임 제작
    f. 6일차 : 반응형 웹페이지 (모바일 예정)

디자인

페이지 구성
  메인 페이지 , 게임1, 게임2, 게임3

  1. 메인 페이지 ( index ) 
    header - 로고(홈) , 게임1, 게임2, 게임3 링크
    main   - 움직이는 이미지
    footer - 사이트 링크

  2. 게임1 - 카드짝 맞추기 - 기존 예제 참고
    header - 메인페이지 header고정
    main   - 게임 페이지
    
  4. 게임2 - 수박게임
    페이지는 게임1과 동일
    이미지 10종류 - 카드게임 재활용
    
  4. 게임3 - 반응속도 테스트
    페이지는 게임1과 동일
    이미지 10종류 - 카드게임 재활용
    
  4. 게임4 - 리듬 게임 ( 취소 )
    페이지는 게임1과 동일
    이미지 10종류 - 카드게임 재활용

개발

html css 로 화면 구성을 만든 다음 개임 개발 진행 후 반응으로 구현.

1. 메인 페이지 ( 움직이는 canvas 를 배경화면으로 )    
    반응 형 및 사이트, 게임 화면 링크 생성

2. 게임1 카드 짝 맞추기

  카드 짝 맞추기 구현시 순서도를 안하고 개발을 시작해 여러가지 에로사항이 생겼습니다
  그때 그때 필요한걸 짜다보니 변수도 많이 추가되고 게임 재시작을 해야 할때 여러군데서 수정을 해야 했습니다.

카드짝맞추기_순서도

3. 게임2 수박게임

   이번에는 순서도를 먼저 만들고 개발에 엔진을 활용할 겁니다.
   matter.js 엔진은 어렵습니다.
   터치 이벤트 분리 시도 3차 실패 후 침 

   어쨋든 완성 하긴 함

수박게임 순서도

4. 게임3 반응속도 테스트

    의외로 setInterval 하고 setTimeout을 클리어 안해주면 막 클릭했을때 버그 발생해서 수정작업이 조금 발생

반응속도테스트 순서도

5. 게임4 퍼즐 게임

    grid를 쓰면 의외로 보드 제작은 어렵지 않았으나
    드래그 이벤트 시 서로 객체만 바꾸는게 생각보다 많이 어려웠음

퍼즐게임 순서도

6. 애니팡?
    리펙토링을 해보기로함 jquery -> vanila javascript 

애니팡 순서도

테스트
페이지 제작하면서 자체 테스트와 사이크 주소 배포를 통한 피드백 받으면서 진행 합니다.
배포
깃을 통해 서버에 올려 디자이너분에게 제공후 공개 요청

http css javascript를 배우고 만들게 된 사이트

즐겨보던 게임 방송인 겸 프리랜서 디자이너분이 있는데 은혜를 입어 보답하고자 이모티콘이나 이미지를 허락받고 미니게임 사이트를 만들게 됨

직접 사이트 피드백고 받고 생각보다 좋은 시간이었음

이 사이트로 작은 이벤트도 하고

여기에 랭크 기록도 해달라는 요청이 있었는데 db 저장은 안되서 다음을 기약한게 좀 아쉬운 점이었음

2024.04.01 추가

나중에 새로운 게임을 만들어 보고싶은 초석이 된 사이트 
뭘 만들면 좋을까 tts와 ai를 이용한 게 재미있을것 같은

발표 영상 링크

https://youtu.be/u925ZkJL9BM

참고 사이트

카드게임

https://velog.io/@sypear/JavaScript-%EB%AF%B8%EB%8B%88%EA%B2%8C%EC%9E%84-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B9%B4%EB%93%9C-%EC%A7%9D-%EB%A7%9E%EC%B6%94%EA%B8%B0

수박게임

https://www.youtube.com/watch?v=LZvEDigv0Ww

애니팡

https://chanung.tistory.com/81

퍼즐게임

https://www.youtube.com/watch?v=iTBZdg7tg-w

반응속도는 그냥 했었고

애니팡은 저게 아니고 코드 어쩌고 하는 외국 사이트였는데 기억이 안남