canvas7 Canvas을 사용하여 벽돌깨기 게임 만들기9 (마우스로 패들 조종하기) 마우스로 paddle을 컨트롤 해보자 먼저 마우스의 움직임을 감지하기 위해 addEventListener()를 사용하자. document.addEventListener("mousemove", mouseMoveHandler, false) 위에서 사용한 mouseMoveHandler()를 정의해주자. function mouseMoveHandler(event) { let relativeX = event.clientX - canvas.offsetLeft if (relativeX > 0 && relativeX < canvas.width) { paddleX = relativeX - paddleWidth / 2 } } event.clinetX에는 전체 뷰포트를 기준으로 x값을 반환한다. 따라서 canvas의 좌측끝이.. 2021. 7. 18. Canvas을 사용하여 벽돌깨기 게임 만들기7 (충돌 감지) 충돌 감지 함수 우리는 공이 벽돌에 충돌했는지 확인해야 한다. 하지만 canvas에는 이런 기능이 없기 때문에 모든 벽돌을 순회하면서 부딪혔는지 확인하는 함수가 필요하다. function collisionDetection() { for (let c = 0; c < brickColumnCount; c++) { for (let r = 0; r < brickRowCount; r++) { let b = bricks[c][r] } } } 이중 반복문을 통해 bricks를 모두 순회하자 벽돌의 좌표는 왼쪽 위 모서리의 좌표이다. 이를 인지한 상태로 다음 4가지 조건을 만족해야 한다는 사실을 생각하자. 공의 x 좌표는 벽돌의 x 좌표보다 커야 한다. 공의 x 좌표는 벽돌의 x 좌표 + 가로 길이보다 작아야 한다. 공.. 2021. 7. 18. Canvas을 사용하여 벽돌깨기 게임 만들기6 (벽돌 만들기) 벽돌에 대한 변수 설정하기 이제 벽돌을 만들어 보자. 벽돌은 2차원 배열로 제공이 될 것이며 벽돌에 대한 정보를 저장할 것이다. let brickRowCount = 3 let brickColumnCount = 5 let brickWidth = 75 let brickHeight = 20 let brickPadding = 10 let brickOffsetTop = 30 let brickOffsetLeft = 30 brickRowCount는 열 수, brickColumnCount는 횡 수, brickWidth는 벽돌 너비, brickHeight는 벽돌 높이, brickPadding은 벽돌 사이의 간격, brickOffsetTop과 brickOffsetLeft는 캔버스의 모서리에 닿지 않게 할 변수이다. 각 벽.. 2021. 7. 18. Canvas을 사용하여 벽돌깨기 게임 만들기5 (게임 오버) 게임 오버 기능 적용하기 공을 튕겨내는 부분에서 공이 바닥에 도닥했을 경우에는 게임이 종료 되어야 한다. 따라서 땅에 부딪히면 경고를 띄워보자. if (y + dy canvas.height - ballRadius) { alert("GAME OVER") document.location.reload() clearInterval(tmp) } 여기서 문제는 경고를 띄우고 경고창을 끄면 reload가 되어야 하는데 alert()를 먼저 하고 reload()를 하면 계속해서 alert가 발생하는 것이다. 원인에 대해 생각을 했을 때 setInterval이 10ms단위로 계속 돌아가서 reload를 하기 전에 alert가 다시 호출되는 .. 2021. 7. 18. 이전 1 2 다음
