我正在尝试比较两组坐标并绘制匹配项（如果它们足够接近），但代码无法编译？

Question

我正在尝试根据代码中的说明绘制可能的匹配项，但代码未编译，我无法弄清楚错误是什么。我将不胜感激。

我的代码编辑器在我的代码的这一行给出错误 'Parsing error: Unexpected token i' -> for(let i = 0 ; i < possibleMatches.length ; i++)

到目前为止，这是我绘制 CriminalSightings 和 AttackRecorded 的地图：

代码如下：

/*
Officer: 3357927
CaseNum: 601-2-69352192-3357927

Case 601 - Murdering Again - stage 3

Now murders are beginning to occur - we're pretty sure that this is the work of Fry.
If we can place her near any of the recent crime scenes in the area we should be able narrow down her location.

In the setup function, use a for loop to traverse the sightings, marking all of the locations on the map
where she was last seen. Do this by drawing small, Goldenrod fill rectangles centered over each location.

In addition, we've assembled a list of recent thefts in the area. Using another for loop to traverse the
recent crime records, you should mark those locations on the map. Do this by drawing small, DarkGoldenrod fill triangles centered over each location.

Use X11 colours. You can find a reference table at https://en.wikipedia.org/wiki/Web_colors.

Let's try to catch Fry by looking patterns between sightings and crimes. If she was within less than 97 pixels of any of the crimes then the details
should be pushed to possible matches with the following format.

{ crime:{x: 0, y:0, victimName: "John Doe"}, suspect:{x: 0, y:0} }

Note that the possible matches are already being drawn.
Your job is simply to fill the array with the correct data.

For this mission you will need ONLY the following:

- for loop
- dist()
- if()
- fill
- rect() NB. Draw each rectangle with the point at its center.

- fill
- triangle() NB. Draw each triangle with the point roughly at its center.


*/

var countyMap;

var possibleMatches = [];

//Sightings of Casey Fry.

var CriminalSightings = [ 
  { Loc_X : 639, Loc_Y : 288},
  { Loc_X : 681, Loc_Y : 286},
  { Loc_X : 712, Loc_Y : 293},
  { Loc_X : 756, Loc_Y : 310},
  { Loc_X : 715, Loc_Y : 368},
  { Loc_X : 701, Loc_Y : 425},
  { Loc_X : 753, Loc_Y : 436},
  { Loc_X : 815, Loc_Y : 468},
  { Loc_X : 795, Loc_Y : 506},
  { Loc_X : 788, Loc_Y : 497},
  { Loc_X : 781, Loc_Y : 486},
  { Loc_X : 768, Loc_Y : 489},
  { Loc_X : 750, Loc_Y : 500},
  { Loc_X : 732, Loc_Y : 506},
  { Loc_X : 714, Loc_Y : 514},
  { Loc_X : 695, Loc_Y : 531},
  { Loc_X : 693, Loc_Y : 552},
  { Loc_X : 654, Loc_Y : 523},
  { Loc_X : 624, Loc_Y : 500},
  { Loc_X : 594, Loc_Y : 484},
  { Loc_X : 555, Loc_Y : 474} 
];


//Recent crime records.

var AttackRecorded = [ 
  { coordinate_x : 409, coordinate_y : 446, victim_name : 'JENIFFER DEAUVILLE'},
  { coordinate_x : 443, coordinate_y : 419, victim_name : 'JACQUELINE DURANTS'},
  { coordinate_x : 465, coordinate_y : 548, victim_name : 'BRAD SILVEIRA'},
  { coordinate_x : 709, coordinate_y : 552, victim_name : 'DRUSILLA WARMAN'},
  { coordinate_x : 695, coordinate_y : 421, victim_name : 'LINETTE MOHWAWK'},
  { coordinate_x : 652, coordinate_y : 268, victim_name : 'SUMMER CASIMERE'},
  { coordinate_x : 641, coordinate_y : 306, victim_name : 'NELSON TINTLE'},
  { coordinate_x : 119, coordinate_y : 344, victim_name : 'HANG NIEMELA'},
  { coordinate_x : 114, coordinate_y : 359, victim_name : 'LAVERNE JACQUELIN'},
  { coordinate_x : 90, coordinate_y : 490, victim_name : 'JESSIA PORTOS'},
  { coordinate_x : 76, coordinate_y : 516, victim_name : 'TU DAVISWOOD'},
  { coordinate_x : 615, coordinate_y : 741, victim_name : 'LARRAINE PEGORD'},
  { coordinate_x : 349, coordinate_y : 796, victim_name : 'LIANNE COURTWOOD'},
  { coordinate_x : 456, coordinate_y : 770, victim_name : 'NICOLE ASHELY'} 
];


function preload()
{
    countyMap = loadImage("map.png")
}

function setup()
{
  createCanvas(countyMap.width, countyMap.height);

    image(countyMap, 0,0);

    //add your code below here
    noFill();
    stroke(218, 165, 32);
    for (i = 0; i < CriminalSightings.length; i++){
        var sighting = CriminalSightings[i]
        
        rect(sighting.Loc_X - 5, sighting.Loc_Y - 5, 5, 5);

        }
    stroke(184, 134, 11);
    for (j = 0; j < AttackRecorded.length; j++){
        var record = AttackRecorded[j]
        
        triangle(record.coordinate_x, record.coordinate_y -5,record.coordinate_x - 5, record.coordinate_y + 5, record.coordinate_x + 5,record.coordinate_y + 5  );

        }
    
   for(var i =0; i<CriminalSightings.length; i++ ) 
   {
       for(var j = 0;AttackRecorded.length; j++ )
           {
       if(dist(CriminalSightings[i].Loc_X,CriminalSightings[i].Loc_Y,AttackRecorded[j].coordinate_x,AttackRecorded[j].coordinate_y) < 97)
        {
            possibleMatches.push
            ({ crime:{x: AttackRecorded[j].coordinate_x, y:AttackRecorded[j].coordinate_y, victimName: AttackRecorded[j].victim_name}, suspect:{x: CriminalSightings[i].Loc_X, y:CriminalSightings[i].Loc_Y} })
        }
            }
   }
    // code to draw the matches ( if any)
    for(let i = 0 ; i < possibleMatches.length ; i++)
    {
        stroke(127);
        strokeWeight(3);
        line(possibleMatches[i].crime.x, possibleMatches[i].crime.y, possibleMatches[i].suspect.x, possibleMatches[i].suspect.y);

        noStroke();
        fill(127);
        text(possibleMatches[i].crime.victimName, possibleMatches[i].crime.x + 15, possibleMatches[i].crime.y + 15);
    }
}

//We are not using the draw function this time

Answer 1

如果您查看浏览器的 JavaScript 控制台，您会看到一个错误。

在这种情况下是：YourSketchName.js:### Uncaught TypeError: Cannot read property 'coordinate_x' of undefined 它将是行号，您可以单击第一个错误位置并查看它在代码中的位置，例如：

if (dist(CriminalSightings[i].Loc_X, CriminalSightings[i].Loc_Y, AttackRecorded[j].coordinate_x, AttackRecorded[j].coordinate_y) < 97)

错误的意思是它期待一个带有 coordinate_x 属性的对象，但它却得到了 undefined。有些东西不见了，但为什么？

通常发生这种情况有助于查看附近的行以了解上下文：

for (var i =0; i < CriminalSightings.length; i++ ) 
  {
    for (var j = 0; AttackRecorded.length; j++ )
    {
      if (dist(CriminalSightings[i].Loc_X, CriminalSightings[i].Loc_Y, AttackRecorded[j].coordinate_x, AttackRecorded[j].coordinate_y) < 97)
      {
      }
    }
  }

您确实有两个计数器，一个对应于您迭代的每个数组，但是漏掉了一个拼写错误。

您可以看出两者之间的区别：

for (var i =0; i < CriminalSightings.length; i++ )

和

for (var j = 0; AttackRecorded.length; j++ )

您缺少正确的条件：

for (var j = 0; j < AttackRecorded.length; j++ )

隐藏的部分有点问题是 AttackRecorded.length 是一个大于 0 的数字：在 if 条件下，这将评估为真。这意味着 j 计数器将增加到 13：AttackRecorded 数组的最后一个有效索引，因此 undefined（从索引 14 开始没有任何内容）。

您可以运行进行以下测试。在运行代码片段之后，使用“整页”link 或滚动条在右下角查看距离图。

var countyMap;

var possibleMatches = [];

//Sightings of Casey Fry.

var CriminalSightings = [ 
  { Loc_X : 639, Loc_Y : 288},
  { Loc_X : 681, Loc_Y : 286},
  { Loc_X : 712, Loc_Y : 293},
  { Loc_X : 756, Loc_Y : 310},
  { Loc_X : 715, Loc_Y : 368},
  { Loc_X : 701, Loc_Y : 425},
  { Loc_X : 753, Loc_Y : 436},
  { Loc_X : 815, Loc_Y : 468},
  { Loc_X : 795, Loc_Y : 506},
  { Loc_X : 788, Loc_Y : 497},
  { Loc_X : 781, Loc_Y : 486},
  { Loc_X : 768, Loc_Y : 489},
  { Loc_X : 750, Loc_Y : 500},
  { Loc_X : 732, Loc_Y : 506},
  { Loc_X : 714, Loc_Y : 514},
  { Loc_X : 695, Loc_Y : 531},
  { Loc_X : 693, Loc_Y : 552},
  { Loc_X : 654, Loc_Y : 523},
  { Loc_X : 624, Loc_Y : 500},
  { Loc_X : 594, Loc_Y : 484},
  { Loc_X : 555, Loc_Y : 474} 
];


//Recent crime records.

var AttackRecorded = [ 
  { coordinate_x : 409, coordinate_y : 446, victim_name : 'JENIFFER DEAUVILLE'},
  { coordinate_x : 443, coordinate_y : 419, victim_name : 'JACQUELINE DURANTS'},
  { coordinate_x : 465, coordinate_y : 548, victim_name : 'BRAD SILVEIRA'},
  { coordinate_x : 709, coordinate_y : 552, victim_name : 'DRUSILLA WARMAN'},
  { coordinate_x : 695, coordinate_y : 421, victim_name : 'LINETTE MOHWAWK'},
  { coordinate_x : 652, coordinate_y : 268, victim_name : 'SUMMER CASIMERE'},
  { coordinate_x : 641, coordinate_y : 306, victim_name : 'NELSON TINTLE'},
  { coordinate_x : 119, coordinate_y : 344, victim_name : 'HANG NIEMELA'},
  { coordinate_x : 114, coordinate_y : 359, victim_name : 'LAVERNE JACQUELIN'},
  { coordinate_x : 90, coordinate_y : 490, victim_name : 'JESSIA PORTOS'},
  { coordinate_x : 76, coordinate_y : 516, victim_name : 'TU DAVISWOOD'},
  { coordinate_x : 615, coordinate_y : 741, victim_name : 'LARRAINE PEGORD'},
  { coordinate_x : 349, coordinate_y : 796, victim_name : 'LIANNE COURTWOOD'},
  { coordinate_x : 456, coordinate_y : 770, victim_name : 'NICOLE ASHELY'} 
];


//function preload()
//{
//    countyMap = loadImage("map.png")
//}

function setup()
{
  // placeholder for map.png, for demo purposes only
  countyMap = createImage(900, 900);
  createCanvas(countyMap.width, countyMap.height);

    image(countyMap, 0,0);

    //add your code below here
    noFill();
    stroke(218, 165, 32);
    for (i = 0; i < CriminalSightings.length; i++){
        var sighting = CriminalSightings[i]
        
        rect(sighting.Loc_X - 5, sighting.Loc_Y - 5, 5, 5);

        }
    stroke(184, 134, 11);
    for (j = 0; j < AttackRecorded.length; j++){
        var record = AttackRecorded[j]
        
        triangle(record.coordinate_x, record.coordinate_y -5,record.coordinate_x - 5, record.coordinate_y + 5, record.coordinate_x + 5,record.coordinate_y + 5  );

        }
    
   for(var i =0; i<CriminalSightings.length; i++ ) 
   {
       for(var j = 0; j < AttackRecorded.length; j++ )
           {
       if(dist(CriminalSightings[i].Loc_X,CriminalSightings[i].Loc_Y,AttackRecorded[j].coordinate_x,AttackRecorded[j].coordinate_y) < 97)
        {
            possibleMatches.push
            ({ crime:{x: AttackRecorded[j].coordinate_x, y:AttackRecorded[j].coordinate_y, victimName: AttackRecorded[j].victim_name}, suspect:{x: CriminalSightings[i].Loc_X, y:CriminalSightings[i].Loc_Y} })
        }
            }
   }
    // code to draw the matches ( if any)
    for(let i = 0 ; i < possibleMatches.length ; i++)
    {
        stroke(127);
        strokeWeight(3);
        line(possibleMatches[i].crime.x, possibleMatches[i].crime.y, possibleMatches[i].suspect.x, possibleMatches[i].suspect.y);

        noStroke();
        fill(127);
        text(possibleMatches[i].crime.victimName, possibleMatches[i].crime.x + 15, possibleMatches[i].crime.y + 15);
    }
}

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

我建议查看 Kevin Workman's How to Debug Tutorial：它很好地解释了如何将一个更大的问题分解成更小的块并一点一点地分解 debugging/fixing 代码。

我正在尝试比较两组坐标并绘制匹配项（如果它们足够接近），但代码无法编译？

I'm trying to compare two sets of coordinates and plot matches if they're close enough, but code won't compile?

javascript

for-loop

object

p5.js