프론트엔드

데스크탑 인터페이스 개발

• display 화면 비율 4/3

  • display 바깥 사이드부분 동적 div 추가

  

• 가상 커서 구현

  • 커서 이미지 변경 함수 제작

  export const setCursorImage = (imagePath: string) => {
    const cursor = document.getElementById("cursor");
    if (cursor) {
      cursor.style.backgroundImage = `url('${imagePath}')`;
    }
  };
  
  export const CURSOR_IMAGES = {
    hand: '/assets/cursor/cursor_hand.svg',
    default: '/assets/cursor/cursor_default.svg',
    click: '/assets/cursor/cursor_click.gif',
    drag: '/assets/cursor/cursor_drag.svg',
    block: '/assets/cursor/cursor_block.svg'
  } as const;
  

  • 마우스 상태에 따라 커서 이미지 변경
    • 클릭, 클릭불가영역, 드래그, 버튼 호버

추모관 신청

• 추모관 신청 페이지 제작
• 캐릭터 정보 입력 폼 제작
• 커스텀 태그 제작
  • <목차>내용</목차> - 섹션 제목 생성
  • <사진 {크기}>이미지URL</사진> - 이미지 삽입
  • <동영상>비디오URL</동영상> - 유튜브 영상 임베드
  • <강조>텍스트</강조> - 볼드 텍스트
  • <다음 /> - 줄바꿈
• 커스텀 태그 변환 함수

• 추모관 신청 ↔ 신청 미리보기 페이지 간 연결

  

  추모관 신청 화면

  

  추모관 신청 미리보기 화면

• 캐릭터 이미지 cropper 컴포넌트 제작

  • 코드

  

아케이드. 설까기 개발

• 컴퓨터와의 대전
  • 알고리즘 기반 1인 대전
    • 물리 기반 예측: 실제 충돌과 반동을 계산
    • 안전성 우선: 자신이 아웃될 위험이 높으면 공격 포기
    • 상황 적응: 첫 턴엔 포지셔닝, 위험할 땐 방어, 평소엔 공격적
    • 적당한 랜덤성: 완전히 예측 할 수 없도록 30% 랜덤 요소 추가
• 보호막 기믹
  • 각 플레이어 3회 제한: 게임당 3번만 사용 가능
  • 반사 데미지: 공격한 돌이 강하게 튕겨나감
  • 위치 보존: 보호막 있던 돌은 원래 위치 유지
  • 2턴 지속: 상대 턴 1회 + 내 턴 1회 보호
  • 턴 소모: 보호막 사용 시 해당 턴 종료
• matter.js를 이용한 2D 물리엔진 구현
• 오로지 javascript(typescript)로만 개발