[웹 게임 개발] 핑퐁 - 화면 만들기

웹 게임 개발

[웹 게임 개발] 핑퐁 - 화면 만들기

파일 생성

pingpong 폴더안에 index.html, style.css, game.js 파일을 각각 생성합니다.

 

[웹 게임 개발] 핑퐁 - 화면 만들기 - 1

HTML파일 연결

index.html 파일에 css와 js 파일을 연결합니다.

 

[웹 게임 개발] 핑퐁 - 화면 만들기 - 2

link 태그로 css 연결, script 태그로 js 연결 해줍니다.

 

캔버스 생성

index.html 파일에 body태그안에 canvas태그를 사용해 게임 화면을 생성합니다.

 

[웹 게임 개발] 핑퐁 - 화면 만들기 - 3

css 스타일

style.css 파일에서 body의 여백 제거와 canvas화면을 뷰포트 기준으로 100, 화면을 검정색으로 스타일링 합니다.

 

[웹 게임 개발] 핑퐁 - 화면 만들기 - 4

캔버스는 기본적으로 인라인요소로 블록요소로 변경하여 마진 패딩 제거하고 불필요한 스크롤바 생성 방지를합니다.

 

반응형 화면 만들기

game.js 파일에 resize 이벤트를 걸어 화면 윈도우 창 100프로 유지하는 함수를 만듭니다.

 

[웹 게임 개발] 핑퐁 - 화면 만들기 - 5