본문 바로가기

전체 글

 (101)
[벽돌깨기]html 캔버스로 게임 만들기 - 8(점수 추가와 승리 조건) 블록에 대해 점수를 부여하고 블록을 없애면 점수(scroe)가 오르는 것을 구현합니다 점수 점수를 만들기 위해서 변수 score를 만들고 0을 기본값으로 정해줍니다 var score = 0; drawScore() 함수를 만들어서 점수 표시를 만들어줍니다 drawScore는 화면에 점수를 보여주는 함수입니다 function drawScore() { ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Score: "+score, 8, 20); } font는 css속성과 동일합니다 글씨 크기 16px로 만들고 글씨체를 Arial로 설정합니다 ctx.fillText("Score: "+score, 8, 20); 부분을 통해서 점수가 변경되면 점수가..
[벽돌깨기]html 캔버스로 게임 만들기 - 7(벽돌 충돌감지) 만든 벽돌들 사이로 공이 빠져나가는 모습이 보입니다 공과 캔버스는 충돌처리가 되어있지만 벽돌은 충돌처리가 없습니다 그래서 공이 벽돌들을 그냥 지나치고 있습니다 충돌 감지를 통해서 공과 벽돌(블록)이 부딪히면 벽돌이 사라지는 것을 구현해보겠습니다 블록 충돌 감지 반복문을 통해서 블록들이 공과 충돌했는지 확인해주는 함수를 만듭니다 function collisionDetection() { for(var c=0; c collisionDetection() 함수는 충돌 감지하는 함수로 주석처리된 calculations 부분에서 충돌했을 경우 해당 블록을 어떻게 처리할지 결정합니다 패들(Paddle)때와 마찬가지로 공의 좌표와 블록의 좌표가 겹치는 여부에 따라서 충돌 여부가 결정됩니다 충돌 조건은 아래와 같은 4가지..
[벽돌깨기]html 캔버스로 게임 만들기 - 6(벽돌 만들기) 벽돌깨기란 이름이 무색하게 벽돌이 등장하지 않았습니다 2차원 배열을 통해서 여러 개의 벽돌을 구현할 예정입니다 벽돌 만들기 var brickRowCount = 3; var brickColumnCount = 5; var brickWidth = 75; var brickHeight = 20; var brickPadding = 10; var brickOffsetTop = 30; var brickOffsetLeft = 30; 각각 벽돌 배열 행의 수, 열의 수, 벽돌의 가로길이, 세로 길이, 벽돌이 서로 닿지 않게 하기 위한 패딩 캔버스의 끝 벽에 닿지 않기 위한 오프셋(간격 기능)입니다 벽돌을 for문을 통해서 생성합니다 행과 열에 지정한 수만큼 벽돌이 서로 닿지 않게 일정한 간격을 두고 생성됩니다 var br..

티스토리툴바