지뢰찾기 에러잡아내기에서 질문있습니다!
1일 전
항상 친절한 답변 감사드려요 덕분에 열심히 공부하고 있습니다!
다름이아니라 '에러잡아내기' 강의 1:20 부근에 값이 false인 경우 값을 ''도출해주는 :: 이런 기호가 있는데 어떤 키인지.. 키보드에 없어서 궁금해서 올립니다 ㅜㅜ
지뢰찾기 에러 관련 질문!
1일 전
옆칸의 parentNode 결과값이 undefined로 뜨는데 왜그런지 궁금해요 .. 그리고 저는 옆칸.click(); 도 실행할 수 없다고 뜨는데 ㅜㅜ 모르겠습니다 .. ㅜㅜ
리팩토링에 관한 질문입니다.
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에 속한다
}
//지뢰 심기: 규칙을 찾아서 랜덤숫자의 위치에 지뢰를 배치시키자
지뢰만드는규칙();
});
Array/Object spread
14일 전
안녕하세요!
강의 유용하게 잘 듣고 있는 수강생입니다.
ES6 문법 설명해주시면서 spread array에 대해 설명해주셨는데요,
[...Array(10).keys().map((v) => v+1)]
이 부분이 계속 에러가 떠서요.
이런식으로 했을때는 되더라구요.
혹시 오타가 아닌가 조심스럽게 여쭤봅니다. 답변 기다리고있겠습니다!
변수에 담긴정보
15일 전
이벤트리스너 함수가 실행되고 끝날때
그안에 담긴 변수들의 정보가 사라진다 하셨는데
시작시간 변수는 함수바깥에 선언하고
끝시간 변수는 이벤트리스너 함수안에 선언해도
잘 작동되는데요 이유가 뭘까요?
지뢰찾기게임에서 Math.random() 질문
17일 전
안녕하세요 제로초 강사님!
지뢰찾기 부분을 수강하다가 버그가 발생해서 질문을 드립니다!
hor, ver 를 10으로 설정하고 Math.floor(Math.random()*후보군.length)를 하면 후보군.length가 100이기 때문에
0이상 100미만의 값이 나와야 정상이지만 console.log(셔플)를 입력하면
이렇게 100 숫자가 나와서 게임이 올바르게 작동하지 않고 있습니다ㅜㅜ 제가 Math.random()함수에 대한 이해가 잘 못된건가요?ㅜㅜ
질문있습니다!
19일 전
'이미지좌표' 변수는
setInterval 안에서만 그 속성이 동작하는걸로
이해 했는데요
이벤트리스너에서 컴퓨터의선택(이미지좌표)
인자는 setInterval 밖인데,
동작하는게 이해가 잘안가네요
console.log 로 검사하는데 안되는이유 알려주세요
26일 전
밑에 console.log 부분에서 변수이름을 넣으면 빈괄호가 뜨고, 옆에처럼 풀어서 쓰면 배열값이 잘 나오는데 이유가 뭘까요..?
배열같은 객체
28일 전
배열같은 객체 만들때
속성을 숫자로 입력하였을때
[] 를 사용하는데,
궁금해서 해봤는데 숫자로 하면 점은 사용이 안되네요
또 대괄호 안에 ex ' 숫자 ' 따옴표를 해도 출력이 되고 안해도 되는데
무슨 차이 인가요? 너무 깊은이유라면 답변안해 주셔도됩니다.
foreach에 대해서 질문이 있어요
1달 전
강의에서 나온 foreach가 정확히 어떻게 작동하는건지가 이해가 잘 안되서요. 다른 사이트들에서도 검색해 봤는데 오히려 어려운 말들이 많아서 이해가 안되요... 좀 쉽게 foreach에 대해서 알려주세요.
안녕하세요 강사님
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>')
}
가위바위보 질문 있습니다
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가 뜨는 이유를 모르겠습니다 ㅜㅜ