개발 공부35 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. Canvas을 사용하여 벽돌깨기 게임 만들기3 (공을 벽에 튕기기) 간단한 충돌 감지 ballRadius라는 변수를 만들어 원의 반지름 값 대신 사용하자 let ballRadius = 10; //function drawBall() 안의 ctx.arc를 수정 ctx.arc(x, y, ballRadius, 0, Math.PI * 2, false) 반지름을 사용하는 곳을 수정해준다. 우리는 원이 화면밖으로 나가지 않기를 원한다. if (y + dy canvas.height) { dy = -dy } if (x + dx > canvas.width || x + dx < 0) { dx = -dx } 원의 중심 y좌표가 0보다 작아지거나 canvas.height보다 커지면 dy를 -dy로 바꿔준다. x좌표 또한 0보다 작아지거나 canvas.width보다 .. 2021. 7. 18. Canvas을 사용하여 벽돌깨기 게임 만들기2 (공 움직이기) 드로잉 루프를 정의하기 아래의 코드를 제외한 코드를 지우자. const canvas = document.querySelector("#canvas") const ctx = canvas.getContext("2d") 타이밍 함수인 setInterval()를 사용해보자. function draw() { } setInterval(draw, 10) setInterval()의 첫번째 인자에는 실행시킬 함수, 두번째 인자에는 얼마의 시간 단위로 실행시킬지이다. 시간 단위는 ms이다. 따라서 매 순간 원을 그리기를 반복해보자. let x = canvas.width / 2 let y = canvas.height - 20 const dx = 1 const dy = -1 function draw() { ctx.beginPa.. 2021. 7. 17. 이전 1 ··· 5 6 7 8 9 다음
