반응형
개요
틱택토 게임 방법
틱택토 게임 디자인 방법
HTML 파일
CSS 파일
Javascript 파일
게임 기능
끝.
개요
이 가이드는 컴퓨터에 대해 자신만의 틱 타코 견인을 만들고 플레이하는 방법을 가르쳐 줍니다. HTML, CSS, 자바스크립트 사용법을 배우게 될 것입니다. 가이드 작성 후 코딩 포트폴리오에서 이 프로젝트를 사용할 수 있습니다. 첫 번째 섹션에서는 틱택토 규칙을 안내합니다. 두 번째 섹션에서는 HTML 및 CSS 파일 설정을 안내합니다. 세 번째 절에서는 틱택토우를 위한 자바스크립트 코드를 안내합니다. HTML, CSS, 자바스크립트 사용법을 배우게 될 것입니다.
틱택토 게임 방법
색상 선택
보통 틱택토 게임에서 첫 번째 선수는 X이고 두 번째 선수는 O입니다. 그러나 이 버전의 틱택토에서 첫 번째 플레이어는 파란색이고 다른 하나는 빨간색입니다. 빨간색 정사각형 또는 파란색 정사각형을 클릭하여 원하는 색상을 선택하십시오.
보너스 연습: 두 사각형의 색을 변경합니다. 두 가지 색상 중 아무거나 선택하실 수 있습니다.
연속 3개:
3가지 같은 색이 연속으로 나오거나, 기둥이 나오거나, 대각선이 나오거나 하면 게임에서 이깁니다. 세 가지 색을 연속으로, 열, 대각선으로 얻은 첫 번째 플레이어가 게임에서 승리합니다.
게임 보드의 아무 사각형이나 클릭하여 원하는 위치를 표시하세요.
승자나 동점 경기가 있을 때 경기가 중단된다.
게임 보드를 재설정하여 다시 플레이하십시오.
틱택토 게임 디자인 방법
설계 및 배치
이 틱택토 게임은 회색 사각형의 3x3 보드를 포함한다. 그 보드는 세 칸 아래에 빨간색 리셋 버튼이 있다.
HTML 파일
게임에 사용할 새 폴더를 만듭니다. MacBook 터미널에서 다음 명령을 사용하여 새 파일을 만들 수 있습니다.
mkdir TicTacToe
cd TicTacToe
Touch index.html코드 편집기에서 index.html 파일을 엽니다. 비주얼 스튜디오의 편집기 또는 Atom 편집기를 사용할 수 있습니다.
다음 태그를 포함하는 HTML 골격 코드를 작성합니다.
<html>
<head>
<body>게임 UI가 바디 태그 안쪽으로 들어갑니다. 게임 보드에 대한 div 요소를 만들어야 합니다.
각 행에 대해 세 개의 div 요소를 작성합니다. 행의 각 div 요소 내에 열에 대한 div 요소를 세 개 더 작성해야 합니다. 아래의 코드 구조를 확인하십시오.
<div id=”row1”>
<div> <Button>1</div>
<div><Button>2</div>
<div> <Button>3</div>
<div id=”row2”>...
<div id=”row3”>...
</div>
<Button>RESET</Button>각 기둥 div 요소 내에서 각 tic tac 토우 정사각형에 대한 단추 태그를 작성합니다.
세 번째 행 아래에 재설정 버튼을 만듭니다. <버튼> 태그 사용
다음 링크에서 html 파일을 찾을 수 있습니다.
https://github.com/kekhan/tictactoe/blob/master/tictactoe.html
CSS 시트
이 게임은 부트스트랩을 사용하여 버튼을 열과 열로 정렬합니다. 각 행 div 요소에 행 클래스를 지정합니다. 각 열에 col-sm-4 등급을 부여합니다.
다음 링크를 사용하여 html태그에 부트스트랩을 포함합니다.
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>HTML 파일과 동일한 방법으로 CSS 파일을 생성할 수 있습니다. CSS 스타일 시트에는 일부 HTML 요소 및 태그에 대한 패딩, 위치 너비, 높이 및 여백 조정이 포함됩니다.
이미 프로젝트 폴더에 있는 경우 터미널에 다음 명령을 작성합니다. 그렇지 않으면 프로젝트 폴더에 들어가서 css 파일을 새로 생성하세요.
Touch index.css다음 링크에서 CSS 코드에 액세스할 수 있습니다.
https://github.com/kekhan/tictactoe/blob/master/tictactoe.css
JavaScript 함수
전역 변수
다음은 코드 전체에서 사용되는 전역 변수입니다.
게임 배열은 다음과 같다:
- 라인 2: 사용자의 보드 위치를 고정하는 배열을 만듭니다.
- 줄 3: 컴퓨터의 보드 위치를 고정하는 배열을 만듭니다.
- 라인 4: 두 플레이어의 입력을 모두 포함하는 배열을 만듭니다.
- 선 7: 가능한 모든 틱 타코(Tic tac) 이 점들은 세 개의 그룹입니다.
- 줄 11: 컴퓨터의 초기 지점을 포함하는 배열을 만듭니다.줄 12: 4코너 배열을 사용하여 컴퓨터의 첫 번째 지점을 저장하는 변수를 만듭니다.게임 기능
- 함수 논리가 게임을 작동시킵니다. 자바스크립트 코드 파일에는 6가지 기능이 있습니다. 기능을 추가할 수 있습니다. 이 가이드의 끝부분에는 당신이 스스로 완성할 수 있는 운동기능이 있습니다. 각각의 기능은 다른 목적을 가지고 있습니다. 다음은 틱택토 게임의 모든 기능들이다.
- 줄 5: User_turn — 부울입니다. User_turn은 사용자가 회전하면 True이고 그렇지 않으면 False입니다.
- 회전 — 이 기능은 선택한 색상을 확인합니다. 파란색을 선택하면 플레이어 1이고 빨간색으로 선택하면 플레이어 2이고 컴퓨터가 플레이어 1입니다.
- Get_user_spot — 클릭하는 tic tac 토우 스퀘어 값을 저장합니다.
- compSpot — 컴퓨터 회전 값을 저장합니다.
- CheckBoardFull — 이 기능은 보드가 가득 찼는지와 승자가 있는지 확인합니다.
- IsUserWinner — 이 기능은 자신이 우승자인지 확인합니다.
- isCompWinner — 이 기능은 컴퓨터가 이기는지 여부를 확인합니다.https://github.com/kekhan/tictactoe/blob/master/tictactoe.js턴즈변수회전 함수는 btn 파라미터를 받아들인다. btn 매개변수는 사용자가 파란색 또는 빨간색 정사각형을 선택할 때 html 버튼 요소에서 비롯됩니다. 제출 변수에 btn 값을 할당합니다. 제출 변수는 플레이어가 1위인지 2위인지 추적합니다.기능 설명:사용자 입력이 잘못된 경우 다른 문을 사용하여 오류를 표시합니다.get_user_spot 함수는 html 파일의 onclick 속성에 할당됩니다.
<!-- Bind this to the get_user_spot function --> <button id = “btn” class=”btn0" type =”button” value=0 onclick=”get_user_spot(this)”></button> ``` 사용자가 틱택 토보드의 아무 버튼이나 클릭할 때마다 이 기능이 트리거됩니다. 이 기능은 Playere1 변수가 0보다 클 경우 틱 타크 토 수염의 스쿼트를 빨간색 또는 파란색으로 바꿉니다.  변수 get_ueser_spot은 btn 변수를 매개 변수로 사용합니다. btn 매개변수는 사용자가 틱 tac 토보드를 클릭할 때 나타납니다. <div class="content-ad"></div> get_user_spot은 여러 전역 변수를 사용합니다. 이 함수에는 다음과 같은 전역 변수가 사용됩니다. - 승자 - 승자가 있을 때 참입니다. - User_turn - 컴프_턴 - 플레이어1 기능 설명: 줄 44: isUserWinner 함수를 호출하여 사용자가 승자인지 확인합니다. 이 함수는 4개의 조건문을 사용합니다. 라인 48: 첫 번째 if 문장을 만들어 당첨자가 있는지 확인합니다. <div class="content-ad"></div> 승자가 있으면 턴 변수를 거짓으로 지정하면 게임이 중단됩니다. 다음 조건문에서 사용자(사용자) 차례인지 확인합니다. btn click 값을 user_input 변수에 할당합니다. 라인 58: user_input 변수를 userinput_arr 배열에 추가합니다. 이 배열은 게임 보드에서 사용자의 위치를 추적합니다. 60-66행: 두 번째 조건문 안에 네 번째 조건문을 사용합니다. 이 조건부 상태는 당신이 1번 선수인지 2번 선수인지 확인해야 합니다. 틱택 발가락의 버튼은 1번 선수는 파란색, 2번 선수는 빨간색으로 바뀝니다. <div class="content-ad"></div> compSpot compSpot 기능은 컴퓨터의 턴을 생성합니다. 그것은 틱택 토보드의 빈 자리를 골라냅니다.  79번 라인: 게임 보드가 가득 찼는지 확인하는 기능을 호출합니다. 라인 81: 상대방이 이겼는지 확인하는 기능을 호출합니다. <div class="content-ad"></div> 줄 82: 변수를 만들어 컴퓨터의 다음 동작을 추적합니다. 83호선: 당첨자가 있는지 확인하고 당첨자가 있으면 순서를 거짓으로 설정한다. 다음 변수를 생성합니다. - numToStr - idplaceholder 컴퓨터가 회전하는지 확인하는 if 문을 만듭니다. <div class="content-ad"></div> 시스템 스폿에 대한 변수를 생성하십시오. 이 변수는 컴퓨터에 할당된 위치를 추적합니다. 다음 조건문은 컴프를 할당합니다.틱택 토보드의 초기 지점에 변수를 입력합니다. 가운데 사각형과 두 번째 사각형으로 배정합니다. 다음 코드는 compSpot 기능을 계속합니다. 라인 114 — 라인 125: 컴퓨터 플레이어의 초기 위치를 하드 코딩합니다. 마지막 다른 문은 Math.floor(Math.random()*9)를 사용하여 랜덤 지점을 할당합니다.  <div class="content-ad"></div> 줄 124: 컴퓨터 게임 스팟의 색칠을 위한 조건문을 만드세요. 줄 125: numToStr 변수를 사용하여 comp_input을 문자열로 변환합니다. 다음과 같은 내장된 자바스크립트 함수를 사용하여 숫자를 스팅으로 변환할 수 있습니다. comp_input.toString(); 줄 126: html id 이름으로 idPlaceHolder를 사용합니다. 줄 129: 컴퓨터 스폿에 연결된 html 단추 요소를 가져옵니다. <div class="content-ad"></div> Var compBoardSpot = document.getElementsByClassName(idPlaceHolder)[0]; 줄 131: 생성된 컴퓨터 스폿을 compinput _arr 배열에 추가합니다. 라인 132 — 라인 138: 조건문을 사용하여 컴퓨터 스폿에 색을 칠합니다. 줄 140: 컴퓨터 스팟이 있는지 확인하는 조건문 안에 comp_input을 두 플레이어의 입력을 추적하는 배열에 추가합니다.  <div class="content-ad"></div> 라인 150: comp_turn 조건부 문 안에서 comp_turn을 false로 할당하여 컴퓨터가 다음 회전을 하지 않도록 합니다. user_turn을 true로 할당하면 다른 플레이어가 차례를 선택할 수 있습니다. 152호선: 사용자가 다음으로 이동할 수 있는 기능을 호출합니다. 체크보드전체 CheckBoardFull은 allinput_arr 배열의 길이를 확인하여 게임 보드의 모든 스팟이 사용되었는지 확인합니다. 이 기능은 조건부 문을 사용하여 보드의 모든 스폿이 가득 찼는지, 승자가 있는지 확인합니다.  <div class="content-ad"></div> 변수 CheckBoardFull은 지역 변수를 포함하지 않습니다. 기능 설명: 줄 160: if 문을 사용하여 모든 입력 배열의 길이가 9인지 확인합니다. 틱택 토보드에 9개의 점이 있기 때문에 길이가 9가 되어야 합니다. if 문에는 AND가 포함됩니다. <div class="content-ad"></div> 승자가 있으면 첫 번째 조건부 문이 실행되고 승자가 없고 보드가 가득 차면 두 번째 조건이 실행됩니다. 두 조건 모두 브라우저에 메시지를 표시해야 합니다. isUserWinner 이 기능은 사용자 플레이어가 이긴 배열과 일치하는 색상이 있는지 확인합니다. 사용자 배열의 숫자와 승리 배열의 숫자가 일치하면 두 선수의 차례가 모두 꺼집니다.  변수 <div class="content-ad"></div> 변수 지역 변수 - 카운트 — 한 행에 있는 플레이어 색상의 수를 추적합니다. 전역 변수 - Comp_turn — 컴퓨터 플레이어의 부울 값을 보유합니다. - User_turn — 사용자 플레이어의 부울 값을 보유합니다. - 위너스 - Win — `computer wins`가 포함된 문자열입니다. - 요소 - logOut ID가 있는 요소를 가져옵니다. - userinput_arr — 이 배열은 틱 tac 토보드의 모든 사용자 지점을 저장합니다. <div class="content-ad"></div> 기능 설명: 182행: 카운트를 0으로 지정합니다. 카운트 변수는 사용자가 연속으로 틱 tac 발가락을 가지고 있는지 추적합니다. 줄 183: 다음으로 userinput_arr의 길이가 3보다 크거나 같은지 확인합니다. for 루프를 사용하여 winnerArray를 반복합니다. 다음은 승자 배열입니다; 각 색상 그룹은 틱탁토 보드에 정사각형을 나타내는 숫자 목록을 포함합니다: const winningArray=190,3,6],[1,4,7],[2,5,8],[0,1,2],[3,4,5],[6,7,8],[0,4,8],[2,4,6]; <div class="content-ad"></div> 다음 테이블이 틱택 토보드라고 상상해 보십시오. 이 숫자들은 html 보드의 정사각형을 나타냅니다. [0,3,6], [1,4,7], [0,1,2], [3,4,5], <div class="content-ad"></div> [6,7,8], [0,4,8], [2,4,6]] 강조 표시된 색상이 첫 번째, 두 번째, 세 번째 배열과 일치합니다. 다른 배열 목록을 다음 번호와 일치시킬 수 있습니다. ```js const winningArray=[[0,3,6],[1,4,7],[2,5,8],[0,1,2],[3,4,5],[6,7,8],[0,4,8],[2,4,6]]; ``` <div class="content-ad"></div> 위의 배열에는 가능한 틱 택 토우 승 리스트가 포함되어 있습니다. for 루프는 각 어레이에서 반복됩니다. 그런 다음 사용자 배열에 대해 반복하려고 합니다. for 루프는 전체 어레이가 아니라 winnerArray 내의 단일 어레이에 대해 한 번에 반복됩니다. 사용자 어레이에 [2,0,8,5]가 포함되어 있다고 가정해 보겠습니다. 내장 함수인 indexOf()는 위의 위너 배열에 이러한 숫자가 포함되어 있는지 확인합니다. 코드는 단일 배열 안에 머물며 각 숫자를 사용자 입력_arr 배열의 숫자와 비교합니다. 예를 들어, for 루프는 첫 번째 목록인 [0,3,6]에 남아 [2,0,8,5]에 있는 숫자와 일치하는 항목을 찾습니다. [2,0,8,5]의 숫자가 일치하지 않으면 위너 배열이 다음 목록으로 반복됩니다. 다음 목록은 [1,4,7]을 포함합니다. [2,0,8,5]의 숫자가 [1,4,7]의 숫자와 일치할 경우, 카운트++ 또는 카운트=카운트+1로 수행할 수 있는 카운트 변수에 1을 더하십시오. <div class="content-ad"></div> 카운트 변수가 3이 되면 user_turn과 comp_turn 변수가 false가 되고 게임이 중지된다. for 루프가 전체 userinput_arr 어레이에서 반복되고 일치하는 항목을 찾지 못하면 카운트 변수를 0으로 할당합니다. isCompWinner 이 기능은 컴퓨터 플레이어가 이긴 배열과 일치하는 색상이 있는지 확인합니다. 컴퓨터 배열의 숫자와 승리 배열의 숫자가 일치하면 두 선수의 차례가 모두 꺼집니다. 이 기능은 isUserWinner 기능과 유사합니다.  <div class="content-ad"></div> 변수 지역 변수 - 카운트 — 한 행에 있는 플레이어 색상의 수를 추적합니다. 전역 변수 - Comp_turn — 컴퓨터 플레이어의 부울 값을 보유합니다. - User_turn — 사용자 플레이어의 부울 값을 보유합니다. - 위너스 - Win — `computer wins`가 포함된 문자열입니다. - 요소 - logOut ID가 있는 요소를 가져옵니다. - compinput_arr — 컴퓨터 플레이어가 선택한 지점이 이 배열에 추가됩니다. <div class="content-ad"></div> 기능 설명: 라인 211: 카운트를 0으로 지정합니다. 카운트 변수는 컴퓨터에 연속된 틱택 발가락이 있는지 추적합니다. 214행: 다음으로 compinput_arr의 길이가 3보다 크거나 같은지 확인합니다. for 루프를 사용하여 winnerArray를 반복합니다. 다음은 승자 배열입니다. 각 색상 그룹은 틱 tac 토보드에 정사각형을 나타내는 숫자 목록을 포함합니다. ```js const winningArray=[[0,3,6],[1,4,7],[2,5,8],[0,1,2],[3,4,5],[6,7,8],[0,4,8],[2,4,6]]; ``` <div class="content-ad"></div> 위의 배열에는 가능한 틱 택 토우 승 리스트가 포함되어 있습니다. for 루프는 각 어레이에서 반복됩니다. 다음으로 cominput_Arr 배열에 대해 반복하려고 합니다. for 루프는 전체 어레이가 아니라 winnerArray 내의 단일 어레이에 대해 한 번에 반복됩니다. 컴퓨터 배열이 [0,4,1,7]을 포함한다고 가정합시다. 내장 함수인 indexOf()는 위의 위너 배열에 이러한 숫자가 포함되어 있는지 확인합니다. 코드는 compinput_arr 배열의 숫자에 대해 각 숫자를 확인하기 위해 단일 배열 안에 머무른다. 예를 들어, for 루프는 첫 번째 목록인 [0,3,6]에 남아 [0,4,1,7]에 있는 숫자와 일치하는 항목을 찾습니다. [0,4,1,7]의 숫자가 다음 목록으로 반복되지 않으면 위너 배열을 사용하지 마십시오. 다음 목록은 [1,4,7]을 포함합니다. [0,4,1,7]의 숫자가 [1,4,7]의 숫자와 일치할 경우 1을 카운트++ 또는 카운트=카운트+1로 수행할 수 있는 카운트 변수로 변환합니다. <div class="content-ad"></div> 카운트 변수가 3이 되면 플레이어가 변수를 거짓으로 바꾸고 게임이 중단된다. for 루프가 전체 compinput_arr에서 반복되고 일치하는 항목을 찾지 못하면 카운트 변수를 0으로 할당합니다. 보너스 연습: 다음 버그를 수정합니다. 사용자가 컴퓨터의 위치를 클릭할 수 있다는 것을 알 수 있습니다. 사용자가 컴퓨터의 위치를 클릭하는 것을 막는 코드를 만듭니다. 컴퓨터 스팟이 플레이어 색상으로 바뀌면 안 됩니다. ## 끝. <div class="content-ad"></div> 축하합니다, 당신은 이 프로젝트를 끝냈습니다. 당신만의 독특한 수정사항으로 이 프로젝트를 당신의 포트폴리오에 추가할 수 있습니다. 게임 종료 시 버튼 색상을 변경하거나 승리 행의 하이라이트를 할 수 있습니다. 기억하세요, 즐거운 시간 보내세요! - Get_user_spot
- 컴퓨터 또는 사용자에게 true의 부울 값을 할당하려면 조건문(다른 경우 )을 사용합니다. 사용자가 파란색을 선택하면 user_turn 변수는 true와 같으므로 사용자가 첫 번째 턴을 할 수 있습니다. comp_turn은 전역 변수에서 false로 유지됩니다. 사용자가 빨간색을 선택하면 그 반대 현상이 발생합니다. com_turn은 true이고 user_turn은 전역 변수에서 false로 유지됩니다.
- 줄 25: 제출이라는 변수를 만듭니다. 제출 변수는 사용자의 색상 옵션을 가져옵니다.
-
- Javascript 코드는 다음 링크에서 찾을 수 있습니다.
'javascript' 카테고리의 다른 글
| Apaitu Async Waiting, Promise, Callback — Handling Asyncronus javascript #1. (0) | 2022.01.11 |
|---|---|
| Angular 11 및 가 포함된 온라인 상점을 개발합니다.넷 코어 5 (0) | 2022.01.11 |
| 내가 지금까지 한 일 2부 (JS) (0) | 2022.01.11 |
| React성과 견고성을 갖춘 이더리움 트랜잭션 앱 구축 (0) | 2022.01.11 |
| 자바스크립트에서 어떤 종류의 루프가 가장 빠릅니까? (0) | 2022.01.11 |
댓글