我的JavaScript代码在运行时没有显示任何东西是有原因的吗？

问题描述 投票：1回答：1

我是一个新的编码场景，我试图完成我的朋友在p5.js中的一个棋牌游戏的不完整的代码，任何人都可以解释为什么当我运行它时没有任何显示？我定义了 createBoard() 函数，并在 draw() 函数，所以它应该是工作的，但它没有。

我有 setup 和 draw 功能在底部。

任何帮助是感激的。

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();
}
javascript processing p5.js
1个回答
1
投票

你错过在棋盘上画画，调用 appear() 的单元格上。使用2个嵌套循环遍历板上的单元格，并调用方法 appear() 每个单元格。

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();
        }
    }
}

例如：

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.