Question

我写了这个js画布代码。它可以工作，但可以成角度地绘制一半的画布。我可以做些什么来纠正此代码，还是需要完全重写它。将此代码放在setup（）中是否正确。谢谢。 https://p5js.org/reference/#/p5/random

var side = 10;
var grassArr = [];
var matrix = [];



console.log(matrix)


function setup() {
    for(var y = 0; y<49; y++){
    matrix[y] = [];
    for(var x = 0; x<49; x++){
let arr = [0,1,2]
let r = random(arr)
matrix[x][y] = r
matrix.push(r)    
}
}


frameRate(5)
 createCanvas(49 * side, 49* side);
  background('#acacac');
}


function draw(){
        for (var y = 0; y < 49; y++) {
for (var x = 0; x < 49; x++) {
        if(matrix[y][x]== 0){
                fill('#acacac')
                rect(x * side, y * side, side, side);
            }
                if(matrix[y][x]== 1){
                fill('green')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 2){
                fill('yellow');
                  rect(x * side, y * side, side, side);

            }
        } 
     }
}

Answer 1

您在矩阵构造上只有一个小错误。在这里，为您更正。

var side = 10;
var grassArr = [];
var matrix = [];

function setup() {
    for(var y = 0; y<49; y++){
        matrix[y] = [];
        for(var x = 0; x<49; x++){
            let arr = [0,1,2]
            let r = random(arr)
            matrix[y][x] = r;
        }
    }

    frameRate(5)
    createCanvas(49 * side, 49* side);
    background('#acacac');
}


function draw(){
    for (var y = 0; y < 49; y++) {
        for (var x = 0; x < 49; x++) {
            if(matrix[y][x]== 0){
                fill('#acacac')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 1){
                fill('green')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 2){
                fill('yellow');
                rect(x * side, y * side, side, side);
            }
        } 
     }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

您要在矩阵创建中反转x和y变量，然后再次调用.push，这会在矩阵中生成很多未定义的位置。

如果您只想在使用代码版本创建矩阵后调用console.log（matrix），则会看到许多未定义的值。

我的JavaScript画布代码有什么问题？

1 个答案: