본문 바로가기

전체 글

 (101)
[벽돌깨기]html 캔버스로 게임 만들기 - 5(게임 오버) 게임 오버 기능을 구현하는 방법으로 지금까지 만든 게임은 게임 오버 조건이 없어서 끝이 없습니다 캔버스의 아래 방향에 닿으면 게임 끝나는 것을 조건으로 구현해보겠습니다 게임 오버 기능 구현 게임이 끝날 수 있게 아래 방향에 했던 충돌 처리 로직을 조금 바꿔서 게임 오버 기능을 구현합니다 if(x + dx > canvas.width-ballRadius || x + dx canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } 위, 왼쪽, 오른쪽은 그대로 두고 아래 방향의 조건만 수정합니다 if(y + dy < ballRadius) { dy = -dy; } else if(y + dy..
[벽돌깨기]html 캔버스로 게임 만들기 - 4(패들과 키보드 조작) function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } 공의 움직임의 구현이 끝났습니다 이제는 패들(Paddle)을 통해서 공의 움직임을 바꿀 수 있게 패들을 만들고 만든 패들을 키보드 조작을 통해서 움직일 수 있게 하도록 하겠습니다 패들(Paddle) 만들기 패들은 공의 움직임을 바꿔주는 용도로 크기가 정해져 있습니다 막대기 모양으로 일정한 너비와 높이를 가지고 있습니다 var paddleHeight = 10; var paddleWidth = 75; v..
[벽돌깨기]html 캔버스로 게임 만들기 - 3(충돌감지) 공의 움직임까지 구현했지만 공이 화면 밖으로 사라지는 문제가 있습니다 화면의 끝, 벽과 충돌할 때 감지하고 벽 밖으로 나가지 못하게 충돌 감지 함수를 만들고 충돌할 경우 벽에 튕기도록 해보겠습니다 충돌 감지 충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을 수정해야 합니다 ballRadius 변수를 만들고 원의 반지름 값에 대입합니다 var ballRadius = 10; drawBall() 함수 안에 ballRadius을 그리는 코드를 아래와 같이 변경해보겠습니다 ctx.arc(x, y, ballRadius, 0, Math.PI*2); 위아래 좌 우 방향 확인하기 매 프레임마다 공이 4방향에 충돌했는지 확인해야 합니다 위, 아래 방향은 y축과 좌, 우 방향은 x축과 관련이..

티스토리툴바