[공룡 점프 게임] 4. 배경 컴포넌트 작성

Main.js에서 사용하는 세 개의 컴포넌트를 작성해야한다. 배경 컴포넌트, 공룡 컴포넌트와, 세균 컴포넌트이다. 세 컴포넌트 모두 독립적으로 작동하도록 작성하였다. 배경 컴포넌트는 공룡이 오른쪽으로 움직이는 효과를 내기 위해 작성하였다. 배경 이미지가 왼쪽으로 계속해서 움직여 공룡이 오른쪽으로 움직이는 효과를 낸다. 이외의 기능은 없는 단순한 컴포넌트이다.

 

Background.js

import React, { useState, useEffect, useRef } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BackgroundImg from '../image/background.png';
const useStyles = makeStyles(theme => ({
  root: {

  },
  background: {
    border: '1px solid black',
    margin: '50px 0 0 50px',
    position: 'absolute'
  },
}))
function Background() {
  // init
  const updateTime = 20;
  const speed = 5;
  const interval = useRef();
  // State
  const [offSet, setOffSet] = useState(0);
  useEffect(()=>{
    return () => {
      clearInterval(interval.current);
    }
  },[])
  useEffect(() => {
    draw();
    setBackgroundMovement();
    return () => {
			clearInterval(interval.current);
		};
  }, [offSet])
  // func
  const setBackgroundMovement = () => {
    interval.current = setInterval(() => {
      if (offSet == 1000-speed) {
        setOffSet(0);
      } else {
        setOffSet(offSet + speed);
      }
    }, updateTime)
  }
  const draw = () => {
    let canvas = document.querySelector('canvas#background');
    let ctx = canvas.getContext('2d');
    let imageObj = new Image();
    imageObj.onload = function () {
      // left
      ctx.drawImage(imageObj, offSet, 0, 1000-offSet, 500, 0, 0, 1000-offSet, 500);
      // right
      ctx.drawImage(imageObj, 0, 0, offSet, 500, 1000 - offSet, 0, offSet, 500);
    }
    imageObj.src = BackgroundImg;
  }
  // css
  const classes = useStyles();
  return (
    <div>
      <canvas width="1000px" height="500px" id="background" className={classes.background}>
      </canvas>
    </div>
  );
}
export default Background

배경 컴포넌트 내부에는 canvas 태그만 존재하고 배경 이미지를 canvas에 그리는 draw 함수를 실행한다. canvas 태그는 웹 페이지에서 그래픽을 그리기 위해 사용한다. 여기서는 배경 이미지를 표현하는 기능을 사용한다. 이를 위해 canvas 태그를 선택하고 getContext 함수를 호출하여 이미지를 canvas에 그리는 기능을 가진 컨텍스트 객체를 불러온다. 컨텍스트 객체에는 drawImage라는 함수가 존재하는데, 이미지를 canvas에 그리는 함수이다. 이 함수의 사용법은 MDN web docs를 참고하였다.

 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

drawImage를 이용하면 원본 이미지를 잘라서 canvas에 원하는 위치에 원하는 비율로 그릴 수 있다.

 

공룡 점프 게임에서의 배경 이미지와 게임상의 배경의 가로*세로 크기는 500*1000이다. 이 이미지를 사용햇 무한히 긴 배경 이미지가 왼쪽으로 계속 움직이는 효과를 내야한다. 이를 위해 배경이 왼쪽으로 움직여서 게임 화면에서 잘린부분을 오른쪽으로 다시 붙여야한다. 그림으로 설명하면 다음과 같다.

 

구현을 위해 offSet이라는 state에 배경이 얼마나 왼쪽으로 이동했는지를 저장하고 useEffect에서 offSet값을 특정 시간 뒤에 증가시킨다. 배경 이미지의 가로크기가 1000이므로 offSet를 0부터 1000까지 증가시키고 1000이 되면 다시 0으로 초기화한다. offSet값이 변하면 배경 이미지를 다시 그려야 해야하므로 offSet값이 변할 때마다 useEffect 내부에서 배경 이미지를 그리는 함수를 다시 호출한다 (useEffect 함수에 [offSet] 배열을 전달). 또한 배경 이미지를 다시 그리면서 이전에 설정한 setInterval 함수를 제거하고 새로운 setInterval 함수를 호출하여 offSet값을 특정 시간 뒤에 다시 증가시킨다.

 

[전체 글]

[공룡 점프 게임] 7. 마무리

[공룡 점프 게임] 6. React 웹 게임 Heroku에 배포

[공룡 점프 게임] 5. 공룡과 병균 컴포넌트 작성

[공룡 점프 게임] 4. 배경 컴포넌트 작성

[공룡 점프 게임] 3. 메인화면 작성

[공룡 점프 게임] 2. React 앱 생성 및 설정

[공룡 점프 게임] 1. 프로젝트 소개