Preface:

Temporarily added a preview address: online demo

This article is not a React tutorial.

Mainstream front-end frameworks: Vue, React, Angular. I have used Ag once in the past two years, and I have used Vue for other frameworks. The React website provides a tutorial on how to implement tic-Tac-toe, but I’m not going to talk about it anymore. What I’d like to do at the end of the tutorial is:

What I want to accomplish is to take the ideas from the end of the tutorial on the official website and improve the game.

Set up the local development environment

  1. I have a newer version of Node.js installed locally.
  2. Run with CMDnpx create-react-app my-appThe official scaffolding command creates a React project called my-app
  3. Install complete and run the project using YARN Start

Then follow the tutorial. I’ll skip…… At this point, you will have completed the official tutorial examples. I started down:

Requirement 1: Display the coordinates of each move in the game history list in the format (column number, row number).

Simple analysis: Those of you who have done this already know that you can use 0 to 8 as the index for each of the nine boxes, so it’s pretty easy, Subscript simple just convert into horizontal ordinate, such as a const arr = [[1, 1], [1, 2], [1, 3], [2, 1], [2, 2], [2, 3], [3, 1], [3, 2], [3, 3]] This array is arr[index] to get the horizontal and vertical coordinates, I use rederContent() to implement a drop detail

RederContent () {const positionArr = this.state.positionArr if (positionarr.length === 0) {return ""} else { const arr = [[1, 1], [1, 2], [1, 3], [2, 1], [2, 2], [2, 3], [3, 1], [3, 2], [3, 3]] const content = positionArr.map((item, Index) => {if (index >= this.state.stepNumber) {// If (index >= this.state.stepNumber) {// If (index >= this.state.stepNumber) {return let position = Arr [item] const text = '${index + 1} : ${index % 2 === 0? 'X' : 'O'} 'const text1 =' ${position[0]} line, ${position[1]} column 'return (<div key={index}> <span className='content-span'>{text}</span> <span>{text1}</span> </div>);  }); return content } }Copy the code
Requirement 2: Show the currently selected item in bold in the history list.

ClassName ={move === this.state.stepNumber? ClassName ={move === this.state.stepNumber? ‘moveClick’ : ”

Requirement 3: Use two loops to render the checkerboard grid instead of hardcode.

I want to implement a method named renderContent(x,y) that takes two parameters, x for rows and y for columns

RenderContent (x, y) {let content = [] for (let I = 0; i < x; i++) { content.push( <div className="board-row" key={i}>{this.renderRow(i, RenderRow (x, y) {let content = [] for (let I = 0; i < y; i++) { let num = x * 3 + i content.push( this.renderSquare(num) ) } return content }Copy the code

It’s up to you how many rows and columns you want to render the table

Requirement 4: Add a button that displays history in ascending or descending order

This is to implement a step up, next function

JumpToNext (v) {let num = this. State. StepNumber if (v) {/ / v value, the next step of operation on the if (num = = = this. State. The history. The length of 1) { } else {this.setState({stepNumber: num + 1, xIsNext: If (num === 0) {alert(' 1 ')} else {this.setState({stepNumber: 1)}} num - 1, xIsNext: ((num - 1) % 2) === 0 }) } } }Copy the code

As shown in the code, make a decision based on the current step, location, beginning and end.

Requirement 5: Highlight the 3 pieces in a line each time someone wins

Analysis: to get the victory of the three sub coordinates, there was a method used to determine whether the three sub connection, I made a modification, add a parameter flag, when true, let it return the corresponding three sub coordinates, and then add a style to the corresponding coordinates of the chess pieces

calculateWinner(squares, flag = false) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6],]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { if (flag) { return [a, b, c] } else { return squares[a]; } } } return null; }Copy the code

Effect:

Requirement 6: Display a draw message when no one wins

A draw warning is applied when there are no pieces to play, and when there is no winner and the number of steps is 9, it is a draw

if (winner) { status = "Winner: " + winner; } else if (this.state.stepNumber === 9) {status = 'Game over! It's a tie! ' } else { status = "Next player: " + (this.state.xIsNext ? "X" : "O"); }Copy the code

Summary:

I just according to their own ideas to achieve the corresponding requirements, the way to achieve these requirements can be varied, the code is never unique, here I attach the address of the complete code, this is the preview address you can open to view. Of course, this article is not a React tutorial.