본문 바로가기

Web Development/Front-end

(22)
[Zerocho-06] 틱택토게임 (이차원배열) 오늘 만들어 볼 게임은 틱택토(오목과 유사하나, 3X3칸으로 이루어져있는) 게임 입니다. 여기서는 주로 다루게 되는 문법이 '이차원배열', 'forEach' 그리고 'parentNode' , 'Child', 'event.target' 등이 있습니다. 우선 어떤게임인지 동영상으로 간단히 보고 시작하겠습니다 ! 틱택토게임 미니 오목같은 느낌이죠? ㅎ_ㅎ 아무튼, 시작해보겠습니다 ! 1. 순서도 3 X 3 칸을 준비하고, 턴을 X -> O -> X -> O-> X -> O -> X -> O 이렇게 돌아가면서 할 수 있어야하구요. 가로줄, 세로줄, 대각선을 검사해 승리조건에 부합하는지 확인해야하며, 조건에 맞지 않을경우 다시 턴을 돌려주는 곳으로 돌아가서 지속적으로 게임을 실행시켜줘야하고, 만약 승리조건에 부합..
[Zerocho-05] 숫자야구게임 (배열) 이번에 만들어 볼 게임은 숫자야구 게임입니다. 여기서 주로 사용하는 문법은 배열을 다루는 방법입니다. 그럼 오늘 만들어볼 숫자야구게임이 무엇인지 살펴볼까요? 우측 콘솔창에 출력되는 것은 정답입니다. ( 무작위 숫자 네자리를 도저히 혼자 맞출수가 없어서;;ㅋㅋ) 아무튼, 숫자야구 게임은 위와 같이 숫자만 맞으면 볼, 숫자와 자리까지 전부 맞으면 스트라이크가 나오는 게임입니다. 그리고 4자리가 자리와, 수가 모두 맞으면 홈런이 되는 게임입니다. 순서도 & 코드분석 순서도는 위와 같습니다. 컴퓨터가 무작위 숫자 4개를 (1~9사이에서) 생성하고, 사용자가 이걸 맞춰봅니다. 그럼 컴퓨터가 낸 숫자와, 사용자가 입력한 숫자를 비교합니다. 자리와, 숫자를 모두 비교해야 합니다. 숫자는 있는데 자리가 틀렸다면, 볼을..
[Zerocho-04] 구구단게임 (Math & 형변환) 이번에는 구구단 게임을 만들어보도록하겠습니다. 여기서는 주로, Math객체, 형변환 들이 새로운 문법요소로 사용되며, 이전에 끝말잇기게임에서 한것과 유사한 기본 내용들을 복습하는 차원에서 보시면 좋겠습니다. 우선 우리가 만들 구구단 게임부터 살펴보겠습니다. 1. 구구단게임 위 동영상처럼, 컴퓨터가 무작위 랜덤의 문제를 내고, 우리가 그것을 맞추는 것입니다. 순서도 & 코드분석 순서도는 위와 같습니다. 1. 컴퓨터가 새로운 구구단 문제를 랜덤 두 정수를 이용해 낸다. 2. 사용자가 정답을 입력한다. 3. 컴퓨터가 낸 구구단 문제의 정답과, 사용자가 입력한 정답이 일치하는지 확인한다. 4-1. 정답이 틀렸을 경우, "틀렸습니다."를 출력한다. 4-2. 정답이 일치할경우, 다시 새로운 문제를 출력한다. gug..
[Zerocho-03] 끝말잇기게임 화면구현 (window&DOM) 이전시간에 만들었던 끝말잇기 게임은, 브라우저 검사창을 이용해서 코드를 실행했습니다. 이번엔 그러지 않고, 할 수 있도록 화면단도 만들어보도록하겠습니다. 우선 어떻게 만들어질지 간단히 동영상으로 살펴볼까요? 끝말잇기게임 화면구현 위처럼 만들어 보도록하겠습니다. 코드분석 lastword.html파일을 간단히 만들고 여기에서 js파일을 불러오도록하겠습니다. 기본 HTML 구조에서, title부분을 게임이름으로 변경해주고 , 아래 script 태그에 src속성으로 lastword.js라는 파일을 임포트해옵니다. js에서 html코드와, js코드를 모두 다 짤 것이기 때문에 HTML 파일에는 임포트해오는 것 외에 아무런 내용이 있지 않습니다. var body = document.body; // body를 선택 ..