리액트 지뢰찾기

결과물

1. 3x3 지뢰찾기 / 게임시작 시 랜덤자리에 지뢰3개 배치/ 지뢰찾으면 게임오버, 지뢰 다피하면 게임승리/

---

2. 3x3의 타일을 만들고, 게임 시작 버튼 시 3개의 지뢰를 랜덤으로 생성하는 jsx

import React from 'react'
import {useState,useEffect} from 'react'
import MineBoxItem from './MineBoxItem'

const MineBox = () => {
    const [minenumArr,setMinenum] = useState([]);
    const [gameOver,setGameOver] = useState(false);
    const [count,setCount] = useState(0);   

    const mineArr = new Array(9).fill(null);
    function box(){

        return mineArr.map((item,index)=><MineBoxItem minenum={minenumArr} itemIndex={index} setMinenum={setMinenum} 
                                           setGameOver={setGameOver} gameOver={gameOver} count={count} setCount={setCount}/>)
    }

    useEffect(() => {
        if (count == 6) {

            setGameOver(true);
            alert("게임 승리");
            setMinenum([]);

        }
    }, [count]);

    function mineNumSet() {
        
        let newArr=[];
        while(newArr.length<3){
            
            let ran = Math.floor(Math.random()*9);
            if(newArr.indexOf(ran) == -1){

                newArr.push(ran);
            }
        }

        setMinenum(newArr)
        setGameOver(false);
        setCount(0);
    }

    useEffect(()=>{
        console.log("마인번호 "+minenumArr);
    },[minenumArr])

  return (
    <>
    <tr className='MineAllBox'>
    {box()}
    </tr>
    <button onClick={mineNumSet}>게임시작</button>
    </>
  )
}

export default MineBox

⭐⭐⭐
1) function box()에서 mineArr을 map을 사용해 return을 하는데 return 할 때, useState의 set~인자값을 넘길 수 있다는걸 알았다. set을 넘겨서 자식 컴포넌트에서 set이용해 상태 업데이트를 해주면 부모에서의 값을 바꿀수 있다.

3. return mineArr.map으로 넘겨준 값들을 이용하여 최종적으로 지뢰판을 만들고 지뢰를 찾는 게임 로직을 구현하는 jsx

import React from 'react'
import { useState } from 'react'
import mineimg from "../img/mine.jpg"
import tileimg from "../img/tile.jpg"
import openimg from "../img/open.png"
import { useEffect } from 'react'

const MineBoxItem = ({minenum, itemIndex, setMinenum , setGameOver, gameOver,count, setCount}) => {
    
    const [isActive, setActive] = useState(false);
    const [isMine, setMine] = useState(false);

    useEffect(()=>{
        if(gameOver == false){
            setActive(false);
            setMine(false);
        }
    },[gameOver])

    const onClickHandler = () =>{

        if(minenum.length==0){
            return alert("게임 시작 버튼을 눌러주세요")
        }
        if(!isActive)
        {
            
            setActive(!isActive);
            minenum.map((item,index)=>{

                if(item == itemIndex){
                    alert("폭탄을 찾아 게임 종료되었습니다.")
                    setMinenum([]);
                    setMine(!isMine);
                    setGameOver(true);
                }
                else{
                    setCount(count+1);
                }
            })
        }
    }

  return (
    <div onClick={onClickHandler} className='MineBox'>
        <img className="mimg" src={isActive===true ? isMine ===true ? mineimg : openimg : tileimg } alt="" />
    </div>
  )
}
export default MineBoxItem

---