HTML (9) 썸네일형 리스트형 [벽돌깨기]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.. [벽돌깨기]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축과 관련이.. [벽돌깨기]html 캔버스로 게임 만들기 - 2(공 움직이기) 2020/10/05 - [HTML] - [벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성) 캔버스를 이용해서 벽돌깨기 게임을 만들 준비와 공을 그렸습니다 이번에는 공을 움직이는 방법입니다 화면에서는 공이 움직이지만 실제로는 공이 움직이는 것처럼 보이게 공을 그렸다가 지우는 과정을 반복합니다 매 프레임마다 공의 위치를 조금씩 다르게 그려서 공이 움직이는 것처럼 보이게 하는 방식입니다 드로잉 루프 정의하기 매 프레임마다 캔버스에 계속해서 그리는 것을 반복하기 위해서는 갱신해주는 함수가 필요합니다 MDN 사이트에서는 JavaScript 타이밍 함수인 SetInterval() 함수 또는 requestAnimationFrame() 함수를 이용하면 함수를 계속 반복 사용할 수 있다고 소개하고 있습니다 s.. [벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성) 추억의 벽돌깨기를 HTML5로 만들 수 있습니다 코드는 MDN web docs에 나온 내용을 복습하면서 만든 벽돌깨기 게임입니다 캔버스 생성 HTML 구조는 간단하게 태그 하나면 준비가 끝납니다 캔버스 태그 id는 myCanvas로 만들고 캔버스의 가로 세로 길이를 결정하는 속성 width, height를 사용해서 width(너비)가 480이고 height(높이)가 320인 캔버스 태그를 만듭니다 스크립트 작성 HTML 태그는 태그 하나로 끝났습니다 벽돌깨기의 핵심은 태그로 구현합니다 캔버스의 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); 다음은 빨간색 네모를 캔버스에 그리는 방법입니다 주의 : be.. 움직이는 글자를 만들 수 있는 태그 marquee 사용법 움직이는 글자 태그입니다 marquee 태그는 입력한 글자를 움직이게 해주는 태그입니다 글자뿐만이 아니라 배경색, 글자의 속도 그리고 글자의 움직임 방향 등등 다양한 모습을 보여줄 수 있는 태그입니다 옵션의 종류가 다양한 편입니다 bgcolor="색상" 기본값은 없음입니다 css color를 주는 방식과 동일합니다 width="너비" 기본값 지정을 안 하면 화면을 다 채움니다 heigth="높이"기본값 지정을 안 하면 글자 크기를 따라갑니다 direction="방향"기본값 지정을 안 하면 왼쪽으로 움직입니다 loop="반복 횟수"기본값 지정을 안 하면 계속해서 반복합니다 scrollamount="속도" 배경 색상(배경 : 검은색) 너비(너비 : 100px) 높이(높이 : 100px) 방향(위, 오른쪽, .. 이전 1 다음
