Giter VIP home page Giter VIP logo

project_cardgame's Introduction

⚡️ 포켓몬 카드 게임

▶️ 포켓몬 카드 게임 하러가기

카드를 뒤집어 같은 그림을 찾아 스코어를 내는 게임

  • 이미지 스프라이트 기법으로 이미지를 관리하여 용량을 최적화 하였습니다.
  • Vanilla Javascript로 웹 컴포넌트화
  • 이벤트 위임을 이용한 기능 구현

📕 Description

메인 화면

스크린샷 2022-12-05 오후 8 28 01

  • 각 버튼을 클릭하면 난이도별로 게임을 실행 할 수 있습니다.

  • 이벤트 위임을 활용하기 위해 부모요소에게만 이벤트를 주어 각 버튼들을 컨트롤 할 수 있게 했습니다.


카드 렌더

스크린샷 2022-12-05 오후 8 28 54

  • 난이도별로 카드가 렌더링되고, 각 난이도별로 n초간 카드의 앞 면을 보여줍니다.
  • 게임 화면에서도 마찬가지로 많게는 64개에 달하는 모든 카드들을 이벤트 위임을 활용하여 컨트롤 함으로써 메모리를 절약해주었습니다.
  • 게임이 시작되는 즉시 타이머가 실행이 되며 상단의 줄어드는 효과는 HTML프로그래스바를 활용하여 구현하였습니다.

카드 맞추기

스크린샷 2022-12-05 오후 8 29 18

  • 첫 번째 카드와 두 번째 카드가 동일한 것을 확인해주기 위해 HTMLdata- 속성을 사용하였습니다.
  • 카드를 여러장 뒤집어지는 것을 막기 위해 카드가 두장 뒤집어졌을 때 모든 li요소들에게
    pointerEventnone으로 적용해주고 카드를 다시 뒤집을 땐 pointerEventauto로 적용해주었습니다.

타임아웃될 경우

스크린샷 2022-12-05 오후 8 29 30

  • 제한된 시간 안에 같은 카드를 다 찾지 못한 경우 게임이 종료되고 모달창이 띄워집니다.
  • 총 점수, 맞춘 횟수, 틀린 횟수가 표시됩니다.

시간 안에 성공한 경우

스크린샷 2022-12-05 오후 8 30 15

  • 시간 안에 카드를 다 찾은 경우 게임이 종료되고 모달창이 띄워집니다.
  • 클리어한 시간과 총 점수, 맞춘 횟수, 틀린 횟수가 표시되며 각 정보들은 로컬 스토리지에 저장됩니다.

메인 화면의 스코어 보드

스크린샷 2022-12-05 오후 8 30 24

  • 게임 종료 후, 스코어 보드의 정보가 변경됩니다.
  • 하단의 스코어 정보는 로컬 스토리지에 저장된 정보이며, 게임이 끝난 후 로컬 스토리지에 저장된
    정보를 불러와 메인화면에서 렌더링을 해줍니다.



project_cardgame's People

Contributors

tnghgks avatar heesu0303 avatar inthyun avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

inthyun heesu0303

project_cardgame's Issues

커밋 컨벤션

커밋 컨벤션

💄 UI, 스타일 관련 파일 추가 및 수정
✨ 새로운 기능 추가, 구현
💬 텍스트 또는 리터럴 추가 및 수정
🍱 파일(이미지, 아이콘 등) 추가
📝 문서 파일 추가 및 수정
♿️ 웹 접근성 향상을 위한 코드 추가 및 수정
✏️ 단순 오타 수정
🐛 버그 수정
🩹 단순한, critical하지 않은 이슈 수정
🚚 파일, 경로, route를 옮기거나 이름 변경
♻️ 코드 리팩토링
🔥 삭제(파일, 코드)
🙈 gitignore 추가 및 수정

예시) 💄 [ 이름 ] 레이아웃 수정 (index.html 스타일 추가)

업그레이드 할 항목들

리펙토링

  • js에서 스타일을 직접적으로 건드리지 않고 css에서만 건드릴 수 있도록 js에서는 클래스 추가 삭제만
  • js 반복되는 코드들을 줄이는거 , 효율적이지 않은 코드들을 줄이는거
  • 함수가 한가지 기능만 수행하도록 여러 함수로 분리하기
  • constructor에 있는 점수 관련된 property들 객체화 하기
  • progressbar 만들기
  • 게임 시작전 카드들 모두 보여주기

버그

  • 시간 안에 성공했을 때 뜨는 모달창에서의 버튼 클릭이 안됨

CSS

  • 난이도별 카드 레이아웃 수정
  • 모달창 디자인
  • 메인화면 한줄 스코어 보드 디자인
  • 카드 게임 배경 골라서 적용

JS

  • 메인화면 한줄 스코어 보드 작성
  • 스코어 로컬스토리에 넣고 빼기
  • 해당 난이도로 재시작 함수 작성
  • 타이머 시간 안으로 성공했을 경우 모달창 클리어시간 값 수정

bug: 라우팅된 경로에서 새로고침 시 발생하는 오류

문제사항

  • 라우팅된 경로에서 새로고침 시 발생하는 오류

에러명

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".
Strict MIME type checking is enforced for module scripts per HTML spec.

스크린샷

failLoad

오늘 할일

안녕하세요

  • 오늘 할일

희수

  • 저녁먹기

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.