벽돌깨기 게임

학습목표Canvas API 이용하여 html에 그려보기document, context 학습htmljavascriptcanvas api를 이용해 도형그리기 arc, rect, beginPath, closePath 등등 각 메소드 이해그리드개념 Canvas APIarc 이

학습 목표 앞서 만든 캔버스를 이용해 공을 움직여보자 좌우로 공 움직이기 먼저 우리는 공을 움직일 것이기 때문에 '방향'이라는 새로운 변수가 필요하다. x축, y축, 속도를 변수의 담아보자. 학습 내용 핵심. 배운거 : 변수를 넣는것을 두려워하지말자 내가 바꾸게 뭔

학습 목표eventListner, eventHandler를 통해 keydown시 bar이동시키기bar 와 ball 충돌시 튕겨내기먼저 eventListner, eventHandler를 이용해보자.addEventListener를 통해 특정한 이벤트에서 일어날 동작을 정

학습 목표블록 만들기볼과 블럭 충돌시키기

학습 목표GameOver 기능 추가하기GameClear 기능 추가하기ball이 bar와 충돌을 일으키지 않는 지점. 이는 곧 ball이 게임화면의 아래쪽과 충돌할때 라고 접근할 수 있다. 이에 해당하는 함수에서 방향을 바꿔주는 코드를 삭제하고 alert() 메세지와 함

학습 목표 space bar를 눌렀을때 게임 시작하기 ball의 위치를 bar와 맞추고, 게임 시작전 같이 움직이도록 하기 spacebar로 게임 시작하기 ball이 움직이고 충돌을 일으키는 코드는 모두 `function update() 안에 들어있다. 그리고 이를

학습 목표기존에 구현했던 brick 코드 class형태로 수정하기먼저 객체를 정의하기 위해 상태(멤버 변수)와 메서드(함수)를 구성해보자. 앞서 작성한 코드를 수정하는 것이기에 setBricks()의 내용을 constructor 안에 구상하고, drawBricks()의

학습 목표구현된 코드를 보면 간단해 보일 수 있지만, class의 사용과 참조로 인해 변수가 가르키는 값이 헷갈릴 수 있다. 중앙에 위치할 장애물 블록만들기 좌우로 움직이기 ball과 충돌시키기앞선 포스팅에서 만든 Brick 이란 class를 참조하여, CenterB