[React][프로젝트] 피카츄 놀이터🍃

🍀Github 링크: https://github.com/Park-Yuyeong/challenge-class/tree/main/assignments/02assignment/pikachu

 

🍊 요구사항

기능

• 가로 10칸, 세로 10칸 규격의 공간에서 피카츄가 한 칸 씩 돌아다닐 수 있는 놀이터를 만들어 주세요.
• 키보드의 방향키를 사용하여 피카츄를 움직일 수 있어요.v
• 좌, 우 방향 전환시에는 피카츄가 뒤집혀야 해요.
• 스페이스바를 누르면 피카츄가 점프를 할 수 있어야 해요.
• 피카츄가 맵 밖으로 나가면 안돼요.

코드

• React를 사용하여 구현해야 합니다.
• grass.png 하나가 가로, 세로 1칸 크기를 나타내도록 구현해야 합니다.
• pikachu.png 하나가 가로, 세로 1칸 크기에 해당하도록 구현해야 합니다.

 

🥕 구현 코드

  const [position, setPosition] = useState({ x: 0, y: 0 }); // 피카츄 위치
  const [direction, setDirection] = useState(1); // 피카츄가 바라보는 방향 (1: 오른쪽 / -1: 왼쪽)
  const [isJumping, setIsJumping] = useState(false); // 피카츄는 점핑중인가?

  // 피카츄 움직이기
  const movePikachu = (e) => { // onKeyDown 이벤트 핸들러
    const { y, x } = position;

    switch (e.key) {
      case "ArrowUp": // 위로
        setPosition({ y, x: x - 80 >= 0 ? x - 80 : x });
        break;
      case "ArrowDown": // 아래로
        setPosition({ y, x: x + 80 < 800 ? x + 80 : x });
        break;
      case "ArrowLeft": // 왼쪽으로
        setPosition({ y: y - 80 >= 0 ? y - 80 : y, x });
        setDirection(-1);
        break;
      case "ArrowRight": // 오른쪽으로
        setPosition({ y: y + 80 < 800 ? y + 80 : y, x });
        setDirection(1);
        break;
      case " ": // 점프
        if (isJumping === false) {
          setPosition({ y, x: x - 30 });
          setIsJumping(true);
          setTimeout(() => {
            setPosition({ y, x });
            setIsJumping(false);
          }, 100);
        }
        break;
    }
  };

useState를 이용하여 간단하게 구현가능하다!