我试图比较两组坐标和绘图匹配项如果它们足够接近，但是代码无法编译？

如何解决我试图比较两组坐标和绘图匹配项如果它们足够接近，但是代码无法编译？

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

我的代码编辑器在代码的这一行中给我错误'解析错误：意外的令牌i'-> for(let i = 0 ; i < possibleMatches.length ; i++)

到目前为止，这是我在其中绘制了CrimeSightings和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_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_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);

    //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

解决方法

如果您查看浏览器的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,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条件下，这将被评估为true。这意味着j计数器将增加到13：AttackRecorded数组的最后一个有效索引，因此为undefined（从索引14开始没有任何内容）。

您可以运行测试波纹管。运行代码段后，请使用“整页”链接或滚动条在右下方查看距离图。

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_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_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);

    //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,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：它非常擅长于说明如何将较大的问题分解为较小的块，以及一点一点地调试/修复代码。

我试图比较两组坐标和绘图匹配项如果它们足够接近，但是代码无法编译？

如何解决我试图比较两组坐标和绘图匹配项如果它们足够接近，但是代码无法编译？

解决方法

相关推荐