자바스크립트 / 캔버스 2️⃣

//객체로 위의 데이터들을 한번에 묶을수 있다

var move = (50+20);
var xes = (40, 40+50+20, 40+50+20+50+20, 40+50+20+50+20+50+20);
var yes = (30, 30, 30+50, 30+50);
let colors = ("yellow","green","blue","red");

var boxes = (
    {x:40, y:30, color:"yellow"},
    {x:40, y:30, color:"yellow"},
    {x:40, y:30, color:"yellow"},
    {x:40, y:30, color:"yellow"},
);

var boxes = (
    new Box(30,30,"yellow"), //이런식으로 배열 안에 객체를 생성해줄수도 있다.이방법이 직관적이여서 추천!!
    {x:40, y:30, color:"yellow"}, //요것도 객체 형식임.하지만 이 방식은 어떤 데이터인지 한눈에 알수 없기 때문에 별로 좋은 방법은 아니다
    {x:40, y:30, color:"yellow"},
    {x:40, y:30, color:"yellow"},
    {x:40, y:30, color:"yellow"},
);

var boxes = (
    new Box(30,30,"yellow"),
    new Box(40+50+20,30,"green"),
    new Box(40+50+20+50+20,30,"blue"),
    new Box(40+50+20+50+20+50+20,30,"red"),
);
//요렇게 하기

– add() > 호출 함수

new add() > 빈 객체를 생성하고 초기화하는 동안 호출(실제로 객체의 객체이기 때문에 완전히 비어 있지는 않음)

– 자바스크립트는 모든 함수에서 사용할 수 있습니다.

– 이 == 창

– Jas에서는 함수(소문자)를 생성하는지 객체를 초기화하는 생성자(대문자, 생성자)를 생성하는지 주의해야 합니다.

function Box(x,y,color){
    this.x = x || 0; //초기화 되지 않으면 0을 넣어주고 초기화가 되면 x값을 넣어준다
    this.y = y || 0;
    this.color = color || "black"; //초기화 되지 않으면 color를 넣어주고 초기화가 되면 black을 넣어준다
}

function Box(x,y,color){
    this.x = x || 0; 
    this.y = y || 0;
    this.color = color || "black"; 
}


var boxes = (
    new Box(30,30,"yellow"),
    new Box(40+50+20,30,"green"),
    new Box(40+50+20+50+20,30,"blue"),
    new Box(40+50+20+50+20+50+20,30,"red"),
);

for(var box of boxes){
    var x = box.x;
    var y = box.y;
    var color = box.color;

    ctx.fillStyle = color;
    ctx.fillRect(x,y,50,50); 
}
//이런식으로 꺼내서 볼수있다