Front-end/Javascript 실습15 6. 당근게임 - 리팩토링(팝업 클래스) 코드의 모듈화! constructor() : 클래스의 인스턴스 객체를 생성/초기화하는 특별한 함수 main.js에 팝업에 관련된것들을 가져와 바인딩함. 모듈화 후에는 main.js에 팝업관련된것들을 생략하고 , PopUp class를 삽입하여 작동하게 해줌. PopUp JS 'use strict'; export default class PopUp { //export -> 외부에 노출하겠다~ constructor() { //constructor() : 클래스의 인스턴스 객체를 생성/초기화하는 특별한 함수 //PopUp class에 멤버변수 3개를 만들어줌 this.popUp = document.querySelector('.pop-up'); this.popUpMessage = document.querySel.. 2022. 4. 5. 당근게임 - 리팩토링 편 HTML 00:00 0 You have WON!!! CSS body { text-align: center; background-color: black; } button { outline: none; cursor: pointer; border: none; background: white; border-radius: 20%; padding: 0; } .game { display: flex; flex-direction: column; position: relative; width: 800px; height: 550px; margin: auto; margin-top: 50px; background: url(img/background.png) center/cover no-repeat; } header { text.. 2022. 4. 5. 5. 당근게임 - 당근과 벌레 눌렀을때, 팝업창 핸들링 1. 이벤트 위임을 활용하여 field안에 클릭 발생시 발생되는 이벤트를 부르고~ 2. onFieldClick 함수를 선언 3. upDateScoreBoard 4. finishGame 5. popUpRefresh. addEventListner 6. hidePopUp 함수 선언. 2022. 4. 4. 4. 당근게임 - pause, replay 팝업 1. pause 버튼 생성을 위해 function stopGame() 안에 stopGameTimer()를 넣고 function stopGame() { stopGameTimer(); } function stopGameTimer를 선언해준다. function stopGameTimer() { clearInterval(timer); } - 타이머 중지. 2. 타이머가 중지되면, pause버튼은 사라지고 다시하기 팝업을 생성한다. function stopGame() { stopGameTimer(); hideGameButton(); showPopUpWithText('REPLAY?'); } 3. 팝업창의 DOM요소를 모두 가져와준다. const popUp = document.querySelector('.pop-up'.. 2022. 4. 4. 3. 당근게임 - 타이머 만드는 법 1. 얼마나 오래 게임을 할것인지 변수(상수)로 지정해줌 const GAME_DURATION_SEC = 5; 2. startGameTimer() function startGame() { initGame(); showStopButton(); showTimerAndScore(); startGameTimer(); } 스타트게임 안에 startGameTimer()이 있으니 ~함수를 만들어주자. function startGameTimer() { let remainingTimeSec = GAME_DURATION_SEC; //게임이 남아있는 시간동안 타이머 지속시키기위한 변수 updateTimerText(remainingTimeSec); //지역변수로 설정하는 것이 아니라 게임 전체에 필요하므로 미리 전역변수로 미리.. 2022. 4. 4. 2. 당근게임 - 재생버튼클릭 /당근과벌레 생성/ timer/score 1. DOM요소로 게임 버튼/타이머/스코어를 가져온다. const gameBtn = document.querySelector('.game__button'); const timerIndicator = document.querySelector('.game__timer'); const gameScore = document.querySelector('.game__score'); 2. 게임을 하기전 상태를 기억하고 있는 변수를 선언 해야한다. let started = false; //게임이 시작 되었는지 안 되었는지 let score = 0; //최종 점수가 몇인지 let timer = undefined; //시간이 얼마 남았는지(시작하지 않으면 undefined) 3. 게임시작버튼을 이벤트 리스너를 이용해 클릭.. 2022. 4. 4. 1. 당근게임 -당근과 벌레를 field 원하는 곳에 배치하기 1. field의 사이즈를 구한다. const fieldRect =field.getBoundingClientRect() 2. initGame라는 함수로 벌레와 당근을 필드에 추가한다. {addItem (당근,갯수,이미지 위치) addItem (벌레, 갯수, 이미지 위치) } 3. function addItem(className, count, imgPath) 을 만든다. {필드의 사이즈 확인하고, const item 을 setAttribute()를 이용해 이미지를 생성하여- 당근, 벌레 랜덤한 숫자로 x축y축 값을 지정하여 field.appendChild(item) 으로 필드에 아이템을 종속?시킨다. https://jsp0422.tistory.com/82 const CARROT_SIZE = 80; cons.. 2022. 4. 1. 윈도우에서 마우스 커서 좌표 찾기 업그레이드 버전 이전 포스트 : https://jsp0422.tistory.com/30?category=974379 HTML은 동일. - 1버전은 top과 left 사용시 paint가 계속 일어나기 때문에 속도/성능에 좋지 않음. transform/translate을 이용하는게 좋음. compodite만 발생. 참조 https://jsp0422.tistory.com/68 (Critical Rendering Path (브라우져 랜더링 순서)) JavsScript const vertical = document.querySelector('.vertical'); const horizontal = document.querySelector('.horizontal'); const target = document.querySelect.. 2022. 3. 28. 1만시간의 법칙 -클론 CSS 코드 리뷰 @font-face { font-family: "OTEnjoystoriesBA"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "GmarketSansBold"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); font-weight: normal; font-style: normal; } @.. 2022. 3. 23. 이전 1 2 다음
