비전공 개발자

마지막으로 수정하고 웹 게임을 배포하고 마무리한다. 기간 프로젝트 개발 기간 : 2019년 12월 16일 ~ 2019년 12월 30일 (2주) 블로그 정리 기간 : 2020년 02월 01일 ~2020년 02월 02일 (2일) 리액트 웹 게임 배포 링크 https://jb-game-jump.herokuapp.com/ Jump Game jb-game-jump.herokuapp.com 리액트 웹 게임 깃 주소 https://github.com/Jongbeom2/game-jump Jongbeom2/game-jump Contribute to Jongbeom2/game-jump development by creating an account on GitHub. github.com [전체 글] [공룡 점프 게임] 7...

실행 다음의 명령어를 입력하여 개발 및 테스트한다. npm run dev 빌드 개발이 완료되면 웹 게임을 Heroku에 배포한다. 우선 배포 전 다음의 명령어를 입력하여 빌드한다. npm run build 빌드가 완료되면 build 폴더에 이미지 파일과 javscript 파일이 생성된다. 이때 index.html 파일은 자동으로 생성되지 않으므로 복하여 build 폴더에 같은 파일을 생성한다. server.js const path = require('path'); const express = require('express'); // create server const app = express(); // set production env app.use(express.static(path.join(__dir..

배경 컴포넌트에 이어 공룡과 병균 컴포넌트를 작성하였다. 공룡 컴포넌트에서는 공룡 이미지를 렌더링하고 스페이스바를 누르는 이벤트가 발생하면 공룡 이미지를 위아래로 이동시켜 점프 효과를 낸다. Character.js import React, { useState, useEffect} from 'react'; import { makeStyles } from '@material-ui/core/styles'; import CharacterImg from '../image/character.png'; const useStyles = makeStyles(theme => ({ root: { }, character: { position: 'absolute', width:'80px', height:'120px', left..

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 useStyle..

여기서부터는 React를 이용한 화면 코드를 설명한다. client.js에서는 Main.js의 코드를 index.html의 root라는 id를 가진 div 태그에 렌더링 한다. Main.js부터 Main.js에서 사용하는 컴포넌트를 설명하겠다. Main.js import React, { useState, useEffect, useRef } from 'react'; import Chracter from './component/Character'; import Background from './component/Background'; import Enemy from './component/Enemy'; import { makeStyles } from '@material-ui/core'; import Butt..

리액트를 이용하여 간단한 웹게임을 구현해보고자 이 프로젝트를 시작하였다. 인터넷 연결이 되지 않은 상태에서 크롬을 실행하면 나오는 공룡 게임에서 착안하였다. 다들 한 번씩은 해본 게임일 것이다. 공룡 점프게임은 이와 매우 유사한 게임이다. 비슷하게 장애물을 넘는 게임인데 선인장 대신 병균처럼 생긴 캐릭터를 넘는다는 점만 제외하면 같다. 모바일에서 접속하는 경우는 고려하지 않았다. 웹게임 배포 링크는 다음과 같다. https://jb-game-jump.herokuapp.com/ Jump Game jb-game-jump.herokuapp.com 게임 실행화면은 다음과 같다. 첫 화면을 클릭하면 게임이 시작된다. 병균이 한마리씩 공룡에 가까이 오게 되고 스페이스바를 눌러 점프해 병균을 피한다. 만약 피하는데 ..