TIL-no16. Javascript로 벽돌깨기 게임 만들기(1)

포스팅에 앞서 오늘 충격적인 영상을 발견하여 공유링크 남기고 시작합니다.
자바스크립트 공부를 시작할때 이것만한게 없을 것 같습니다 ..
https://youtu.be/Ukg_U3CnJWI

벽돌깨기 게임은 전적으로MDN 의 힘을 빌렸습니다.(총 10편입니다)

완성본:https://sanghunlee-711.github.io/wecode1stweek/PROJECTS.html

1. 초기 그리기

우선 html 에 캔버스를 불러와 간단한 id 지정 뒤 js에서 Selector를 통하여 불러주며 변수를 지정했습니다.

var canvas = document.getElementById("myCanvas");//캔버스 불러옴
var ctx = canvas.getContext("2d");// 캔버스 2d로 선언

*참고

ctx.beginPath(); // 시작을 알리는것.
ctx.rect(20, 40, 50, 50); // 직사각형 정의. 앞의 두개는 좌상단 부터의 좌표,, 나머지 두개는 각각 너비와 높이
ctx.fillStyle ="#FF0000"; //얘는 아래의 fill method에 칠해질 색을 말해줌.
ctx.fill();
ctx.closePath();// 끝을 알림

그리고 css 로 간단한 색 설정 뒤 공을 그렸습니다.
오늘 배운것중 가장 기억에 남는것이(다른건 어려우니까) 해당 부분이었는데 캔버스 요소를 js 로 어떻게 사용하는지 알게된 것 같습니다.

2. 공그리기

공도 유사한 방식으로 rect가 아닌 arc를 이용했습니다.

function drawBall() { 
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
  ctx.fillStyle = "red";
  ctx.fill();
  ctx.closePath();
}

PI 는 파이값(3.14xxx)이며 Math object를 이용하여 기입되었습니다.

3. 벽돌그리기

var brickColumnCount = 3;
var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
  bricks[c] = [];
  for(var r=0; r<brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0, status: 1 };
  }
}  

brick 이라는 변수로 array를 만들고
for 문을 통하여 벽돌의 갯수를 3*5로 만들었습니다. status는 추후 벽돌의 깨짐현상을 만들기 위해 사용되었습니다.

4. 키조작

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);
 
function mouseMoveHandler(e){
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width){
        paddleX = relativeX - paddleWidth/2;
    }
}


function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}  //e 변수로 표시된 이벤트 파라미터를 이용 키를 누르면 true 놓으면 false로 표시!

function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    } //keyCode == 37은 왼쪽 방향키 39는 오른쪽 방향키, 
}

addeventlistener를 통하여 각 움직임마다 이벤트를 localstorage로 옮겨주는 작업을 했으며 function설정시 변수 e를통해 각 key값을 설정받았습니다. 이부분에서 우측좌측 자유롭게 조절이 되지않고 한번 paddle이 오른쪽으로 간뒤로 왼쪽으로 오지 않는 오류가 났었는데 문제는 괄호하나 잘못친걸 찾으며 해결되었습니다.