본문 바로가기
반응형

JavaScript5

자바스크립트로 게임 만들기(3) 지난번까지 블록을 만들고 수평 바를 만들어서 움직이는 것 까지 해보았습니다. 이번에는 실제로 블록을 없앨 수 있는 공을 만들고 움직임을 제어해서 실제 게임을 한 번 플레이해보겠습니다. 공 만들기 ball.js를 만들고 다음과 같이 입력해줍니다. ball.js export class Ball{ constructor(r, canvasWidth, canvasHeight, bar){ this.x = 0; this.y = 0; this.r = r; this.canvasWidth = canvasWidth; this.canvasHeight = canvasHeight; this.vx = 0; this.vy = 0; this.bar = bar; this.isGameStart = false; this.color = "#c.. 2020. 11. 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.
자바스크립트 입문용 책 <모던 자바스크립트 입문> 리뷰 "인사이드 자바스크립트"를 읽고, 본격적으로 자바스크립트를 공부해보고자 했을 때 구입했던 책이다. "인사이드 자바스크립트"가 자바스크립트의 원론적인 부분을 다뤘다면 "모던 자바스크립트 입문"은 조금 더 포괄적이고 다양한 내용을 다루는 책이라고 할 수 있다. 책의 난이도? "인사이드 자바스크립트"의 난이도를 상이라고 한다면, 이 책은 중 정도의 난이도를 가지고 있다. 자바스크립트를 활용하기 위한 대부분의 내용(객체, 함수 등)을 잘 설명해놨는데 그렇다고 너무 쉬운 내용만 설명해 놓은 것은 아니다. 어려운 내용도 있지만, 순차적으로 잘 설명이 되어있어서 다른 책과 비교해서 쉽다는 것이 내 생각이다. 책의 특징? 저자인 이소 히로시가 수학과 CAD에 정통해서 그런지는 모르겠지만 canvas를 활용한 예제들과 .. 2020. 10. 30.
자바스크립트의 핵심 개념과 원리 <인사이드 자바스크립트> 리뷰 웹 개발을 제대로 공부해보기로 마음먹고 읽었던 두 번째 책이다. 개인적으로 자바스크립트는 그저 브라우저에서 특정 이벤트처리나 사용자와 인터랙션 하는 용도로만 사용되는 언어라고 생각했는데 전혀 맞지 않는 생각이었다. 현재 자바스크립트가 활용되고 있는 분야는 웹 개발, 서버 개발, 게임 개발 등 굉장히 많았고 모든 브라우저에서 인식 가능한 언어이기 때문에 활용되는 분야는 더욱더 많아질 것으로 예상된다. 그래서 책을 읽으면서 이렇게 늦게라도 자바스크립트를 제대로 공부할 수 있게 되어서 다행이라는 생각이 들었다. 책의 난이도? 책의 난이도는 꽤 있는 편이다. 처음에 객체에 대한 내용을 쉽게 잘 설명해주기는 하지만, 점점 뒤로 갈수록 어려워진다. 그리고 개인적으로 함수형 프로그래밍을 한 번도 해본 적 없었던 사람.. 2020. 9. 21.
반응형