틱택토
-
JavaScript 입문 : 컴퓨터와 함께하는 틱택토 게임 (TicTacToe)컴퓨터 알아가기/JavaScript 2022. 8. 25. 19:30
지난시간까지 만들어 본 틱택토 게임은 두사람이 하나의 화면에서 직접 입력하면서 승부를 가리는 방법을 공부해 봤는데요.. 아직 실력은 미천하나 다른 강좌의 도움을 받아 인간과 컴퓨터의 단순 틱택토 게임을 공부해 보았습니다. 관련 과정은 freeCodeCamp.org에서 참조 하였습니다. 결과물은 다음과 같이 나오더군요. 과정은 지난 틱택토에서 많이 이야기를 하였기 때문에 HTML과 CSS 그리고 JS에 필요 내용들을 주석 처리했습니다. 특이한 점은 여러가지 방법으로 9칸에 대한 인덱스 처리를 하고 이차원 배열을 이용하지 않고도 할 수 있는 내용을 볼 수 있었습니다. 1. HTML HTML에서는 자바스크립트에서 메소드로 만들지 않고 직접 3 by 3 테이블을 지정하도록 합니다. 이는 CSS에서 좀 더 틱택토..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 이차원 배열을 테이블에 적용컴퓨터 알아가기/JavaScript 2022. 8. 17. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 3 by 3 테이블을 만들어 클릭이벤트가 이루어지도록 공부를 해 보았습니다. 이제는 각 칸별로 모양(또는 숫자)가 들어가는 target을 확인하기 위하여 배열을 이차원 배열을 이용한 중복구문을 사용할 예정입니다. 1. 이차원 배열 활용 3 by 3 테이블의 구조는 다음과 같습니다. 첫번째 row에 해당되는 빈배열을 만들고 데이터를 push하고 두번째 column인 cell에 들어가는 빈배열을 추가로 만들어 주어야 합니다. cell에 push하는 데이터가 최종적으로는 row에 push하는 결과를 가져오겠죠. 2. addEventListener( ) 이벤트함수 외부로 함수가 길어지면 외부에 선언하고 콜백으로 받아서 함수를 실행시키는게 좋습니..