틱택토게임
-
JavaScript 입문: 틱택토 게임 - 컴퓨터와 게임 (무작위 순서 이용)컴퓨터 알아가기/JavaScript 2022. 8. 28. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이차원배열을 일차원배열로 바꿔 코딩을 단순화 했으니 형식적으로라도 사람과 컴퓨터가 게임을 하는듯한 프로그램을 공부해 보고자 합니다. 즉 turn이 사람과 컴퓨터 순으로 바꾸면 될 듯 합니다. 컴퓨터가 turn을 하기 위해서는 순서도상 다음 부분에서 추가를 해주어여 될 듯 합니다. 여기서 확인할 수 있는 것은 지금까지 만든 코딩은 사람이 먼저 'O'를 입력하면 또 다른 사람이 'X'를 입력하는 방식이었습니다. 그 가운데 승부여부와 무승부에 대한 원리를 알아보았구요. 이제는 컴퓨터가 'X'를 입력할 수 있도록 턴을 변경해 주면서 승부판단을 해야 합니다. 1. 컴퓨터 턴 만들기 지난번 만든 것과 같은 컴퓨터의 턴을 이번에도 만들어 보겠습니다...
-
JavaScript 입문: 틱택토 게임 - 코딩 단순화 (이차원배열을 일차원배열로)컴퓨터 알아가기/JavaScript 2022. 8. 27. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 틱택토 게임은 현재까지 정리한 바에 따르면 구성되는 코딩은 완료가 되었고 다른 사이트에서 참조하여 컴퓨터가 turn되는 코딩은 만들어 보았습니다. 코딩에는 왕도가 없어서 일단 프로그램이 돌아가면 성공이라고 보면 되고 얼마나 깔끔하게 정리하느냐가 실력이라고는 합니다만 프로그램이 돌아가기만 하면 기분은 좋네요. 오늘은 기존 코딩(이차원배열)을 일차원배열로 바꾸는 연습과 현 코딩을 가지고 역시 컴퓨터가 무작위로 'X'를 표시하여 마치 게임하는 듯한 모습을 공부하도록 합니다. 1. 이차원 배열을 일차원 배열로 3 by 3 테이블을 만들때 row를 먼저 반복하고 다음 column (cell)을 반복하는 이차원 배열을 다음과 같이 만들어 보았습니다..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 무승부 결과표시 및 전체코드 정리컴퓨터 알아가기/JavaScript 2022. 8. 19. 19:30
이 글은 제로초TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 틱택토 게임의 승부판단에서 마지막으로 무승부에 대한 코딩이 남아 있습니다. 강좌에서 알려준 2가지 방법이 있는데요. 조금 더 생각해 보면 더 있을수 있어서 한가지를 더 추가해 보았습니다. 1. 무승부 표시 위치 무승부 코드가 들어가는 위치는 승부판단 다음에 들어가는게 맞을 듯 하고 승부판단의 함수가 길어 외부로 빼주어서 헷갈릴 수 있는데 잘 생각해 보면 위치를 파악할 수 있을겁니다. 2. 무승부 코딩 ① Case I 이는 9칸이 전부차면 무승부 표시를 한다는 논리입니다. 다음과 같이 나타나겠죠. 이러한 경우 각 칸별로 1을 부여해서 9칸이 차면 합계가 9인 경우를 만들면 됩니다. 다음을 참조하세요. ② Case II 두번째로 생각할 수 있..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 승부 판단 및 결과 표시컴퓨터 알아가기/JavaScript 2022. 8. 18. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지금까지 틱택토 게임에서 기본적인 구성에 대한 부분을 전부 고려하였습니다. 이제는 게임을 진행하면서 승부에 대한 결과를 판단하는 함수를 만들어 줄 예정인데 위치는 addEventListner( ) 메소드 안 클릭이벤트가 진행이 될 때 승부를 판단해야 합니다. 역시 이 함수가 길기때문에 외부로 배치하여 만들어 주는 과정이 좋습니다. 함수 이름은 알맞게 지어서 하면 됩니다. ▒ 승부 판단 승부 판단의 위치는 다음쯤 위치가 될 것 같군요. 승부 판단 함수 decisionWinner ( )를 외부에 지정하도록 하겠습니다. 승부를 판단한다는 이야기는 다음과 같이 생각해야 합니다. ① 반복문을 통하여 각 칸에 있는 위치 지정 이는 forEach문을..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 이차원 배열 이해 및 클릭이벤트 설정컴퓨터 알아가기/JavaScript 2022. 8. 15. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이제 본격적으로 틱택토 게임을 만들어가고자 합니다. 먼저 기본적 HTML / CSS 만들고 그에 필요한 내용들을 JS내에 만들어갑니다. 1. 기본 HTML / CSS 이번 HTML에는 필요한 최소 프레임만 만들고 CSS에서는 테이블에 들어갈 속성만 지정해 주고 나머지는 JS에서 다루도록 합니다. 2. 이차원 배열 이해 ① 3 by 3 테이블 3 by 3 테이블 모양을 다음과 같이 나타내고자 합니다. 기본적으로 HTML에서는 다음과 같이 나타낼 수 있습니다. 이렇게 만들고 각 태그에 id나 class를 지정해 주어 JS에서 코딩을 할 수 있었지만 이번에는 전부 JS에서 만들어 사용하는 방법을 공부하도록 하겠습니다. 각 칸에 숫자나 문자 등..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 순서도컴퓨터 알아가기/JavaScript 2022. 8. 14. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 아직 미진하지만 약간은 이제 코딩의 세계가 그리 낯설지만은 않네요. 제가 강좌에서 나온 내용을 공부하고 정리하는 이유는 정말 만들고 싶은 프로그램이 있는데 그러기 위해서는 어떻게 사용되어야 하는지 이해를 하지 않으면 안되기 때문입니다. 오늘은 새로운 게임인 틱택토(TikTacToe) 게임을 배우면서 안에 사용되는 항목들을 익히고자 합니다. ▒ 틱택토(TikTacToe) 게임이란 사실 저는 처음 들어 보았습니다만, 일종의 보드게임이더군요. 상대방과 같이 오목같은 형태의 게임을 하는데 가로줄이든 세로줄이든 대각선이든 연속으로 같은 문양을 만들면 됩니다. (누구는 3목이라고 합니다만) 3 by 3 2인 전용 게임이라고 보면 됩니다. 구글에서 ..