개발 공부/canvas10 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. 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. 이전 1 2 3 다음
