반응형 개발 프로젝트8 자바스크립트로 게임 만들기(2) 그러면 계속해서 자바스크립트로 벽돌깨기 게임을 만들어 보겠습니다. 저번에는 canvas의 기본 세팅을 하고 벽돌을 만들어보았고 이번에는 제일 하단에서 좌우로 움직이는 수평 바를 만들어 보겠습니다. 수평 바 생성 먼저 bar.js를 만든 뒤 아래와 같이 입력합니다. bar.js export class Bar { constructor(x, canvasWidth, canvasHeight){ this.width = 100; this.height = 10; this.x = x; this.y = canvasHeight - this.height; this.vx = 0; this.canvasWidth = canvasWidth; this.fillColor = "#3b81eb"; } draw(ctx){ ctx.fillSt.. 2020. 11. 7. 자바스크립트로 게임 만들기(1) 자바스크립트와 canvas를 활용해서 간단한 벽돌깨기 게임을 만들어 보겠습니다. 다 만들어진 게임의 모습은 아래와 같습니다. 소스코드가 필요하신 분은 아래 주소에서 확인해주세요. https://github.com/arclic/JS-breakout 기본 세팅 먼저 app.html 파일을 만들고 다음과 같이 입력해줍니다. app.html 먼저 게임의 타이틀을 BreakOut이라고 설정한 뒤 벽돌깨기 게임이 동작할 canvas를 하나 생성합니다. 그리고 canvas 주변에 border을 생성해줍니다. 게임 구현의 대부분은 자바스크립트에서 할 것이기 때문에 html은 이렇게 간단하게만 입력해도 됩니다. 다음으로는 app.js 파일을 만들고 다음과 같이 입력해줍니다. app.js class App{ constru.. 2020. 11. 6. 이전 1 2 다음 반응형
