我不明白如何将多个彩色积木组成一个数组。每行都有不同的颜色,我只出现一 block 砖,我不确定如何获得 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;
}
}
}
}
}
我想要一个 8x4 的 block 阵列,每一行都是不同的颜色。
最佳答案
将颜色的属性添加到 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;
}
}
}
}
}
block 可以在 2 个嵌套循环中创建。 RGB 颜色可以由 [
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>
关于javascript - 突破代码不起作用。不知道怎么做数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55912384/