반응형 개발 프로젝트/JavaScript4 React를 사용하는 이유 시작하기 앞서 여러 회사에 인턴쉽을 준비하면서 부족한 점을 여럿 느꼈다. 그중에서 가장 큰 것이 개인적으로 진행해본 제대로 된 토이 프로젝트가 한 개도 없다는 것이었다. 나름 관련 전공으로 대학교도 3학년까지 마쳤고, 국내 스타트업에서 인턴을 진행해본 경험도 있지만 내 스스로 흥미를 가지고 무엇인가를 개발해본 적은 없었던 것 같다. 그저 막연히 풀스택 엔지니어가 되고 싶다는 생각만 가지고 있었고, 관련 지식은 가지고 있지도 가질 생각도 하지 않은 상태라 많은 반성을 했다. 그래도 이번 계기를 귀감으로 삼아 혼자서 스스로 웹 서비스를 하나 만들어 보려고 한다. 목표는 요즘 많은 관심을 가지고 있는 "동기부여" 관련 커뮤니티 사이트를 만드는 것이다. 개발을 진행하면서 github 관리도 조금씩 하고, 고민하.. 2021. 5. 8. 자바스크립트로 게임 만들기(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. 이전 1 다음 반응형
