react고양이게임

게임 기획 해당 시간 안에 위에서 아래로 떨어 지는 고양이 클릭 하여 점수를 많이 얻는 게임 시간이 다 지면 게임 오버 화면이 뜬다 화면 첫 시작화면 게임화면 게임 끝 화면 vite tailwindcss tailwind.config.js와 postcss.config.js 설치됨 >Cannot find name 'module'. Do you need...

main 화면 전환을 위해서 BrowserRouter사용 App 첫 화면 과 게임 화면 연동

디자인은 적용 하기 전 로그인 버튼 : 로그인 페이지로 이동 게임시작 버튼 : 게임 화면으로 이동

css옵션 타입 AnimationType 이미지를 움직일 애니메이션 css keyframes : 이미지 위치 options: AnimationType : 이미지 움직임 총 4개를 만들어서 위에서 아래로 떨어 지는 코드 파이어베이스에서 이미지 불러오기 경로에서 불러온 이미지 setImgUrl(urls);로 전달 후id 값에 맞춰 이미지 이동 결과 :...

StartPage컴포넌트에서 Howl를 사용 하여 게임시작 버튼을 눌렀을때 bgm재생되면서 게임시작 문제사항 bgm을 어디서 꺼야 하는지 게임을 처음으로 돌아가면 bgm이 겹치는 현상 문제 해결을 위해 App컴포넌트로 Howel연동 이동 useContext사용 전역상태관리로 다른 컴포넌트에서 받아 게임오버 된 뒤 음악 꺼짐 App App return...

게임을 실행 하는 화면 ui 디자인 적용 전 순서대로 최상단 숫자 시간초 / 점수 / 고양이아이템 time의 값이 변경 될때 마다 1초씩 랜더링 되고 값에서 -1 뺀다 time의 값이 0 이 되면 clearInterval 실행 되어 멈춤 멈춘 후 2초 뒤에 div 출력(게임 오버 화면 뜸) setInterval 반복적으로 동작 실행 clearInterv...

지금 화면을 정리 하자면 첫 시작 화면 : 난이도 추가, 익명로그인추가 닉네임 입력 화면 : 닉네임, 게임 화면 : 아이템 클릭시 문제 사항 수정 랭킹 화면 : 구현 해야함 App컴포넌트 steps를 상태관리를 통해 사용 할 수 있게 함 StartPage 버튼에 따라 steps에 들어 가는 파라미터 값이 다름 들어간 값이 다시 App컴포넌트로 가서 ...

고양이를 클릭시 점수가 쌓이는 게임 css MainPage 이미지를 클릭시 block 클래스 제거 disnone 클래스 추가 해서 이미지가 사라지고 점수 추가가 되게 했는데 점수 추가는 잘 되는데 코드를 다시 보니 document를 사용 했고 이미지가 사라지긴 하는데 있던 자리에 이미지가 사라지니 옆에 이미지가 움직이는 현상 그래서 none을 하지말고...

메인 화면에서 게임 오버가 되면 팝업창이 뜸 랭킹 버튼을 누르면 랭킹화면으로 이동 점수 관련 타입 설정 Promise.all 모든 프로미스가 완료될 때까지 기다린 후에 하나의 프로미스로 결과를 반환하는 메서드 사용 이유 : 파이어베이스에서 데이터를 불러 와야하는데 지금 사용하는게 비동기 함수를 사용 하기 때문에 제대로 불러 오지를 못해서 모든 프로미스...

게임을 하는 화면에서 츄르가 마우스를 따라다녔으면 하는 생각으로 추가를 해봤는데 리액트에서도 addEventListener를 사용을 하면서 생명주기를 생각 하면서 해야하기 때문에 Hook과 같이 사용한다. 초기값 설정 useEffect 훅 실행 handleMouseMove(마운트) 마우스 이동에 따른 handleMouseMove 함수 호출 및 상태 업데이...

랭킹 화면에서 난이도 별 데이터 출력 하기 등수 출력 rank(파이어베이스 데이터)에 map사용 후 imgUrl(파이어베이스의 이미지 데이터)에 map를 사용 했는데 이미지 데이터의 길이 만큼 반복이 되고 원하는 데이터의 형태가 아님 imgUrl 데이터 길이 만큼 반복 후 rank 데이터 길이 만큼 반복 수정 후의 화면 rank 데이터 길이 만큼 반...

index.css @apply: 여러 클래스를 묶어서 재사용 가능 tailwind.config

any 타입 수정 첫 화면 React.MouseEvent: 마우스 이벤트에 대한 타입 요소에 대한 이벤트이므로 HTMLDivElement를 사용 사용 하지 않는 변수 정리 사용은 하지만 작성되지않는 변수는 console로 작성

기존코드 document.querySelector 사용 해당 id값 대로 애니메이션이 적용 되도록 함 문제 사항 DOM을 직접적으로 접근하는 거여서 UseRef를 사용 하는 것으로 수정 수정1 ref초기값, img태그에 참조값 작성 imgRefs.current 값 나오는지 확인 imgRefs.current.querySelector(#${blockImg...