javascript - 如何检测其他对象的状态
问题描述
我正在使用 P5.js。我正在尝试制作一个程序,允许用户单击方块,最靠近底部的尚未黑色的块将变为黑色。我正在使用的代码将第一列中的所有方块都变成黑色。我试过使用 return(false) 但这只会导致底部方块变黑。
let squares = []
let squareNum = 0
let rows;
function setup() {
createCanvas(900, 900)
background(100)
for (let i = 0; i < 6; i++) {
rows = i + 1
for (let j = 0; j < 6; j++) {
let x = i * 150
let y = j * 150
squares[squareNum] = new Square(x, y, 'gray');
squareNum++
}
}
}
function mousePressed() {
for (let i = 0; i < squares.length; i++) {
if (mouseX > squares[i].x && mouseX < squares[i].x + squares[i].size && mouseY > squares[i].y && mouseY < squares[i].y + squares[i].size) {
if (i < 6) {
for (let j = 0; j < 6; j++) {
if (squares[5 - j].colour = 'gray') {
squares[5 - j].colour = 'black'
print(5 - j + ' is now black')
}
}
}
}
}
}
function draw() {
for (let i = 0; i < squares.length; i++) {
squares[i].show();
}
}
class Square {
constructor(x, y, colour) {
this.x = x
this.y = y
this.size = 150
this.colour = colour
}
show() {
fill(this.colour)
rect(this.x, this.y, this.size, this.size);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
解决方案
你是这个意思吗?
let squares = []
// Added variables to avoid fixed numbers in the code.
// Note: This was 150 originally. Changed to be able to print it on the screen.
let squareSize = 30;
let rowCount = 6;
let columnCount = 6;
function setup() {
createCanvas(squareSize * columnCount, squareSize * rowCount);
background(100)
for (let i = 0; i < columnCount; i++) {
for (let j = 0; j < rowCount; j++) {
let x = i * squareSize
let y = j * squareSize
squares.push(new Square(x, y, 'gray'));
}
}
}
// Check whether the mouse is currently within a specific square.
function isMouseInSquare(square, mouseX, mouseY) {
// NOTE: brackets help a lot to understand logical expressions and to avoid bugs.
return (mouseX > square.x && mouseX < (square.x + square.size)) && (mouseY > square.y && mouseY < (square.y + square.size))
}
// Returns the squares for a given column based on their x postion - starting with the one closest to the bottom.
function getSameColumnSquares(square) {
return squares.filter(s => s.x === square.x).reverse();
}
function mousePressed() {
let pressedSquare = squares.find(square => isMouseInSquare(square, mouseX, mouseY));
let squaresInColumn = getSameColumnSquares(pressedSquare);
let firstNonBlackSquare = squaresInColumn.find(square => square.colour !== "black");
if (firstNonBlackSquare) {
firstNonBlackSquare.colour = "black";
}
}
function draw() {
for (let i = 0; i < squares.length; i++) {
squares[i].show();
}
}
class Square {
constructor(x, y, colour) {
this.x = x
this.y = y
this.size = squareSize;
this.colour = colour
}
show() {
fill(this.colour)
rect(this.x, this.y, this.size, this.size);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
推荐阅读
- vue.js - Quasar 框架:文件引导的导航守卫不?
- javascript - 如何清除静态资产上的缓存
- mysql - 将所有临时(别名)列结果添加到 TMemo
- css - 当我将 toggleclassList('open) 放在我的 .sidebar 类上时,转换属性不会只在 .sidebar 上起作用 为什么它不起作用?
- swift - URL 不断返回 nil
- selenium-webdriver - Selenium:@FindBy 注解和 initElemets() 方法
- node.js - 我想将 IBM 的 Chatbot 与我的电子和 nodejs 集成
- android - 如何观察参考变量?
- asp.net-mvc - EditorFor只能输入时间,不能设置24小时格式
- css - 如何创建指令以在其他指令在 Angular 中发生之前删除它们