class App extends React.Component { constructor(props) { super(props); this.state = { cards: [], flippedCards: [], matchedCards: [], moveCount: 0, isClickDisabled: false, isModalOpen: false, images:["Hearts", "Star", "Mushrooms", "Unicorn", "Icecream", "Donut", "Rainbow", "Balloons"] } } componentDidMount() { this.createBoard(); } createBoard = () => { const cards = []; const cardImages = this.state.images.concat(this.state.images).sort(() => Math.random() - 0.5) for (let i=1; i <= cardImages.length; i++) { const card = { id: i, isVisible: false, isMatched: false, isReset: false, image: cardImages[i-1] } cards.push(card) } this.setState({ cards }) } clearBoard = () => { this.setState({ cards: [], flippedCards: [], matchedCards: [], isClickDisabled: false, moveCount: 0 }, () => this.createBoard()) } replay = () => { if (this.state.isModalOpen) this.setState({isModalOpen: false}) const cards = [...this.state.cards] cards.forEach(card => { card.isVisible = false card.isReset = true }) this.setState({cards}) setTimeout(() => { this.clearBoard(); }, 500) } handleCardClick = (clickedCard) => { // update flipped status const flippedCards = [...this.state.flippedCards] if (this.state.flippedCards.length < 2 && !this.state.isClickDisabled && !clickedCard.isVisible) { const cards = [...this.state.cards] cards.forEach(card => { if (card.id === clickedCard.id) { card.isVisible = !card.isVisible flippedCards.push(card) } }) this.setState({cards, flippedCards}, () => { // max 2 cards flipped at once if (flippedCards.length === 2) { this.setState((state) => ({moveCount: state.moveCount + 1 })) this.setState({ isClickDisabled: true }, () => this.checkForMatch(flippedCards)) } }) } } checkForMatch = (flippedCards) => { if (flippedCards[0].image === flippedCards[1].image) { let matchedCards = []; flippedCards.forEach(card => card.isMatched = true) matchedCards = flippedCards.concat(this.state.matchedCards) // set isMatched to true for matched cards this.setState({ flippedCards: [], matchedCards, isClickDisabled: false }, () => { this.checkForWin() }) } else { setTimeout(() => { this.setState({ flippedCards: [] , isClickDisabled: false}, () => this.hideAllCards()) }, 2000) } } hideAllCards = () => { const cards = [...this.state.cards] cards.map(card => !card.isMatched ? card.isVisible = false : card.isVisible = true) this.setState({cards}) } checkForWin = () => { if (this.state.matchedCards.length === this.state.cards.length) { setTimeout(() => { this.setState({isModalOpen: true}) }, 2000) } } render() { return (

Moves: {this.state.moveCount}

{this.state.cards.map((card, index) => { return ( ); })}

); } } const Card = (props) => { let image; const cardImage = props.card.image if (cardImage === 'Hearts') { image = ( ) } else if (cardImage === 'Donut') { image = ( ) } else if (cardImage === 'Icecream') { image = ( ) } else if (cardImage === 'Mushrooms') { image = ( ) } else if (cardImage === 'Balloons') { image = ( ) } else if (cardImage === 'Rainbow') { image = ( ) } else if (cardImage === 'Star') { image = ( ) } else if (cardImage === 'Unicorn') { image = ( ) } const dotNumber = 100 let dots = [...Array(dotNumber)].map((e, i) => { return (

) }) return (

props.onCardClick(props.card)}>

{dots}

{image}

); } const Modal = (props) => { return ( ) } function Icecream() { return ( ); } function Donut() { return ( ); } function Hearts() { return ( ); } function Unicorn() { return ( ); } function Star() { return ( ); } function Rainbow() { return ( ); } function Mushrooms() { return ( ); } function Balloons() { return ( ); } ReactDOM.render(, document.getElementById("app"));

Congratulations!

Your moves: {props.moveCount}

TA创建的作品