Код обсуждения не работает.Не уверен, как сделать массив - PullRequest
Новая
       16

Код обсуждения не работает.Не уверен, как сделать массив

1 голос
/ 30 апреля 2019

Я не понимаю, как превратить несколько цветных кирпичей в массив. Каждый ряд будет иметь свой цвет, и у меня будет только один кирпич, и я не знаю, как получить массив кирпичей 8x4.

Я понятия не имею, как это сделать. 

//Tracy Miles
//N220
//4.29.2019

var screenW = 800;
var screenH = 600;

var objects = [];

//setup for the canvas
function setup() {
createCanvas(screenW, screenH);
var paddle = new Paddle();
var ball = new Ball(paddle);
objects.push(paddle);
objects.push(ball);
objects.push(new Block(screenH/2, screenW/2, ball));
}

function draw() {
    background(0);
    for (var i = 0; i < objects.length; i++)
    {
        objects[i].update();
    }
}

function Paddle() {
    this.x = 0; this.y = screenH - 35;
    this.width = 100; this.height = 20;
    this.update = function() {
        this.x = mouseX;
        rect(this.x, this.y, this.width, this.height);
    }
}

function Ball(paddle) {
    this.paddle = paddle;
    this.x = screenW/2; this.y = screenH - 40;
    this.rad = 10;
    this.speedX = 3; this.speedY = -3;
    this.update = function() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x < 0 || this.x > screenW) {
            this.speedX *= -1;
        }

        if (this.y < 0 || this.y > screenH) {
            this.speedY *= -1;
        }

        if (this.y > this.paddle.y && this.y < this.paddle.y + this.paddle.height) {
            if (this.x > this.paddle.x && this.x < this.paddle.x + this.paddle.width) {
                this.speedY *= -1;
            }
        }
        rect(this.x, this.y, this.rad, this.rad, 90);
    }
}



////////This is where the main problem arises.//////////////

function Block(x, y, ball) {
    this.ball = ball;
    this.x = x; this.y = x;
    this.width= 100; this.height= 20;
    this.broken = false;
    this.update = function() {
        if (!this.broken) {
            rect(this.x, this.y, this.width, this.height);

            if (this.ball.y > this.y && this.ball.y < this.y + this.height) {
                if (this.ball.x > this.x && this.ball.x < this.x + this.width) {
                    this.broken = true;
                    ball.speedY *= -1;
                }
            }
        }
    }

}

Я хочу иметь массив блоков 8х4, и каждая строка имеет свой цвет.

1 Ответ

1 голос
/ 30 апреля 2019

Добавить атрибут цвета к цвету Ball.Цвет заливки объекта можно установить с помощью stroke(): 

function Block(x, y, color, ball) {
    this.ball = ball;
    this.x = x; this.y = y;
    this.width = 100; this.height= 20;
    this.color = color;
    this.broken = false;
    this.update = function() {
        if (!this.broken) {

            fill(this.color); // set current color
            rect(this.x, this.y, this.width, this.height);
            fill(255);        // switch back to "white" color 

            if (this.ball.y > this.y && this.ball.y < this.y + this.height) {
                if (this.ball.x > this.x && this.ball.x < this.x + this.width) {
                    this.broken = true;
                    ball.speedY *= -1;
                }
            }
        }
    }
}

Блоки могут быть созданы в 2 вложенных цикла.Цвет RGB может быть generated by [ color () `] (https://p5js.org/reference/#/p5/color).. В следующем примере создаются цвета градиента от синего до красного: 

for (let i=0; i < 4; ++i) {
    for (let j=0; j < 8; ++j) {
        let red = 70+(8-j)*20;
        let blue = 90+j*20;
        objects.push(new Block(50 + i*200, 20 + j*40, color(red, 0, blue), ball));
    }
}

См. Пример, где я применилпредложения к вашему коду: 

var screenW = 800;
var screenH = 600;

var objects = [];

//setup for the canvas
function setup() {
createCanvas(screenW, screenH);

    var paddle = new Paddle();
    var ball = new Ball(paddle);
    objects.push(paddle);
    objects.push(ball);

    for (let i=0; i < 4; ++i) {
        for (let j=0; j < 8; ++j) {
            let red = 70+(8-j)*20;
            let blue = 90+j*20;
            objects.push(new Block(50 + i*200, 20 + j*40, color(red, 0, blue), ball));
        }
    }
}

function draw() {
    background(0);
    for (var i = 0; i < objects.length; i++)
    {
        objects[i].update();
    }
}

function Paddle() {
    this.x = 0; this.y = screenH - 35;
    this.width = 100; this.height = 20;
    this.update = function() {
        this.x = mouseX;
        rect(this.x, this.y, this.width, this.height);
    }
}

function Ball(paddle) {
    this.paddle = paddle;
    this.x = screenW/2; this.y = screenH - 40;
    this.rad = 10;
    this.speedX = 3; this.speedY = -3;
    this.update = function() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x < 0 || this.x > screenW) {
            this.speedX *= -1;
        }

        if (this.y < 0 || this.y > screenH) {
            this.speedY *= -1;
        }

        if (this.y > this.paddle.y && this.y < this.paddle.y + this.paddle.height) {
            if (this.x > this.paddle.x && this.x < this.paddle.x + this.paddle.width) {
                this.speedY *= -1;
            }
        }
        rect(this.x, this.y, this.rad, this.rad, 90);
    }
}



////////This is where the main problem arises.//////////////

function Block(x, y, color, ball) {
    this.ball = ball;
    this.x = x; this.y = y;
    this.width = 100; this.height= 20;
    this.color = color;
    this.broken = false;
    this.update = function() {
        if (!this.broken) {
            fill(this.color);
            rect(this.x, this.y, this.width, this.height);
            fill(255);
            if (this.ball.y > this.y && this.ball.y < this.y + this.height) {
                if (this.ball.x > this.x && this.ball.x < this.x + this.width) {
                    this.broken = true;
                    ball.speedY *= -1;
                }
            }
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
...