Я не знаю, что изменить в этом коде, чтобы он работал

#javascript #object #ecmascript-6

#javascript #объект #ecmascript-6

Вопрос:

Этот код. Предполагается создать там холст, траву и животных. Он даже не рисует холст. Пожалуйста, помогите. Я буду очень благодарен.

Эти два файла (setup.js и classification.js ) Я привязал к своему html. Также используется эта ссылка «https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js «. Также есть эта ошибка

var gr = new Grass(x,y,1); Grass не определен

setup.js

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

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

  for (var y = 0; y < matrix.length;   y) {
    for (var x = 0; x < matrix[y].length;   x) {
      if (matrix[y][x] == 1) {
        var gr = new Grass(x, y, 1);
        grassArr.push(gr);
      } else if (matrix[y][x] == 2) {
        var kendani = new GrassEater(x, y, 2);
        grassEaterArr.push(kendani);
      }
    }
  }

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

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

  for (var i in grassArr) {
    grassArr[i].mul();
  }
  for (var i in grassEaterArr) {
    grassEaterArr[i].move();
    grassEaterArr[i].eat();
    grassEaterArr[i].mul();
    grassEaterArr[i].die();
  }
}
  

classification.js

 class Grass {
  constructor(x, y, index) {
    this.x = x;
    this.y = y;
    this.index = index;
    this.multiply = 0;
    this.directions = [
      [this.x - 1, this.y - 1],
      [this.x, this.y - 1],
      [this.x   1, this.y - 1],
      [this.x - 1, this.y],
      [this.x   1, this.y],
      [this.x - 1, this.y   1],
      [this.x, this.y   1],
      [this.x   1, this.y   1],
    ]
  }

  chooseCell(character) {
    var found = [];
    for (var i in this.directions) {
      var x = this.directions[i][0];
      var y = this.directions[i][1];
      if (x >= 0 amp;amp; x < matrix[0].length amp;amp; y >= 0 amp;amp; y < matrix.length) {
        if (matrix[y][x] == character) {
          found.push(this.directions[i]);
        }
      }
    }
    return found;
  }

  mul() {
    this.multiply  ;
    var newCell = random(this.chooseCell(0));
    console.log(newCell, this.multiply);
    if (this.multiply >= 8 amp;amp; newCell) {
      var newGrass = new Grass(newCell[0], newCell[1], this.index);
      grassArr.push(newGrass);
      matrix[newCell[1]][newCell[0]] = 1;
      this.multiply = 0;
    }
  }
}

class GrassEater {
  constructor(x, y, index) {
    this.x = x;
    this.y = y;
    this.index = index;
    this.energy = 5;
    this.directions = [];
  }

  getNewCoordinates() {
    this.directions = [
      [this.x - 1, this.y - 1],
      [this.x, this.y - 1],
      [this.x   1, this.y - 1],
      [this.x - 1, this.y],
      [this.x   1, this.y],
      [this.x - 1, this.y   1],
      [this.x, this.y   1],
      [this.x   1, this.y   1]
    ];
  }

  chooseCell(character) {
    this.getNewCoordinates();
    var found = [];
    for (var i in this.directions) {
      var x = this.directions[i][0];
      var y = this.directions[i][1];
      if (x >= 0 amp;amp; x < matrix[0].length amp;amp; y >= 0 amp;amp; y < matrix.length) {
        if (matrix[y][x] == character) {
          found.push(this.directions[i]);
        }
      }
    }
    return found;
  }
  move() {
    var newCell = random(this.chooseCell(0));

    if (newCell) {
      var newX = newCell[0];
      var newY = newCell[1];

      matrix[this.y][this.x] = 0;
      matrix[newY][newX] = this.index;
      this.y = newY;
      this.x = newX;
      this.energy--;
    }
  }

  mul() {
    var newCell = random(this.chooseCell(0));

    if (this.energy >= 8 amp;amp; newCell) {
      var animalArr = new GrassEater(newCell[0], newCell[1], this.index);
      grassEaterArr.push(animalArr);
      matrix[newCell[1]][newCell[0]] = 2;
      this.energy = 5;
    }
  }


  eat() {
    var newCell = random(this.chooseCell(1));
    if (newCell) {
      var newX = newCell[0];
      var newY = newCell[1];

      matrix[this.y][this.x] = 0;
      matrix[newY][newX] = this.index;

      for (var i in grassArr) {
        if (newX == grassArr[i].x amp;amp; newY == grassArr[i].y) {
          grassArr.splice(i, 1);
          break;
        }
      }

      this.y = newY;
      this.x = newX;
      this.energy  = 2;
    }

    die() {
      if (this.energy == 0) {
        matrix[this.y][this.x] = 0;
      }
    }
  }
  

Ответ №1:

Экспортируйте Grass GrassEater классы и и импортируйте их в свой основной файл:

 class Grass {...}
class GrassEater {...}
export { Grass, GrassEater }
  

На setup.js :

 import { Grass, GrassEater } from "./classification.js";