본문 바로가기
Framework/react

[리액트 틱택토 게임 응용하기] part 1_2 말의 갯수 8개로 제한하기

by 딸기뚜왈기 2024. 6. 17.

나의 계획

 

PLAN 1.

말의 개수를 담은 변수 정의하기. -> const let

onClick이벤트에 클릭할때마다 하나씩 줄어들도록 하는 조건 추가하기.

말의 개수가 0이상일 때만 클릭되도록 하기.

 

 

구체화된 계획

설정: 하나 둘때마다 올라가는 숫자를 '카운트'라 지칭
1. 카운트가 8이 되면 0으로 변경(초기화)
2. 카운트가 0->8 이 아닌 8->0 순으로 변경
3. 카운트가 0이되면 보드가 클릭되지 않도록 설정

 

Game.js 에 추가. --> 저장되는 history의 길이를 이용하였다.

class Game extends React.Component {
   ...
render() {
   ...
    const count = 9-history.length
   ...
      return (
        );
   ...
    return (
      <div className="game">
        <div className="game-board">
          <Board
          ...
          counts={count}
          />
        </div>
     	...
        <div>
          <h1>{count}</h1>
        </div>
      </div>
    );
  }
}

  export default Game;

 

// import React from 'react';
// import Board from './Board';

// class Game extends React.Component {
//     render() {
//       return (
//         <div className="game">
//           <div className="game-board">
//             <Board />
//           </div>
//           <div className="game-info">
//             <div>{/* status */}</div>
//             <ol>{/* TODO */}</ol>
//           </div>
//         </div>
//       );
//     }
//   }

//   export default Game;
 
  // import React from 'react';
// import Board from './Board';
// import calculateWinner from './calculateWinner';

// class Game extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       history: [
//         {
//           squares: Array(9).fill(null)
//       }
//     ],
//     stepNumber: 0,
//     xIsNext: true
//     };
//   }

//   boardSize = 3

//   handleClick(i) {
//       const history = this.state.history.slice(0, this.state.stepNumber + 1);
//       const current = history[history.length - 1];
//       const squares = current.squares.slice();
//       if (calculateWinner(squares, this.boardSize) || squares[i]) {
//         return;
//       }
//       squares[i] = this.state.xIsNext ? "X" : "O";
//       this.setState({
//         history: history.concat([
//           {
//             squares: squares
//           }
//         ]),
//         stepNumber: history.length,
//         xIsNext: !this.state.xIsNext
//       });
//     }

//   jumpTo(step){
//     this.setState({
//       stepNumber: step,
//       xIsNext: (step % 2) === 0
//     });
//   }

//   render() {
//     const history = this.state.history;
//     const current = history[this.state.stepNumber];
//     const winner = calculateWinner(current.squares, this.boardSize);

//     const moves = history.map((step, move) => {
//       const desc = move ?
//         'Go to move #' + move :
//         'Go to game start';
//       return (
//         <li key={move}>
//           <button onClick={() => this.jumpTo(move)}>{desc}</button>
//         </li>
//       );
//     });

//     let status;
//     if (winner) {
//       status = 'Winner' + winner;
//     } else {
//       status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
//     }

//     return (
//       <div className="game">
//         <div className="game-board">
//           <Board
//           squares={current.squares}
//           onClick={i => this.handleClick(i)}
//           />
//         </div>
//         <div className="game-info">
//           <div>{status}</div>
//           <ol>{moves}</ol>
//         </div>
//       </div>
//     );
//   }
// }

//   export default Game;
 
import React from 'react';
import Board from './Board';
import calculateWinner from './calculateWinner';
import '../App.css';

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true,
      boardSize: 6,
      APlayer: 0,
      BPlayer: 0,
      // count: 8
    };
  }
  // function Lifes() {
  //   const lifecount = 8
  //   for (let i=0; i<=lifecount; i++ ) {
  //     if (i===lifecount) {
  //       return i;
  //     }
  // }}

  handleClick(i) {
      const history = this.state.history.slice(0, this.state.stepNumber + 1);
      const current = history[history.length - 1];
      const squares = current.squares.slice();
     
      if (this.state.xIsNext) {
        this.state.APlayer +=1;
      } else {
        this.state.BPlayer +=1;}

      if (calculateWinner(squares, this.state.boardSize) || squares[i]) {
        return;
      }
      squares[i] = this.state.xIsNext ? "X" : "O";
      console.log(this.state.xIsNext)
      this.setState({
        history: history.concat([
          {
            squares: squares
          }
        ]),
        stepNumber: history.length,
        xIsNext: !this.state.xIsNext,
        // count: this.state.count >= 8 ? this.state.count -= 1 : this.state.count = 0
      });
    }

  jumpTo(step){
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares, this.state.boardSize);
    const count = 9-history.length
    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });


    let status;
    if (winner) {
      status = 'Winner' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
          squares={current.squares}
          onClick={i => this.handleClick(i)}
          size={this.state.boardSize}
          counts={count}
          // APlayerScore={this.state.APlayer}
          // BPlayerScore={this.state.BPlayer}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
        <div className='game-score'>
          <table>
            <thead>
            <tr><td>X</td><td>O</td></tr>
            </thead>
            <tbody>
            <tr><td>{this.state.APlayer}</td><td>{this.state.BPlayer}</td></tr>
            </tbody>
          </table>
        </div>
        <div>
          <h1>{count}</h1>
        </div>
      </div>
    );
  }
}

  export default Game;
 






 

 

 

Board.js

class Board extends React.Component {
 
    renderSquare(i) {
      return (
        <Square
         ...
          counts={this.props.counts}/>
      );
    }

 

import React from 'react';
import Square from './Square';

class Board extends React.Component {
 
    renderSquare(i) {
      return (
        <Square
          key={i}
          nums={this.props.squares[i]}
          onClick={() => this.props.onClick(i)}
          counts={this.props.counts}/>
      );
    }
   
   
    render() {
      const size = this.props.size;
      let board = []

      for (let row = 0; row < size; row++) {
        let boardRow = [];
        for (let col = 0; col < size; col++) {
          boardRow.push(this.renderSquare(row * size + col));
        }
        board.push(
          <div key={row} className="board-row">
            {boardRow}
          </div>
        );
      }
      return (
        <>
          <div>
            <h1>{size}</h1>
            <div>
              {board}
            </div>
          </div>
        </>
       
      );
    }
  }

 

  export default Board;

 

 

Square.js 

onClick 발생 조건 추가.

import React from 'react';

  function Square(props) {
    const Clicked = props.onClick;
    console.log('Clicked:', Clicked)
    return (
      <button className='square' onClick={props.counts >= 1 ? Clicked: undefined}>
        {props.nums}
      </button>
    );
  }
  

  export default Square;
import React from 'react';
 
  function Lifes() {
    const lifecount = 8
    for (let i=0; i<=lifecount; i++ ) {
      if (i===lifecount) {
        return i;
      }
  }}
 
  function Square(props) {
    const Clicked = props.onClick;
    console.log('Clicked:', Clicked)
    return (
      <button className='square' onClick={props.counts >= 1 ? Clicked: undefined}>
        {props.nums}
      </button>
    );
  }
 

  export default Square;


// import React from 'react';

// class Square extends React.Component {
//   render() {
//     return (
//       <button className="square" onClick={this.props.onClick}>
//         {this.props.nums}
//       </button>
//     );
//   }
// }

// export default Square;


// import React from 'react';

// const Square = (props) => {
//   return (
//     <button className="square" onClick={props.onClick}>
//       {props.nums}
//     </button>
//   );
// };

// export default Square;

// import React from 'react';



// const Square = ({ nums, onClick }) => {
//   return (
//     <button className="square" onClick={onClick}>
//       {nums}
//     </button>
//   );
// };

// export default Square;

 

 

 

 

시간 되돌리기는 아직 안됨.

추가해줘야함.

 

 

https://velog.io/@bigbrothershin/React-onClick-%EB%93%B1%EC%97%90-%EC%A1%B0%EA%B1%B4%EC%9D%84-%EB%84%A3%EB%8A%94-%EB%B0%A9%EB%B2%95

'Framework > react' 카테고리의 다른 글

[리액트]클래스형 컴포넌트를 함수형 컴포넌트로 변환하기.  (0) 2024.06.20
[리액트] 클래스형 컴포넌트 함수형 컴포넌트로 변환하기. Assignment to constant variable.  (0) 2024.06.20
[리액트 css]테이블 만들기 table thead tr td  (0) 2024.06.15
[리액트 틱택토 게임] 함수형 컴포넌트를 클래스형으로 바꾸기  (0) 2024.06.14
[리액트 틱택토 게임]this.props.children 이해하기, props 이해하기  (1) 2024.06.14

관련글

티스토리툴바