728x90
과제내용
지뢰찾기 만들기
- 3 X 3
- 랜덤한 위치에 3개의 지뢰를 넣어주고
- 타일 컴포넌트를 클릭하면 지뢰인지 아닌지 보여주기
- 지뢰를 모두 피해서 열면 게임 클리어 화면 띄워주고
- 성공하지 못하면 게임오버 화면 띄워주자
Σ(っ °Д °;)っ
결과물
컴포넌트 구조
- Main.jsx
- Mine.jsx
- Gameend.jsx
- Gameover.jsx
- Mine.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 메세지를 띄워놓았다.
728x90
'블록체인_9기 > 과제' 카테고리의 다른 글
49강_220710_React(Redux 활용_간단한 주문페이지 제작) (0) | 2023.07.10 |
---|---|
48강_220706_React(TODO LIST 제작) (0) | 2023.07.07 |
46강_220704_React(캘린더 제작) (0) | 2023.07.04 |
44강_220629_React(로또 추첨기 제작) (1) | 2023.06.30 |
36강_220523_Node.js(게시판 페이지 만들기 총 복습) (0) | 2023.05.30 |