Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다. KAPLAY, HTML5 Games library for JavaScript and TypeScriptKAPLAY is a JavaScript HTML5 game engine library that makes it easy to create games. Is the successor of KABOOM.JS.kaplayjs.com 기존 코드에 적용const GamePlaying = ({ canvasWidth, canvasHeight }: GamePlayingPropsInterface) => { const canvasRef: RefObject = useCanvas(canvasWidth,..
Canvas API
Canvas API란 Javascript와 HTML의 canvas 엘리먼트를 통해 웹에 그래픽을 그리기 위한 수단이며, 애니메이션, 게임, 그래픽 및 비디오를 처리하기위해 사용됩니다. 이번 프로젝트는 2D 웹 게임을 만드는 프로젝트 이기에 웹에서 그래픽을 구현하고 Javascript를 이용해 그래픽을 조작할 수 있어야 하기 때문에 Canvas API는 중요 기술이였다. 우선 React 기반에서 Typescript를 사용해 컴포넌트 및 기능 개발을 진행할 것이다. 1. useRef() 리액트 훅을 이용해 요소에 접근React의 함수형 컴포넌트에서 요소에 접근하기 위해서는 리액트의 useRef() 훅을 이용해 접근해야 한다.const GamePlaying = ({ canvasWidth, canvasHei..
