자바스크립트 - 쿠키 클릭커
과제 소스 : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
라이브 버전 링크 : https://teo-cozma.github.io/Javascript/
팀원
- Brigita Sabutyte(Javascript 및 HTML)
- 데이비드 티렐(자바스크립트)
- 테오도라 코즈마(HTML 및 CSS)
언어
도구
- Visual Studio Code(텍스트 편집기)
- Discord, Google Meet, Github, Replit(커뮤니케이션)
- Adobe XD(프로토타이핑)
- W3C 마크업 검증 서비스(HTML 검사)
- W3C CSS 검증 서비스(CSS 검사)
- 구글 라이트하우스(성능점검)
영상
자원
쿠키 클리커란 무엇입니까?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
우리 프로젝트의 튜토리얼:
https://www.flaicon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
검증 서비스:
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
프로젝트 로그
첫째 날(10월 25일)
지침 검토
- 내용 : 쿠키클리커.
- 이유: 통합 프로젝트(주로 Javascript 기술).
- 일시 : 오늘부터 10월 28일까지 4일 동안 팀 작업을 진행합니다.
- 방법 : 3명씩 그룹을 이루어 각자의 코드언어를 사용하여 협업합니다.
- 출연자 : 테오도라 코즈마, 브리기타 사부티테, 데이빗 티렐
- 어떤 역할을 합니까? 프론트엔드, 백엔드, 프로젝트 관리가 있습니다. 모든 역할은 상호 교환 가능하며 코드는 어쨌든 공유되지만 전체적으로는 한 사람이 특정 역할에 더 집중할 수 있습니다.
- 백엔드(자바스크립트): David.
- 백엔드(Javascript) + 프론트엔드(HTML 구조) : Brigita.
- 프론트엔드(CSS + 아마도 Sass) + 프로젝트 매니저: Teodora.
브레인스토밍
3개 섹션:
쿠키 섹션: 쿠키 카운터의 헤더 1입니다. 클릭수는 H1입니다.
- 대화형 쿠키 + 제목 + 쿠키 카운터 = 첫 번째 섹션.
- "HTML 내에 카운터를 증가시키는 클릭 버튼과 해당 카운터를 표시하기 위해 0으로 초기화된 라벨을 넣으세요."
점수 섹션:
- 점수 섹션 : 점수 계산.
- 1 쿠키 : 쿠키는 자체 버튼입니다.
(쿠키 + 점수 = 왼쪽 절반)
- 매장 섹션 :
- 업적과 업그레이드?
- 스토어 섹션 = 버튼 업그레이드 클리커 + 포인트 카운터 = 두 번째 섹션:
승수(이중 또는 삼중 포인트) 만들기 --> 검토를 위한 이 단계
승수 가격(구매)
점수 업데이트
승수 내의 카운터
비용 증가(더 높은 승수의 비용)
12단계: 필수 요소, 특정 버튼이 비활성화됩니다. 예: 포인트가 20점 미만인 경우 플레이어는 특정 기능에 액세스할 수 없습니다.
(오른쪽 절반)
예시(참고) : http://orteil.dashnet.org/cookieclicker/.
오늘의 작업
오늘 아침 (10:30 - 12:30)
- 프로젝트에 대한 연구(과제 지침).
- 현재 필수 단계에 해당하는 내용을 확인하세요(보너스는 잠시 보류되어 있습니다).
- 원래 쿠키 클리커의 코드를 자세히 살펴보세요.
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) 게임 설명(및 게임의 실존적 특성!)
- 클릭 1회 = 쿠키 1개.
- 클릭 15회 = 쿠키 15개 = 커서 1개(구매)
- 커서 10개 = 쿠키/초(CpS) 1개.
- 쿠키 100개 = 쿠키를 생산하고 판매하는 할머니.
- 쿠키는 농장, 광산, 공장 등을 구매할 수 있는 화폐입니다. = 스며들고 압도적인 쿠키 경제. 이것은 최종 쿠키 우주로 확장됩니다.
- 존재의 초월 = 상승하고 다시 시작하십시오.
- 황금 쿠키가 무작위로 생성됩니다.
- 할머니의 잠재적인 반란과 종말을 조심하세요. 경제적 이득으로 모든 사람을 구하거나, 그들을 착취하여 더 많은 부를 벌 수 있습니다.
- 콘솔의 작은 "코드 해킹": Game.Earn(x).
(http://orteil.dashnet.org/cookieclicker/)
정보 로그/버전 기록
- 안전한 저장
- 커서 표시 스타일
- 가져오기/내보내기 기능: 온라인 버전에서 저장 게임 검색(1주일 후에 비활성화됨)
- 판매 버튼
- 무작위 황금 쿠키(빈도를 결정하는 방법)
- 통계 클릭
- 클릭하면 부스트
- 할머니의 불만과 종말 --> 쿠키를 먹는 생물이 생성됨
- 업그레이드 및 성과에 대한 통계 메뉴 섹션
- 옵션 메뉴:
- 일반: 저장 + 자동 저장, 내보내기/가져오기, 삭제 저장;
- 설정 : 볼륨, 화려한 그래픽, 사운드... 이 모든 것이 보너스입니다.
코드 뒤에 (검사관과 함께 조사)
- HTML 구조 (외관을 위해 유지할 수 있는 것):
- 헤드 : 스타일 및 스크립트에 대한 모든 링크 (제목이 깜박입니다...)
- 몸 :
- 배너 래퍼 없음
- 상단 표시줄: 저작권 및 소셜 미디어 링크(바닥글과 비슷하지만 페이지 상단에 있음) 올해 이름, 랜딩 페이지 링크(?)에 저작권 관련 내용을 반드시 포함해야 합니다.
- Div id:"game" : 게임의 실제 섹션입니다.
- 섹션은 "섹션" 태그 아래에 있으며 위치(왼쪽, 오른쪽, 가운데) + 구분 기호에 따라 고유한 이름을 갖습니다.
- 앵커: 그들은 자신만의 수업 유형인가요? 찾아보세요.
- 쿠키 앵커 = 클릭 가능한 쿠키 !!!
- 가상의 백업 이름을 추가합니까?
- 쿠키 카운터: x 쿠키; 초당 : s.
- 옵션, 통계, 정보 등이 포함된 메뉴를 만들까요?
- 또한 각 메뉴 항목에 대한 하위 섹션이 있습니까?
- (기술적 문제: 데이터를 업데이트하기 위해 페이지가 계속 새로 고쳐지므로 깜박이기 전에 코드를 살펴보기 위해 한 섹션에 머물기가 어렵습니다.)
- "b" 태그: 용도가 무엇인가요?
- 일부 div가 숨겨져 있습니까?
- 매장 섹션 :
- 구매/판매: 클릭할 때마다 값이 변경되므로 Javascript 이벤트에 연결되어야 합니다.
- 제품(광산, 할머니) : 게임을 처음 시작할 때 숨겨지거나 가려져야 합니다. (또 다른 흥미로운 참고자료 : https://particle-clicker.web.cern.ch/)
오늘 오후 (13:30 - 17:00)
- 아이디어를 모으고, 연구하고, 자원을 모으는 것입니다.
- 앞으로 어떤 기술적 어려움/도전이 있을 수 있나요?
- 승수는 어떻게 작동하나요?
- 섹션과 해당 버튼의 레이아웃을 표시합니다(특별히 걱정할 사항은 아니지만).
- Javascript를 적용하는 방법을 이해합니다.
- 각 버튼의 코드를 작성하는 방법에 대한 리소스와 정보를 수집하세요.
우리의 그룹워크 방법론은 무엇입니까?
미리 생각하기 - 평가 부분
- 정기적으로 진행 상황을 평가하고 필수 기능이 포함되어 있는지 확인하세요.
- ReadMe를 정기적으로 업데이트하십시오.
- 마지막 날 또는 코딩 프로세스 중에도 검증 및 성능 도구를 사용하십시오(Lighthouse 및 W3C 검증 도구 참조). 아마도 목요일에.
오늘 오후의 걸음 (14:30 - 16:30)
- 내일을 위한 더 많은 연구와 작업 계획:
- Brigita : HTML 연구 및 작성.
- 데이비드: 자바스크립트 연구입니다.
- Teodora : 시각적 연구 및 프로토타이핑.
둘째날(10/26)
오전 9시 회의 :
- 5단계가 완료되었습니다.
- 코드를 공유합니다.
- 기술적 문제: HTML을 Javascript와 연결하여 기능이 제대로 작동하도록 합니다.
- 또한 보너스는 플레이어를 위한 것이므로 11단계 이상은 필수입니다.
- Autoclicker는 David가 수행하고 있습니다.
- Brigita가 수행한 승수; 보류중이기도 합니다.
- 스크립트의 문제를 해결합니다.
오늘 아침 (9:30 - 12:30)
할당된 단계를 계속합니다. 문제가 있는지 살펴보세요. 13시 30분에 회의를 진행하여 진행 상황을 논의하고 문제를 해결합니다.
오늘 오후(13:30 - 16:30) Teo: 사이트를 반응형으로 만드세요. 참고: 승수 버튼에는 비용도 포함되어야 합니다! + 쿠키의 양에 따라 특정 버튼을 비활성화하는 스크립트를 찾으십시오. David: 기능을 공유하세요. 로드 기능이 해결되었습니다. Brigita: 공유 코드 및 기능; 구문 문제가 해결되었습니다.
스크럼 미팅 (16:30 - 17:00)
무슨 일이 일어났나요?
어떤 문제가 발생하고 해결되었나요?
다음 단계는 무엇입니까?
문제:
- 요소를 중앙에 배치하는 방법 알아내기 !!!!!!! (다시 기억을 새로 고쳐야 했습니다).
- Javascript를 사용하여 버튼을 비활성화하는 방법: 코딩 문제.
- 저장 및 로드가 승수와 작동하지 않습니다.
- 기본 CSS에 문제가 컴파일되어 Sass를 계속 사용할 수 없습니다. 이제 바닐라 CSS를 사용한 스타일링으로 돌아갑니다.
내일 해결해야 할 문제:
- 저장 및 로드 버튼 ;
- (다시) 2씩 증가하는 승수를 구합니다.
- 조건에 따라 버튼을 활성화/비활성화합니다(12단계) ;
- 보너스: 11단계.
3일차(10/27)
아침회의 (9:00)
어제 무슨 일이 있었나요?
- 대응(보류 중)
- 저장/로드 조사(보류 중)
- 승수(해결됨)
오늘 해야 할 일:
저녁 모임 (16:45 - 17:00)
우리가 할 수 있었던 일:
- 활성화/비활성화 버튼
- 승수 작업을 수행했습니다(AutoClicker에서만 가능).
- 부스터 작업 시작(보너스)
- 반응형 CSS
내일 해야 할 일:
- 모든 자바스크립트 단계를 완료하세요.
- 올바른 스크립트로 "기본" HTML 코드를 업데이트하고 스타일을 지정하세요.
- 페이지를 배포하고 LightHouse를 사용하여 접근성, 사용성, SEO 등을 검사합니다.
넷째 날(10/28)
오전회의 (9:00 - 9:30)
오늘 해야 할 일:
오후근무 (13:30 - 16:00)
결과 =
- 성능 = 91;
- 접근성 = 95 ;
- 모범 사례 = 100 ;
- SEO = 92 ;
프로젝트 후 보고(16:20~17:00 및 내일 10월 29일) :
- 남은 기술적 문제: 승수. 내일 다시 검토하겠습니다.
(29/10)
