javascript - 如何循环遍历数组
问题描述
我想让我的机器人的头部在弹跳后改变颜色,为此我必须循环遍历我的阵列。谁能告诉我如何做到这一点?另外,如何识别机器人何时发生碰撞并播放碰撞音乐?有没有办法让机器人在碰撞时改变方向?
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();
}
}
}
解决方案
每当您需要获取要显示的颜色时,请使用函数 nextColor(在下面发布)。
var currentColorIndex=0;
var nextColor = function(){
var color = colors[currentColorIndex];
currentColorIndex = (currentColorIndex+1)%colors.length;
return color;
}
推荐阅读
- php - 相关模型返回集合时如何访问子相关模型
- pandas - 如何比较两个数据帧以推断第三个数据帧
- angular - 为什么 Angular 会破坏我的 Google 字体 SCSS 导入?
- node.js - 当我试图通过sellerId 获取库存号时,为什么$and 运算符在mongodb mongoose 中不起作用?
- java - Flink Statefun Bootstrap 和状态过期
- python - Django 使用相关模型中的列表注释查询集
- pandas - 不确定如何进一步优化(摆脱 for 循环)
- swift - UITableView 无法将具有标识符的单元格出列
- javascript - Netlify 表单在提交时获取 GET 而不是 POST 请求
- html - 仅在打印/打印预览时出现在表格下方的额外 HTML 表格单元格