47강_220705_React(지뢰찾기 제작)

 

 

 

---

과제내용

지뢰찾기 만들기

• 3 X 3
• 랜덤한 위치에 3개의 지뢰를 넣어주고
• 타일 컴포넌트를 클릭하면 지뢰인지 아닌지 보여주기
• 지뢰를 모두 피해서 열면 게임 클리어 화면 띄워주고
• 성공하지 못하면 게임오버 화면 띄워주자

Σ(っ °Д °;)っ

 

 

---

결과물

컴포넌트 구조

• Main.jsx
  • Mine.jsx
    • Gameend.jsx
    • Gameover.jsx

 

1. Main.jsx_지뢰의 값을 배열에 넣고 랜덤으로 노출시킨다. 페이지의 전체구성은 render한다.

• random 함수는 지뢰의 상태 값을 담은 변수를 랜덤하게 재배치 시키는 함수이다.

import React from "react";
import Mine from "./Mine";
const Main = () => {
  const arr = ["mine", "on", "on", "mine", "on", "on", "mine", "on", "on"];

  function random(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      const el = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[el]] = [arr[el], arr[i]];
    }
    return arr;
  }
  console.log(random(arr));

  function loop(value, index) {
    return <Mine keys={index} temp={value} />;
  }

  return <div className="div">{arr.map(loop)}</div>;
};

export default Main;

 

2. Main.jsx_각 지뢰박스 영역의 컴포넌트를 그려내고 유저가 선택한 영역의 값을 읽어 css와 결과값 처리를 위해 Gameend, Gameover 컴포넌트로 넘겨준다.

import React from "react";
import Gameend from "./Gameend";
import Gameover from "./Gameover";

const Mine = ({ temp, keys }) => {
  console.log("asd", temp);

  let gameTarget;
  function Click(temp) {
    if (temp.target.className == "box mine") {
      temp.target.className = "box mine pop";
      gameTarget = temp.target.className;
      setTimeout(() => {
        alert("게임오버");
      }, 100);
    } else {
      temp.target.className = "box on pop";
      gameTarget = temp.target.className;
    }
    console.log(gameTarget);
  }

  return (
    <>
      <div className={"box " + temp} onClick={Click}></div>
      <Gameend temp={gameTarget} />
      <Gameover temp={gameTarget} />
    </>
  );
};

export default Mine;

 

 

 이 이후의 Gameend와 Gameover 컴포넌트에 결과값을 보내 결과 화면을 Router시키려 하였으나, 해결을 하지 못했다...

각 지뢰의 값을 state로 넣어주었어야 했는데 랜덤한 값을 넣으려면 배열이 좋겠다는 생각에 배열로 접근을 하다보니 난관에 봉착한 것 같다는 생각이들었다... 다음에는 state를 좀 더 활용하여 사용하려고 한다.

우선 결과값을 넣어주기 위하여 폭탄을 클릭했을 때 alert 메세지를 띄워놓았다.