Javascript로 미니게임 만들기2

앞서 만들었던 canvas(400 * 400) 위에 작업을 이어서 나가보자!

• canvas.js

const canvas = document.getElementById('myCanvas');
canvas.style.backgroundColor = "navy";
const context = canvas.getContext('2d');

// 패들
const barWidth = 200;
const barHeight = 20;
let moveBarRate = 20;
let barPosX = canvas.width / 2 - barWidth / 2;
let barPosY = canvas.height - barHeight;

// 공
const arcRadius = 20;
let arcPosX = canvas.width / 2;
let arcPosY = canvas.height - (arcRadius + barHeight);
let arcMoveDirX = -1;
let arcMoveDirY = -1;
let arcMoveRateX = 5;
let arcMoveRateY = 5;

공, 패들에 대한 초기 세팅 작업을 해주었다.

시간에 따라 공은 사방으로 튕겨나가게끔,
패들은 Y축은 고정된 채 좌우로만 이동시키게 하는 것이 이번 시간의 목표이다.

... 이어서

function draw(){
    // 화면 클리어
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 다른 도형 그리기
    drawBar();
    drawArc();
}

function drawBar() {
    context.beginPath();

    // 좌상단 기준으로 그림
    context.rect(barPosX, barPosY, barWidth, barHeight); //그리기
    context.fillStyle = "red";
    context.fill();

    context.closePath();
}

function drawArc() {
    context.beginPath();

    // 중점 기준으로 그림
    context.arc(arcPosX, arcPosY, arcRadius, 0, 2*Math.PI);
    context.fillStyle = "green";
    context.fill();

    context.closePath();
}

setInterval(draw, 10);	//0.01초 주기로 draw 함수 실행

===>

여기까지는 정적인 모습이다.
이제 공에 움직임을 주는 코드를 작성해보도록 하겠다..

function update() {
    // 데이터 수정 (도형의 위치 이동)
    if (arcPosX - arcRadius < 0) {	// 오른쪽 벽에 닿을 때
        arcMoveDirX = 1;
    }
    else if (arcPosX + arcRadius > canvas.width) {	// 왼쪽 벽에 닿을 때
        arcMoveDirX = -1;
    }        
    if (arcPosY - arcRadius < 0 ) {	// 위쪽 벽에 닿을 때
        arcMoveDirY = 1;
    }        
    else if (arcPosY + arcRadius > canvas.height) {	// 아래쪽 벽에 닿을 때
        arcMoveDirY = -1;
    }
    
    arcPosX += arcMoveDirX * arcMoveRateX;
    arcPosY += arcMoveDirY * arcMoveRateY;
}

setInterval(draw, 10);		// 0.01초 주기로 draw 함수 실행
//(추가)
setInterval(update, 10);	// 업데이트

다음시간에는 바의 움직임, 벽돌, 충돌함수 기능을 구현해보자!