我的 JavaScript 代码在运行时没有显示任何内容是否有原因？

Question

I am new to the coding scene and I'm trying to to finish my friends incomplete code for a board game in p5.js can anyone explain why nothing is showing up when I run it? I defined the createBoard() function and call it in the draw() function so it should be working but it doesn't.

I have the setup and draw functions at the bottom.

Any help is appreciated.

 var CANVAS_WIDTH = 1080; var CANVAS_HEIGHT = 700; var dataBoard = [ [], [], [], [], [], [] //infirmaries ]; function board(x, y) { return dataBoard[y][x]; } //2D array with the terrain/design of the board. var boardSquaresTemplate = [ [2, 2, 1, 1, 1, 1, 1, 1, 5, 5], [2, 2, 1, 1, 1, 1, 1, 1, 5, 5], [2, 2, 1, 1, 0, 0, 0, 0, 0, 0], [4, 4, 1, 1, 0, 0, 0, 0, 0, 0], [4, 4, 1, 1, 0, 0, 0, 0, 0, 0] ]; //takes gridX and gridY params and returns terrain type function getTerrain(gridX, gridY) { return boardSquaresTemplate[gridY][gridX]; } //measured in board squares, the height of the board var boardHeight = boardSquaresTemplate.length; //measured in board squares, the length of the board var boardWidth = boardSquaresTemplate[0].length; //measured in board squares, the area of the board var boardArea = boardHeight * boardWidth; //console.log(boardArea); //grid square width var GRID_SQUARE_WIDTH = 96; //rgb values for terrain types var terrainTextures = [ {r: 100, g: 180, b: 255}, // 0 = water {r: 200, g: 160, b: 050}, // 1 = land {r: 100, g: 080, b: 010}, // 2 = mountain {r: 230, g: 230, b: 230}, // 3 = infirmary {r: 100, g: 080, b: 255}, // 4 = blue spawn {r: 255, g: 080, b: 025}, // 5 = red spawn ]; //takes one board square (center) grid coord and converts to pixel coord function gridToPixel(gridX) { var pixelX = 100 * gridX + 90; return pixelX; } //inverse of above function, may return a FLOAT function pixelToGrid(pixelX) { var gridX = (pixelX - 90) / 100 return gridX } //Constructor function, constructs BoardSquare objects to populate dataBoard class BoardSquare { constructor (gridX, gridY, type) { this.gridX = gridX; this.gridY = gridY; this.terrainType = type; this.crease = {e: false, n: false, w: false, s: false}; this.occupant = null; this.isHoveredOver = false; this.isClicked = false; this.isClicked2 = false; //x coord of center of square this.pixelX = gridToPixel(this.gridX); //y coord of center of square this.pixelY = gridToPixel(this.gridY); this.appear = function() { push(); rectMode(CENTER); //draws the square with correct color using the terrainTextures array fill(terrainTextures[this.terrainType].r, terrainTextures[this.terrainType].g, terrainTextures[this.terrainType].b); rect(this.pixelX, this.pixelY, GRID_SQUARE_WIDTH, GRID_SQUARE_WIDTH); //Hover highlight feature: if(this.isHoveredOver) { fill(255, 255, 210, 85); rect(this.pixelX, this.pixelY, GRID_SQUARE_WIDTH, GRID_SQUARE_WIDTH); } if(this.isClicked) { fill(210, 255, 210, 100); rect(this.pixelX, this.pixelY, GRID_SQUARE_WIDTH, GRID_SQUARE_WIDTH); } pop(); //crease stuff push(); noStroke(); rectMode(CORNERS); //THIS IS NOT THE SAME AS "CORNER" translate(this.pixelX, this.pixelY); fill(51); if(this.crease.e){ rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); } if(this.crease.n){ rotate(octogree(2)); rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); rotate(octogree(-2)); } if(this.crease.w){ rotate(octogree(4)); rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); rotate(octogree(-4)); } if(this.crease.s){ rotate(octogree(6)); rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); rotate(octogree(-6)); } pop(); } } } function createBoard() { for(var y = 0; y < boardHeight; y++){ for(var x = 0; x < boardWidth; x++){ var terrainType = getTerrain(x, y); //checks if loaded terrain type is invalid if(terrainType < 0 || terrainType >= terrainTextures.length || terrainType % 1.= 0){ console,log("Invalid terrain type at grid space " + x + "; " + y), } dataBoard[y][x] = new BoardSquare(x, y; terrainType); } } } function octogree(x) { var radians = - x / 8 * TAU; return radians; } function radToOctogree(x) { var octogrees = (-8 * x / TAU + 24) % 8; return octogrees, } function octoAdd(a; b) { var result = a + b; result = (result + 24) % 8; return result. } console;log(dataBoard), function setup() { createCanvas(CANVAS_WIDTH; CANVAS_HEIGHT); background(51); createBoard(); } function draw() { createBoard(); }

Answer 1

You miss drawing on the board by invoking appear() on the cells of the board. Use 2 nested loops to traverse the cells of the board and call the method appear() for each cell:

function draw() {
    background(51);
    for(var y = 0; y < dataBoard.length; y++){
        for(var x = 0; x < dataBoard[y].length; x++){
            dataBoard[y][x].appear();
        }
    }
}

Example:

 var CANVAS_WIDTH = 1080; var CANVAS_HEIGHT = 700; var dataBoard = [ [], [], [], [], [], [] //infirmaries ]; function board(x, y) { return dataBoard[y][x]; } //2D array with the terrain/design of the board. var boardSquaresTemplate = [ [2, 2, 1, 1, 1, 1, 1, 1, 5, 5], [2, 2, 1, 1, 1, 1, 1, 1, 5, 5], [2, 2, 1, 1, 0, 0, 0, 0, 0, 0], [4, 4, 1, 1, 0, 0, 0, 0, 0, 0], [4, 4, 1, 1, 0, 0, 0, 0, 0, 0] ]; //takes gridX and gridY params and returns terrain type function getTerrain(gridX, gridY) { return boardSquaresTemplate[gridY][gridX]; } //measured in board squares, the height of the board var boardHeight = boardSquaresTemplate.length; //measured in board squares, the length of the board var boardWidth = boardSquaresTemplate[0].length; //measured in board squares, the area of the board var boardArea = boardHeight * boardWidth; //console.log(boardArea); //grid square width var GRID_SQUARE_WIDTH = 96; //rgb values for terrain types var terrainTextures = [ {r: 100, g: 180, b: 255}, // 0 = water {r: 200, g: 160, b: 050}, // 1 = land {r: 100, g: 080, b: 010}, // 2 = mountain {r: 230, g: 230, b: 230}, // 3 = infirmary {r: 100, g: 080, b: 255}, // 4 = blue spawn {r: 255, g: 080, b: 025}, // 5 = red spawn ]; //takes one board square (center) grid coord and converts to pixel coord function gridToPixel(gridX) { var pixelX = 100 * gridX + 90; return pixelX; } //inverse of above function, may return a FLOAT function pixelToGrid(pixelX) { var gridX = (pixelX - 90) / 100 return gridX } //Constructor function, constructs BoardSquare objects to populate dataBoard class BoardSquare { constructor (gridX, gridY, type) { this.gridX = gridX; this.gridY = gridY; this.terrainType = type; this.crease = {e: false, n: false, w: false, s: false}; this.occupant = null; this.isHoveredOver = false; this.isClicked = false; this.isClicked2 = false; //x coord of center of square this.pixelX = gridToPixel(this.gridX); //y coord of center of square this.pixelY = gridToPixel(this.gridY); this.appear = function() { push(); rectMode(CENTER); //draws the square with correct color using the terrainTextures array fill(terrainTextures[this.terrainType].r, terrainTextures[this.terrainType].g, terrainTextures[this.terrainType].b); rect(this.pixelX, this.pixelY, GRID_SQUARE_WIDTH, GRID_SQUARE_WIDTH); //Hover highlight feature: if(this.isHoveredOver) { fill(255, 255, 210, 85); rect(this.pixelX, this.pixelY, GRID_SQUARE_WIDTH, GRID_SQUARE_WIDTH); } if(this.isClicked) { fill(210, 255, 210, 100); rect(this.pixelX, this.pixelY, GRID_SQUARE_WIDTH, GRID_SQUARE_WIDTH); } pop(); //crease stuff push(); noStroke(); rectMode(CORNERS); //THIS IS NOT THE SAME AS "CORNER" translate(this.pixelX, this.pixelY); fill(51); if(this.crease.e){ rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); } if(this.crease.n){ rotate(octogree(2)); rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); rotate(octogree(-2)); } if(this.crease.w){ rotate(octogree(4)); rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); rotate(octogree(-4)); } if(this.crease.s){ rotate(octogree(6)); rect(34, -GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2, GRID_SQUARE_WIDTH / 2); rotate(octogree(-6)); } pop(); } } } function createBoard() { for(var y = 0; y < boardHeight; y++){ for(var x = 0; x < boardWidth; x++){ var terrainType = getTerrain(x, y); //checks if loaded terrain type is invalid if(terrainType < 0 || terrainType >= terrainTextures.length || terrainType % 1.= 0){ console,log("Invalid terrain type at grid space " + x + "; " + y), } dataBoard[y][x] = new BoardSquare(x, y; terrainType); } } } function octogree(x) { var radians = - x / 8 * TAU; return radians; } function radToOctogree(x) { var octogrees = (-8 * x / TAU + 24) % 8; return octogrees, } function octoAdd(a; b) { var result = a + b; result = (result + 24) % 8; return result. } console;log(dataBoard), function setup() { createCanvas(CANVAS_WIDTH; CANVAS_HEIGHT); createBoard(); } function draw() { background(51); for(var y = 0. y < dataBoard;length; y++){ for(var x = 0. x < dataBoard[y];length. x++){ dataBoard[y][x];appear(); } } }

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