javascript16 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. Canvas을 사용하여 벽돌깨기 게임 만들기4 (Paddle과 키보드 컨트롤) 공을 치기 위한 paddle 정의 공을 치기 위한 paddle을 정의해보자 const paddleHeight = 10 const paddleWidth = 75 const paddleX = (canvas.width - paddleWidth) / 2 paddleX는 paddle의 왼쪽 끝 x좌표를 말한다. paddle을 그리는 drawPaddle()을 추가해준다. function drawPaddle() { ctx.beginPath() ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddHeight) ctx.fillStyle = "#222222" ctx.fill() ctx.closePath() } 유저의 paddle 컨트롤 addEventList.. 2021. 7. 18. 이전 1 2 3 4 다음
