[js] 팩토리, 생성자 패턴, 카드세팅 (ft. 자바스크립트 자스스톤 게임 구현 ver.1)
자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅, 팩토리, 생성자 패턴, cloneNode() - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 위쪽: 상대편, 아래쪽: 내편 2 상대편과 내편 각각 덱에 일반 카드 5개와 영웅 카드 1개씩 세팅 팩토리 패턴, 생성자 3 카드 속성: 공격력(att)과 체력(hp), 코스트(cost) 4 영웅카드: 공격력 낮고, 체력만 높고, 코스트는 없음 5 중복되는 부분 팩토리 패턴 함수로 처리 리팩토링 구현 화면 html 코드 코스트:10/10 턴 교체 현재 턴: 나의 턴 코스트:10/10 css 코드 #my, #rival { display: inline-block; vertical-al..
[js] 팩토리 패턴(ft. 프로토 타입, Object.create(), 코드 중복 방지 방법)
디자인 패턴 중, 팩토리 패턴에 대하여 알아보겠습니다. 객체에서 중복되는 코드를 팩토리 패턴을 사용하여, 코드를 줄이거나 제거할 수 있습니다. BEFORE let friend1 = { name: '박지수', age: 20, job: 'nurse', sex: 'female', type: 'friend', personality: function() { console.log('nice'); } } let friend2 = { name: '박지석', age: 39, job: 'cops', sex: 'male', type: 'friend', personality: function() { console.log('nice'); } } let friend3 = { name: '강주동', age: 16, job: 'pr..
[js] 피셔 예이츠 셔플, 알고리즘
피셔-예이츠 셔플 알고리즘에 대하여 알아보겠습니다. 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘 값을 랜덤 하게 섞을 때 사용하는 알고리즘입니다. 로날드 피셔(Ronald Fisher)와 프랭크 예이츠(Frank Yates)가 만들어 피셔-예이츠 셔플이라고 합니다. 제로초님의 자바스크립트를 이용한 게임을 구현하면서 이 셔플을 알게 되었고, 랜덤 정렬이 필요할 경우마다 사용되므로 아주 유용한 알고리즘입니다. 저는 자바스크립트를 이용한 게임 야구, 로또 추첨기, 카드 뒤집기 게임에서 사용하였고, 음악 앱에서 음악 랜덤 플레이를 만들때도 사용한다고 합니다. 피셔 예이츠 셔플 예제 숫자 야구 //숫자뽑기 let candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let..
[js] 자바스크립트로 지뢰찾기 게임 구현하기
자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰판 만들기(화면단, 데이터단) · 화면은 table 태그 이용, · 데이터는 이차원배열 이용 parseInt() 지뢰 뽑기 Array.fill().map(), while문, splice() 지뢰 심기 연산자 /, % 오른쪽 마우스 클릭 이벤트 · 클릭시 깃발(느낌표), 물음표, 처음으로 표시 contextmenu, e.currentTarget, indexOf(), 왼쪽 마우스 클릭 이벤트 · 지뢰일 경우, · 지뢰가 아닐 경우, 주변 8칸의 지뢰 개수를 세고, 개수가 0 이면 주변칸 오픈 · 모든 칸을 열었을 경우 성공 ..
[js] 자바스크립트로 숫자야구 게임 구현하기
자바스크립트를 이용하여, 숫자야구를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 순수 자바스크립트(리팩토링 전) 순수 자바스크립트(리팩토링 후) 리팩토링 부분 다음 문제 내는 코드가 3번 반복되므로 이를 함수로 만들어 준다. function selectNumFn() { candidate = [1, 2, 3, 4, 5, 6, 7, 8, ..