Question

我想让机器人的头部在反弹后改变颜色，为此，我必须循环遍历阵列。谁能告诉我该怎么做？此外，您如何确定机器人何时碰撞然后播放碰撞音乐？有没有办法让机器人在碰撞时改变方向？

var colors = [
    { r: 66,  g: 135, b: 245 },
    { r: 66,  g: 242, b: 245 },
    { r: 199, g: 135, b: 194 },
    { r: 168, g: 135, b: 199 },
    { r: 76,  g: 35,  b: 239 }
 ];

 var robots = [];
 var x = 200;
 var y = 100;
 var xspeed = 4;
 var yspeed = -3;
 var robot;
 var img;
 var bounceSound;
 var collideSound;
 var spaceSound;

function preload() {
    img = loadImage('resources/space.png');
    bounceSound = loadSound('Sounds/blip.mp3');
    collideSound = loadSound('Sounds/collide.mp3');
    spaceSound = loadSound('Sounds/space sound.mp3');
}

function setup() {
    createCanvas(1200, 800);
    rectMode(CENTER);
    spaceSound.loop();
    robots[0] = new Robot(random(1200), random(800), 0);
    robots[1] = new Robot(random(1200), random(800), 1);
    robots[2] = new Robot(random(1200), random(800), 2);
    robots[3] = new Robot(random(1200), random(800), 3);
}

function draw() {
    background(img);
    for (var r of robots) {
        r.show();
        r.move();
        r.bounce();
    }
}

function mousePressed() {
    robots.push(new Robot(mouseX, mouseY, 4));
}

class Robot {
    constructor(_x, _y, _col) {
        this.xLoc = _x;
        this.yLoc = _y;
        this.colNum = _col;
        this.xspeed = 4;
        this.yspeed = -3;
    }

    show() {
        noStroke();
        fill(colors[this.colNum].r, colors[this.colNum].g, colors[this.colNum].b);
        rect(this.xLoc, this.yLoc, 100, 50, 25);
        fill(0);
        ellipse(this.xLoc - 25, this.yLoc + 10, 20);
        ellipse(this.xLoc + 25, this.yLoc + 10, 20);
        fill(255);
        ellipse(this.xLoc - 25, this.yLoc + 15, 5);
        ellipse(this.xLoc + 25, this.yLoc + 15, 5);
        stroke(150);
        line(this.xLoc - 20, this.yLoc - 10, this.xLoc - 30, this.yLoc - 60);
        line(this.xLoc + 20, this.yLoc - 10, this.xLoc + 30, this.yLoc - 60);
        noStroke();
        fill(150);
        ellipse(this.xLoc, this.yLoc + 65, 40, 80);
        fill(218, 112, 214)
        triangle(this.xLoc - 17, this.yLoc + 40, this.xLoc - 20, this.yLoc +       70, this.xLoc - 40, this.yLoc + 85);
        triangle(this.xLoc + 17, this.yLoc + 40, this.xLoc + 20, this.yLoc + 70, this.xLoc + 40, this.yLoc + 85);
        triangle(this.xLoc - 10, this.yLoc + 100, this.xLoc + 10, this.yLoc + 100, this.xLoc, this.yLoc + 120);
    }

    move() {
        this.xLoc = this.xLoc + this.xspeed;
        this.yLoc = this.yLoc + this.yspeed;
    }

    bounce() {
        if (this.xLoc > width || this.xLoc < 0) {
            this.xspeed = (this.xspeed * -1);
            bounceSound.play();
        }
        if (this.yLoc > height || this.yLoc < 0) {
            this.yspeed = this.yspeed * -1;
            bounceSound.play();
        }
    }
}

Answer 1

每当需要显示颜色时，请使用nextColor函数（在下面发布）。

var currentColorIndex=0;
var nextColor = function(){
  var color = colors[currentColorIndex];
  currentColorIndex = (currentColorIndex+1)%colors.length;
  return color;
}

如何遍历数组

1 个答案: