如何让我创建的 clicked() 函数起作用？

Question

我正在关注编码火车编码挑战，挑战 #6：有丝分裂。我被困在应该检测到对其中一个单元格的点击的部分。如果将其放入您的 Web 浏览器，您就会明白我的意思 - 它说 cells[i].clicked is not a function 并且在它说 cells[i].moved is not a function 之后不久，即使它之前工作得很好。谁能修好？？？我正在使用原子代码编辑器和 p5.js 库。如果你不知道 p5.js，你可能仍然知道哪里出了问题......不过我已经在下面的代码中引用了它。

./index.html 使用这个精确的代码，它参考了 P5.JS

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- This next part referneces p5.js -->
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script> 
    <title>Mitosis Simulation</title>
  </head>
  <body>
    <script src="script.js" ></script>
    <script src="cell.js" ></script>
  </body>
</html>

./script.js

var cells = [];

function setup() {
  createCanvas(600, 600);
  //make two cells
  cells.push(new Cell());
  cells.push(new Cell());
}

function draw() {
  background(51);
  //make the cells move and show
  for(var i = 0; i < cells.length; i ++) {
    cells[i].move();
    cells[i].show();
  }
}

function mousePressed() {
  //this SHOULD detect a click but it doesn't
  for(var i = 0; i < cells.length; i ++) {
    if(cells[i].clicked(mouseX, mouseY)) {

      cells.push(cells[i].mitosis);
    }
  }
}

./cell.js 单元格的代码，我想你可以称之为面向对象编程

function Cell(pos, r) {
  //gives the cell either the argument pos, or a random place on the canvas
  this.pos = pos || createVector(random(width), random(height));
  //gives it either the argument r or the radius of 80
  this.r = r || 80;
  //gives a random rgb color
  this.c = color(0, random(150, 255), random(150, 255));

  //move the cell
  this.move = function() {
    //define the direction that it moves
    var vel = p5.Vector.random2D();
    //move in that direction
    this.pos.add(vel);
  }

  //show the cell
  this.show = function() {
    fill(this.c);
    noStroke();
    //display a cell at this.pos.x, this.pos.y with a radius of this.r
    ellipse(this.pos.x, this.pos.y, this.r, this.r);
  }

  //return true when clicked
  this.clicked = function(x, y) {
    //find distance between mouseX, mouseY and its position
    var d = dist(this.pos.x, this.pos.y, x, y);
    //if distance is in the circle, return true
    if(d < this.r / 2) {
      return true;
    } else {
      return false;
    }
  }
  
  //split in two
  this.mitosis = function() {
    //make a new cell exactly like its predeccesor and return it
    var cellss = new Cell(this.pos, this.r/2, this.c);
    return cellss;
  }
}

我确定这是一个愚蠢的错误或其他什么，但一定要告诉我！

Answer 1

错误在你的 mousePressed() 中：你没有将有丝分裂作为函数调用，你只是在说 cells[i].mitosis。当你这样做时，它不会运行有丝分裂函数，它实际上只是 returns 对函数的引用。

function mousePressed() {
  // detects clicks, and if there is a click, it runs the mitosis function
  for(var i = 0; i < cellLength; i ++) {
    if(cells[i].clicked(mouseX, mouseY)) {
      cells.push(cells[i].mitosis());
    }
  }
}

其他一些注意事项：

创建一个半径为 1/2 的新单元格实际上并没有使大小减半，它实际上使某些东西小于面积的一半，因为 2d 事物的工作方式。想象您有一个正方形，将每条边的长度减少 1/2：它将有 1/4 的面积。实际将面积减半需要对对角线的长度进行一些复杂的数学运算。所以你必须对 pi 做类似的事情，Shiffman 在他的 agar.io 教程
最好在 JavaScript 主 JavaScript 代码之前 引用所有类（或在本例中为闭包），就像这样HTML:

<script src="cell.js" ></script> <script src="script.js" ></script>

如何让我创建的 clicked() 函数起作用？

How do I get the clicked() function that I made to work?

javascript

oop

onclick

p5.js