웹 게임 개발 [웹 게임 개발] 스틱 히어로 - 게임 인트로 만들기(1) [웹 게임 개발] 스틱 히어로 - 게임 인트로 만들기(1) 웹 게임 개발 폴더 구성 기본적은 게임을 구성하는 파일과 폴더를 생성합니다. HTML 파일 생성 index.html 이렇게 구성된 HTML파일은 캔버스를 생성하고, 외부 스타일시트 및 스크립트를 연결합니다. idocleancode.tistory.com 히어로 몸통 만들기 game.js 파일에 전역 변수로 히어로 크기 변수 지정합니다. // 히어로 크기 let heroWidth = 80; let heroHeight = 90; game.js 파일에 createHero함수를 만들어 아래 코드를 작성합니다 function createHero(ctx, x, y, width, heig..

웹 게임 개발 폴더 구성 기본적은 게임을 구성하는 파일과 폴더를 생성합니다. HTML 파일 생성 index.html 이렇게 구성된 HTML파일은 캔버스를 생성하고, 외부 스타일시트 및 스크립트를 연결합니다. 게임 디자인과 로직을 구현할 수 있게 설정 합니다. 캔버스 위치 설정 canvas { border: 1px solid black; display: block; margin: 0 auto; } 캔버스는 기본적으로 인라인 요소라서(inline element), 블록 요소로 변경해야 레이아웃을 가운데 정렬을 할수 있습니다. 캔버스 제어 game.js에 아래 코드를 작성 합니다. // 캔버스 요소와 그래픽 컨텍스트를 가져옵니다. const canvas = document.getElementById('game..