Javascript (24) 썸네일형 리스트형 [Javascript] 틱택토 틱택토란?! 두 명이 번갈아 가면서 3X3의 판에 O와 X를 써서 가로 , 세로 또는 대각선 상에 먼저 한줄을 만들면 이기는 게임이다 . 틱택토 순서도 1. 3 X 3 칸을 만들어 준다. / 턴 = X 2. 한 칸을 클릭한다. 3. 칸이 이미 채워져 있는가? 3.1 Yes. 2번으로 이동 (다시 한칸을 클릭한다.) 3.2. No. 4번으로 이동 ( 칸에 표시해준다. ) 4. 칸에 '턴'을 표시한다. ( 턴은 X 또는 O ) 5. 가로 또는 세로 또는 대각선중에 동일한 턴으로 한줄이 완성되었는가?? 5.1. Yes. 해당 턴의 승리!! 5.2. No. 턴을 바꾸고 (X -> O 또는 O ->X ) 2번으로 이동 Dom 객체와 이차원 배열을 이용해 3X3 칸을 만들어 주었다. 각 칸마다 addEventLis.. [Javascript] 숫자야구 (3) + 추가 저번에 했던 숫자야구에 내가 입력한 답들을 기록해 놓으면 더 좋을 것 같아 추가해보았다. ol태그를 document.createElement()를 이용해 생성하고, 입력한 답이 틀리면 li태그를 같은 방법으로 생성해 틀릴때마다 내가 입력한 답을 보여줄 수 있도록 하였다. 홈런이 되거나 10번의 기회가 끝나서 새로운 문제가 생성되면 기록한 리스트 목록을 지우고 처음부터 다시 기록할 수 있도록 하였다. innerHTML innerHTML은 해당 태그안에 포함되어 있는 하위 태그들을 설정 시킬 수 있다. 그래서 innerHTML의 값을 설정하면 안에 있던 모든 태그 요소들이 사라지고 새로 입력한 내용으로 재설정 된다. ol.innerHTML = ''; 으로 하여, ol태그의 안에 있는 (이때 ol태그는 포함 .. [Javascript] indexOf( ) indexOf() 문자열.indexOf("찾으려는 문자 또는 문자열") 문자열에서 특정 문자열의 시작 위치값을 리턴해 준다. 특정 문자열이 없다면 -1을 리턴시켜준다. str 변수에서 'World'란 값을 찾아 그 문자의 첫번째 인덱스값을 리턴해준다. str에서 'World'는 6번째 인덱스부터 시작한다. 그래서 6을 리턴해준다. 문자열.indexOf("찾으려는 문자 또는 문자열", 시작할 위치) 시작 위치를 5로 주었더니, 0번째에 위치한 Hello가 아닌 13번째 위치에 있는 Hello의 위치를 콘솔창에 출력한다. 찾는 문자열이 없으면 -1을 반환한다. 찾고자하는 문자가 존재하지않으면 -1을 반환한다. 배열에서 위치값 찾기 배열의 경우도 indexOf를 이용해 인덱스값을 반환받을 수 있다. "cat".. [Javascript] split과 join /문자열 나누기와 합치기 1. split() - 문자열 나누기 문자열.split(구분자) => 배열 문자열을 구분자를 기준으로 나누어 배열로 만들어 준다. 2. join() - 배열 합치기 배열.join(구분자) => 문자열 배열에 구분자를 추가하여 문자열로 만들어 준다. 3. 배열과 문자열 비교 배열로 만들어 배열끼리 비교한 것은 false. 배열은 주소값이 다르기 때문에 서로 비교 되지않는다. 배열끼리 비교하는거 좀 더 생각해 봐야겠다... for문 돌려서 하는 방법밖에 없는건가ㅏㅏㅏㅏㅏㅏㅏㅏ [Javascript] 숫자 야구 ( 2 ) 인프런 'ZeroCho'님의 '웹 게임을 만들며 배우는 자바스크립트'를 수강하며 학습한 내용입니다. 맞춰야할 4자리 숫자를 만드는 부분은 반복적으로 쓰이기 때문에 numberDrawLots() 함수로 만들었다. 1. 숫자 야구 답을 맞춘 경우/ 홈런 ( 자리와 숫자 모두 맞춘 경우) resultView(결과창)에 홈런이라는 문구가 뜨도록 해주고, 총 몇 번을 틀려서 문제를 맞춘것인지 알려주도록 하였다. 2. 숫자 야구 답을 틀린 경우 resultView(결과창)에 스크라이크 또는 볼을 보여주도록 한다. 내가 입력한 답과 답안을 비교하여 위치와 숫자를 맞춘 갯수만큼 스트라이크로 표현해 주고, 숫자만 맞췄다면 indexOf 함수를 사용하여 ball을 계산하였다. 너무 많이 기회를 주면 쉽게 문제를 풀 수 있.. Javascript 숫자 야구( 1 )_배열 메소드 _pop().push().shift().unshift().splice() 인프런 'ZeroCho'님의 '웹 게임을 만들며 배우는 자바스크립트'를 수강하며 학습한 내용입니다. 숫자야구 순서도 1. 컴퓨터가 임의의 숫자 4자리를 만든다 (중복되지 않게) 2. 사용자가 답을 입력한다. 3. 답이 맞는가??! 3.1 YES - 1번으로 이동 (새로운 문제) 3.2 NO - 스트라이크와 볼을 알려준다. 3.2.1. 2번으로 이동 * 10회 정도 제한을 준다 (너무 많이 기회를 주면 쉽게 맞출테니까) 볼 : 자리는 틀리지만 숫자만 맞춘 경우 스트라이크 : 자리와 숫자 모두 맞춘 경우 배열매소드 _ pop(), push(), shift(), unshift() pop( ) : 배열의 마지막 원소를 빼냄 push( ) : 배열의 맨 끝에 원소를 추가 shift( ) : 배열의 첫번째 원소를 .. Javascript 구구단 인프런 'ZeroCho'님의 '웹 게임을 만들며 배우는 자바스크립트'를 수강하며 학습한 내용입니다. 먼저 콘솔창에 구구단을 구현하였다. Math.ceil() : 올림 정수값 Math.floor() : 내림 정수값 [ 자바스크립트를 이용하여 구현 ] Javascript 끝말잇기 인프런 'ZeroCho'님의 '웹 게임을 만들며 배우는 자바스크립트'를 수강하며 학습한 내용입니다. 먼저 브라우저의 콘솔 창을 이용하여 간단한 끝말잇기를 구현하였다. 끝말잇기 순서도 1. 끝말잇기 시작 단어가 필요 2. 끝말잇기 다음 단어 입력 3. 시작 단어의 마지막 글자와 입력한 단어의 첫글자가 일치하는지 확인한다. 3-1. 일치하면 딩동댕! 을 출력해준다. 3-1-2. 입력한 단어를 시작단어로 바꿔주고 끝말잇기를 진행한다. (3번으로 이동) 3-2. 일치하지 않으면 땡!!을 출력해준다. (3번으로 이동) prompt() : 질의 응답 창을 나타내 준다. 입력한 값을 반환시켜줌 이를 토대로 자바스크립트를 이용하여 끝말잇기를 구현하였다. 자바스크립트로 html의 태그들을 생성. document.body.. 이전 1 2 3 다음
