Javascript 벽돌깨기 장애물 추가
코딩순서 : 기능구현 -> 코드정리 (리팩토링) // 정리하고 ToDoList
브릭 클래스화 , 장애물 추가
let bricksColor = ["red", "orange", "yellow", "green", "blue", "navy"];
// 벽돌 관련 클래스 변환
class Brick {
constructor(left, top, right, bottom, color, collisionCount) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
this.isAlive = true;
this.color = color;
this.collisionCount = collisionCount;
}
draw() {
if(this.collisionCount == 2)
{
context.beginPath();
context.rect(this.left, this.top, brickWidth, brickHeight);
context.fillStyle = bricksColor[this.color%5];
context.fill();
context.closePath();
return true
}
else if(this.collisionCount == 1)
{
context.beginPath();
context.rect(this.left, this.top, brickWidth, brickHeight);
context.fillStyle = "purple";
context.fill();
context.closePath();
return true
}
else
{
return false
}
}
}
class BlackBrick extends Brick{
/* movingAction() { // 자동으로 프로토타입 적용
this.left++;
// console.log('내가 움직이고 있어');
} */
drawBlackBricks() {
context.beginPath();
context.rect(this.left, this.top, brickWidth, brickHeight);
context.fillStyle = "black";
context.fill();
context.closePath();
}
}
let wall = new BlackBrick(
200 - (brickWidth) / 2 , // left
250 - (brickHeight) / 2, // top
200 + (brickWidth) / 2, // right
250 + (brickHeight) / 2, // bottom
'black', // color
1 // collisionCount
);
let wallMoveDirX = -1; // 원이 이동하는 방향 X축
let wallMoveDirY = -1; // 원이 이동하는 방향 Y축
let wallMoveSpd = 3;
const blackBrickWidth = 80;
const blackBrickHight = 25;
let blackBrickPosX = canvas.width / 2 - blackBrickWidth / 2;
// let arcPosX = barPosX + 50;
let blackBrickPosY = canvas.width / 1.5 - blackBrickWidth / 2;브릭 클래스화
function setBricks()
{
for(let i = 0; i < brickRow; i++) // 위에서아래로 4줄
{
bricks[i] = [];
for(let j = 0; j < brickColumn; j++) // 좌우로 5개씩
{
// TODO : right : left + 50 해보기
// bricks[i][j] = {
// left : 55 + j * (brickWidth + 10),
// /* right:this.left + 50, */
// right : 55 + j * (brickWidth + 10) + 50,
// top : 30 + i * (brickHeight + 5),
// bottom : 30 + i * (brickHeight + 5) + 25,
// column : i,
// row : j,
// collisionCount : 2
bricks[i][j] = new Brick(
55 + j * (brickWidth + 10),
30 + i * (brickHeight + 5),
55 + j * (brickWidth + 10) + 50,
30 + i * (brickHeight + 5) + 25,
i,
2
)
}
}
}
// function getRandomColor() {
// let r = getRand(0, 255),
// g = getRand(0, 255),
// b = getRand(0, 255);
// let rgb = '(' + r + ',' + g + ',' + b + ')';
// return rgb;
// // Return random number from in to max
// function getRand(min, max) {
// if (min >= max) return false;
// return ~~(Math.random() * (max - min + 1)) + min;
// };
// };
// 랜덤색상값 생성
// 브릭갯수 줄에 맞추어 색상값 갯수 생성 [포문]
// 색상부여
//let bricksColor = ["red", "orange", "yellow", "green", "blue", "navy"];
function drawBricks()
{
let gaming = false;
// context.beginPath();
wall.drawBlackBricks();
for(let i = 0; i < brickRow; i++) // 위에서아래로 4줄 {
{
for(let j = 0; j < brickColumn; j++) // 좌우로 5개씩
{
// TODO : right : lefi + 50 해보기
/* if(bricks[i][j].collisionCount == 2)
{
context.beginPath();
context.rect(bricks[i][j].left, bricks[i][j].top, brickWidth, brickHeight);
context.fillStyle = bricksColor[i%5];
context.fill();
context.closePath();
gamimg = true;
}
else if(bricks[i][j].collisionCount == 1)
{
context.beginPath();
context.rect(bricks[i][j].left, bricks[i][j].top, brickWidth, brickHeight);
context.fillStyle = "purple";
context.fill();
context.closePath();
gamimg = true;
}
else
{
} */
gaming = bricks[i][j].draw();
}
}
if(!gaming) {
// clear();
}
// context.closePath();
}장애물 이동추가
function update()
{
// checkToWin();
// 게임 클리어 관련
if( arcPosY + 10 > 400)
{
// window.location.reload();
//console.log('gg')
// alert("겜오버!!")
}
//데이터 수정 도형의 위치 이동
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 * arcMoveSpd;
arcPosY += arcMoveDirY * arcMoveSpd;
ball.left = arcPosX - arcRadius;
ball.right = arcPosX + arcRadius;
ball.top = arcPosY - arcRadius;
ball.bottom = arcPosY + arcRadius;
if(wall.left < 0)
{
wallMoveDirX = 1;
}
else if(wall.right > canvas.width)
{
wallMoveDirX = -1;
}
wall.left += wallMoveDirX * wallMoveSpd;
wall.right += wallMoveDirX * wallMoveSpd;
// 충돌확인 어떤경우에도 안부딪히는 상황
if(isCollisionRectToArc(ball, paddle))
{
arcMoveDirY *= -1;
arcPosY = paddle.top - arcRadius;
}
if(isCollisionRectToArc(ball, wall)) // right left top bottom 벽돌충돌 방향전환 추가
{
if(arcPosX > wall.right){
arcMoveDirX *= -1;
arcPosX = wall.right + arcRadius;
}else if(arcPosX < wall.left){
arcMoveDirX *= -1;
arcPosX = wall.left - arcRadius;
}else if(arcPosY < wall.top){
arcMoveDirY *= -1;
arcPosY = wall.top - arcRadius;
}else if(arcPosY > wall.bottom){
arcMoveDirY *= -1;
arcPosY = wall.bottom + arcRadius;
}
}
for(let i = 0; i < brickRow; i++)
{
for(let j = 0; j < brickColumn; j++)
{
if (isCollisionRectToArc(ball, bricks[i][j]))
{
// 벽돌을 안보이게.. 위치를 바꾸던지.. 볼의 방향을 바꾸던지..
// console.log('i : ', i, ', j : ', j);
if(bricks[i][j].collisionCount > 0) {
bricks[i][j].collisionCount--;
arcMoveDirY *= -1;
break
// bricks[i][j].isAlive = false;
// deadBricksCount++;
// if (deadBricksCount == brickRow * brickColumn)
// // 게임 클리어
// )
}
}
else{
}
}
}
}
dalssenger