Thumbnail
BEST 개발 ・ 프로그래밍 게임 개발
웹 게임을 만들며 배우는 자바스크립트
(4.8)
59개의 수강평 ∙ 7096명의 수강생

무료

지식공유자 : 조현영
총 114개 수업˙총 22시간 3분
평생 무제한 수강
수료증 미발급 강의
초급 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 공유
얌냠 프로필

지뢰찾기 에러잡아내기에서 질문있습니다! 얌냠 1일 전
항상 친절한 답변 감사드려요 덕분에 열심히 공부하고 있습니다! 다름이아니라 '에러잡아내기' 강의 1:20 부근에 값이 false인 경우 값을 ''도출해주는 :: 이런 기호가 있는데 어떤 키인지.. 키보드에 없어서 궁금해서 올립니다 ㅜㅜ

1
얌냠 프로필

지뢰찾기 에러 관련 질문! 얌냠 1일 전
옆칸의 parentNode 결과값이 undefined로 뜨는데 왜그런지 궁금해요 .. 그리고 저는 옆칸.click(); 도 실행할 수 없다고 뜨는데 ㅜㅜ 모르겠습니다 .. ㅜㅜ

3
박 프로필

리팩토링에 관한 질문입니다. 9일 전
안녕하세요 제로초님 지뢰찾기가 어려워서 쭉 복습중인데, 드디어 조금 갈피가 잡혀서 기쁩니다. 좋은 강의 감사합니다! 수업시간에 따라한 코드리팩토링을 시도해보았어요. 그런데 이벤트단위로 쪼개서 리팩토링을 하는 게 좋을지, 아니면 세세하게 쪼개서 함수로 만들지 고민이 되어요. 질문 어떤 식이 다시 봤을 때 이해하기 쉬울까요?  시도한 리팩토링은 괜찮나요? var tbody = document.querySelector('#table tbody'); var dataset = []; var 중단플래그 = false; var 열은칸 = 0; var 코드표 = { 연칸: -1, 물음표: -2, 깃발: -3, 깃발지뢰: -4, 물음표지뢰: -5, 지뢰: 1, 보통칸: 0 }; var 줄; var 칸; var 주변; function 지뢰위치() { var 칸채우기 = Array(hor * ver).fill().map(function (인덱스) { //가로 * 세로 return 인덱스; }); //자바스크립트는 0부터 센다 var 지뢰만들기 = []; while (칸채우기.length > hor * ver - mine) { var 지뢰배치표 = 칸채우기.splice(Math.floor(Math.random() * 칸채우기.length), 1)[0]; 지뢰만들기.push(지뢰배치표); } }; function 깃발법칙() { if (e.currentTarget.textContent === '' || e.currentTarget.textContent === 'X') { //빈칸이거나 X일 때 e.currentTarget.textContent = '!'; //깃발과 물음표는 데이터일 필요가 없다. 화면에 표시하는 용도니까 e.currentTarget.classList.add('flag'); if (dataset[줄][칸] = 코드표.지뢰) { dataset[줄][칸] = 코드표.깃발지뢰; } else { dataset[줄][칸] = 코드표.깃발; } } else if (e.currentTarget.textContent === '!') { //느낌표라면 e.currentTarget.textContent = '?'; //우클릭 한 번은 느낌표, 두 번은 물음표 e.currentTarget.classList.remove('flag'); e.currentTarget.classList.add('question'); if (dataset[줄][칸] = 코드표.깃발지뢰) { dataset[줄][칸] = 코드표.물음표지뢰; } else { dataset[줄][칸] = 코드표.물음표; } } else if (e.currentTarget.textContent === '?') { //물음표라면 e.currentTarget.classList.remove('question'); if (dataset[줄][칸] === 코드표.물음표지뢰) { e.currentTarget.textContent = 'X'; dataset[줄][칸] = 코드표.지뢰; } else { e.currentTarget.textContent = ''; dataset[줄][칸] = 코드표.보통칸; } } }; function 오픈법칙() { dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) var 주변 = [dataset[줄][칸-1], dataset[줄][칸+1]]; //왼쪽, 오른쪽 확인 if (dataset[줄-1]) { //윗줄 검사 주변 = 주변.concat([dataset[줄-1][칸-1], dataset[줄-1][칸], dataset[줄-1][칸+1]]); } else if (dataset[줄+1]) { //아랫줄 검사 주변 = 주변.concat([dataset[줄+1][칸-1], dataset[줄+1][칸], dataset[줄+1][칸+1]]); } var 주변확인 = 주변.filter(function(v) { return [코드표.지뢰, 코드표.깃발지뢰, 코드표.물음표지뢰].includes(v); //모든 지뢰를 세자 } }; function 주변법칙() { if (주변확인 === 0) { console.log('주변을 엽니다'); var 주변칸 = []; if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄-1].children[칸-1], tbdoy.children[줄-1].children[칸], tbdoy.children[줄-1].children[칸+1] ]); if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄].children[칸-1], tbdoy.children[줄].children[칸+1] ]); if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄+1].children[칸-1], tbdoy.children[줄+1].children[칸], tbdoy.children[줄+1].children[칸+1] ]); } //열려있는 칸을 또 열릴 필요없게 수습하자 dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) 주변칸.filter(function(v) {return !!v}).forEach(function(옆칸) { //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? var 옆칸줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); var 옆칸칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td if (dataset[옆칸줄][옆칸칸] !== 코드표.연칸) { 옆칸.click(); } }); } } //지뢰를 제외한 모든 칸이 열리면 승리함 if (열은칸 === hor * ver - mine) { document.querySelector('#result').textContent = '승리하셨습니다~!'; } } }; function 지뢰만드는규칙() { for (var k = 0; k < 지뢰만들기.length; k++) { //배열은 0부터 시작하기에 -1이 나와선 안 된다 var 세로 = Math.floor(지뢰만들기[k] / ver); var 가로 = 지뢰만들기[k] % ver; tbody.children[세로].children[가로].textContent = 'X'; //지뢰를 심는다, 화면 dataset[세로][가로] = 코드표.지뢰; //데이터, 화면과 데이터는 일치해야 됨! } }; //지뢰찾기 실행 document.querySelector('#exec').addEventListener('click', function() { //이전 게임 초기화 tbody.innerHTML = ''; document.querySelector('#result').textContent = ''; dataset = []; 열은칸 = 0; 중단플래그 = false; //input의 아이디들 var hor = parseInt(document.querySelector('#hor').value); var ver = parseInt(document.querySelector('#ver').value); var mine = parseInt(document.querySelector('#mine').value); //지뢰위치 지뢰위치(); //지뢰테이블 for (var i = 0; i < ver; i += 1) { //2차원 배열, 세로 만들기 var arr = []; //지뢰표에 배열을 깔자 var tr = document.createElement('tr'); dataset.push(arr); for (var j = 0; j < hor; j += 1) { //가로 만들기 arr.push(코드표.보통칸); var td = document.createElement('td'); //오른쪽 클릭방지 td.addEventListener('contextmenu', function(e) { e.preventDefault(); if (중단플래그) { return; } //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? 줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); //배열이 아니여도 indexOf()를 쓸 수 있다 칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td //깃발법칙 깃발법칙(); ); //클릭 시, 주변 지뢰 파악 td.addEventListener('click', function(e) { if (중단플래그) { return; } //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? 줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); //배열이 아니여도 indexOf()를 쓸 수 있다 칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td if ([코드표.연칸, 코드표.깃발, 코드표.깃발지뢰, 코드표.물음표지뢰, 코드표.물음표].includes(dataset[줄][칸])) { return; } //지뢰의 유무확인 e.currentTarget.classList.add('opend'); 열은칸 += 1; if (dataset[줄][칸] === 코드표.지뢰) { e.currentTarget.textContent = '펑'; document.querySelector('#result').textContent = '다시 도전하세요!'; 중단플래그 = true; } else { //지뢰가 없다면 dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) 주변 = [dataset[줄][칸-1], dataset[줄][칸+1]]; //왼쪽, 오른쪽 확인 오픈법칙().length; e.currentTarget.textContent = 주변확인 || ''; //숫자 0은 표시가 되지 않도록! dataset[줄][칸] = 코드표.연칸; //지뢰없는 부분을 한꺼번에 열리도록 만들자 주변법칙(); ); tr.appendChild(td); //td는 tr에 속하고 } tbody.appendChild(tr); //tr은 tbody에 속한다 } //지뢰 심기: 규칙을 찾아서 랜덤숫자의 위치에 지뢰를 배치시키자 지뢰만드는규칙(); });

2
nsunny09 프로필

Array/Object spread nsunny09 14일 전
안녕하세요! 강의 유용하게 잘 듣고 있는 수강생입니다. ES6 문법 설명해주시면서 spread array에 대해 설명해주셨는데요, [...Array(10).keys().map((v) => v+1)] 이 부분이 계속 에러가 떠서요. 이런식으로 했을때는 되더라구요. 혹시 오타가 아닌가 조심스럽게 여쭤봅니다. 답변 기다리고있겠습니다!

1
asy_7 프로필

변수에 담긴정보 asy_7 15일 전
이벤트리스너 함수가 실행되고 끝날때 그안에 담긴 변수들의 정보가 사라진다 하셨는데 시작시간 변수는 함수바깥에 선언하고 끝시간 변수는 이벤트리스너 함수안에 선언해도 잘 작동되는데요 이유가 뭘까요?

2
jungd1223 프로필

지뢰찾기게임에서 Math.random() 질문 jungd1223 17일 전
안녕하세요 제로초 강사님! 지뢰찾기 부분을 수강하다가 버그가 발생해서 질문을 드립니다! hor, ver 를 10으로 설정하고 Math.floor(Math.random()*후보군.length)를 하면 후보군.length가 100이기 때문에 0이상 100미만의 값이 나와야 정상이지만 console.log(셔플)를 입력하면  이렇게 100 숫자가 나와서 게임이 올바르게 작동하지 않고 있습니다ㅜㅜ 제가 Math.random()함수에 대한 이해가 잘 못된건가요?ㅜㅜ

1
asy_7 프로필

질문있습니다! asy_7 19일 전
'이미지좌표' 변수는  setInterval 안에서만 그 속성이 동작하는걸로  이해 했는데요 이벤트리스너에서 컴퓨터의선택(이미지좌표) 인자는 setInterval 밖인데, 동작하는게 이해가 잘안가네요

1
asy_7 프로필

console.log 로 검사하는데 안되는이유 알려주세요 asy_7 26일 전
밑에 console.log 부분에서 변수이름을 넣으면 빈괄호가 뜨고, 옆에처럼 풀어서 쓰면 배열값이 잘 나오는데 이유가 뭘까요..?

2
asy_7 프로필

질문 다시 드립니다! asy_7 28일 전
저런식으로 따옴표는 쓰든 안쓰든  잘되고,숫자는 점을 이용해서 사용할수 없는것이 이유가 궁금합니다강의 잘보고 있습니다 감사합니다

2
asy_7 프로필

배열같은 객체 asy_7 28일 전
배열같은 객체 만들때 속성을 숫자로 입력하였을때 [] 를 사용하는데, 궁금해서 해봤는데 숫자로 하면 점은 사용이 안되네요 또 대괄호 안에   ex ' 숫자 ' 따옴표를 해도 출력이 되고 안해도 되는데  무슨 차이 인가요? 너무 깊은이유라면 답변안해 주셔도됩니다.

1
a sum ma park 프로필

foreach에 대해서 질문이 있어요 a sum ma park 1달 전
강의에서 나온 foreach가 정확히 어떻게 작동하는건지가 이해가 잘 안되서요. 다른 사이트들에서도 검색해 봤는데 오히려 어려운 말들이 많아서 이해가 안되요... 좀 쉽게 foreach에 대해서 알려주세요.

1
박 프로필

안녕하세요 강사님 1달 전
제로초님 안녕하세요, 유튜브에서 보다 인프런으로 넘어왔습니다. 첫 질문입니다 제게 도움을 선사해주세요... Atom으로 따라했어요, 잘 따라하다가, *의 앞 부분에 공백 추가하는 것이 잘 되지 않아서요.. 어떻게 수정을 해야할까요? 어서 해결하고 숙제도 풀어보고 싶어요   <h1>더 어려운 반복문</h1>   <script>     for (var star = 5; star >= 1; star -= 1) {       document.write(' '.repeat(5-star) + '*'.repeat(star)+'<br>')     }   </script>   <!-- 규칙이 가장 중요하니 반드시 찾는 연습을 해라 -->   <h1>더더 어려운 반복문</h1>   <script>     for (var star = 9; star >= 1; star -= 2) {       document.write(' '.repeat((9 - star)/2) + '*'.repeat(star)+'<br>')     }

8
shoon199 프로필

가위바위보 질문 있습니다 shoon199 1달 전
var btn=document.getElementsByClassName('btn'); for(var i=0; i<btn.length; i++){     btn[i].addEventListener('click',function(e){         console.log(this); //console.log(btn[i]);     }); } //이 코드에서 console.log(this)를 하면 개발자도구에 //태그가 잘 표시됩니다. 그런데 //console.log(btn[i])를 쓰면 undefined가 뜨는데 //여기서 undefined가 뜨는 이유를 모르겠습니다 ㅜㅜ

1
으잌 프로필

자바스크립트는 동기? 비동기 ? 으잌 1달 전
문득 강의를 듣다 궁금해졌습니다.구글링을 해보긴 했는데 기본적으로 자바스크립트는 동기적 언어라고 하더군요.간혹 비동기적 언어라고 오해하는 경우도 있던데 (저 또한 그랬네요..), 콜백이나 프로미스, async / await 등 비동기 처리에 대한 특징들이 많아서 그럴까요?

1
koko423131@naver.com 프로필

focus(),value() koko423131@naver.com 1달 전
저 두 메소드 무슨의미죠? 

5

무료

내 목록 추가 공유
지식공유자 : 조현영
총 114개 수업˙총 22시간 3분
평생 무제한 수강
수료증 미발급 강의
초급 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스