[1편] Vanila Javascript 퀴즈게임 만들기
개발/Javascript

[1편] Vanila Javascript 퀴즈게임 만들기

반응형

javascript

안녕하세요.

제가 Javascript를 공부하면서 제일 좋았던 방법으로 만들면서 습득하기를  

첫번째로 퀴즈게임 만들기를 선택해 보았습니다.

해당 프로젝트를 통해서 습득할것들은
typescript, 이벤트 리스너, ES6 Class, Dom Selector, 비동기, Timer, 함수등 자바스크립트의 종합적인 문법들을 사용할꺼같습니다.

(typescript 사용여부는 추가 프로젝트 셋팅준비후 수정하도록 하겠습니다)

자바스크립트 퀴즈게임

기능명세

  • 처음화면 Start버튼, 클릭시 시작
  • Your Time (hh:mm:ss) 형태의 스톱워치 작동
  • 단어가 나오며 해당 단어를 따라서 타이핑친다.
  • 엔터를 치면 정답 제출
  • 틀린 글자가 있다면 input에 validation 붉은색 out-line표시
  • 각 문제를 통과하면 점수를 부여해준다.(1문제당 1~4점 랜덤으로 부여)
  • 25점 이상일시 게임 통과.
  • 3회이상 틀리면 Game Over 팝업 생성. 확인버튼 클릭시 처음화면 나옴, 게임 재시작 기능

 

프로젝트 세팅

프로젝트 파일경로

index.html

<!DOCTYPE html>

<html>
  <head>

  </head>
  <body>
    <h1>hello parcel!</h1>
  </body>
</html>

 

yarn global add parcel-bundler

터미널로 parcel-bundler 설치후

yarn init -y

엔터 눌러서 packege.json 만들어주세요.

자 이제 셋팅은 마무리 되었습니다. 다음 강의는 기본적인 프로그램 로직 작성을 위주로 진행하도록 하겠습니다.

 

설정이 어려우신분은 git 저장소 다운받아주세요.

브렌치 main

 

 

GitHub - kimchunyong/QuizGame: 퀴즈게임

퀴즈게임. Contribute to kimchunyong/QuizGame development by creating an account on GitHub.

github.com

git clone https://github.com/kimchunyong/QuizGame.git

반응형

'개발 > Javascript' 카테고리의 다른 글

yarn 명령어 정리  (0) 2021.07.22
[기초] 자바스크립트 DOM선택자 정리  (0) 2021.07.06
모던 자바스크립트는 언제부터일까?  (0) 2021.07.05
[기초] javascript 구성요소  (0) 2021.07.02
[기초] javascript Scope  (0) 2021.06.17