분류 전체보기97 Canvas을 사용하여 벽돌깨기 게임 만들기10 (개발 마무리) 플레이어에게 생명을 부여하기 플레이어의 생명을 변수로 저장한다. let lives = 3 남은 생명 수를 표시하는 drawLives()도 정의해준다. function drawLives() { ctx.font = "16px Arial" ctx.fillStyle = "#0095DD" ctx.fillText("Lives: " +lives, canvas.width - 65, 20) } 이 부분은 drawScore()와 비슷하다. 바닥에 닿으면 바로 게임이 끝나는 방식이었지만 이제는 생명 수를 줄이고 생명이 없어지면 그 때 게임을 종료 시킬 것이다. 그렇게 하기 위해 draw()의 세줄을 수정하자 alert("GAME OVER") document.location.reload() clearInterval(tmp) .. 2021. 7. 18. 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을 사용하여 벽돌깨기 게임 만들기8 (점수 추가와 승패 판정 방법) 점수 계산하기 시작시 점수를 0으로 세팅 let score = 0 점수 화면을 만들고 업데이트를 하기 위해서 drawScore()을 추가한다. function drawScore() { ctx.font = "16px Arilal" ctx.fillStyle = "#0095DD" ctx.fillText("Score: " + score, 8, 20) } fillText()를 통해 문자를 출력할 수 있다. 8, 20은 문자가 배치될 좌표이다. 벽돌이 깨질 때 마다 score++을 해준다. function collisionDetection() { for (let c = 0; c < brickColumnCount; c++) { for (let r = 0; r < brickRowCount; r++) { let b = .. 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. 이전 1 ··· 19 20 21 22 23 24 25 다음
