【问题标题】：Javascript/Html: Match two circles of same numbers?Javascript/Html：匹配两个相同数字的圆圈？
【发布时间】：2017-03-29 19:09:10
【问题描述】：

我创建了一个程序，它在屏幕上生成 4 个球，其中有一个数字。

当用户输入他想为要生成的新圆圈提供的值并单击按钮时，将在前 4 个已生成的球下生成其中包含数字的新 4 个圆圈。

但是，我现在想要的是，如果第二行中的球号与第一行中的球号匹配，那么球应该显示在该特定球的下方。但如果两个球号不匹配，那也没关系。

这是我的代码JSFiddle。 BTW JSFIDDLE 没有正确显示结果...单击按钮时没有显示任何结果，但是如果您使用编程语言进行操作。
该按钮实际上会为您生成球，但如果球号相同，它不会将它们放在包含该号码的第一行的球正下方的第二行。

var arr = [];
var x = [];
var y;
      
for(var i=0; i<4; i++) {
  arr[i] = 5 * (i+1);
}
      
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 90;
var radius = 70;
var temp;
var xar = [];

for(var i=0; i<4; i++) {
  centerX = centerX + 100;
  
  context.beginPath();
  context.arc(centerX, centerY, 50, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
  context.fillStyle="black";
  context.fillText(arr[i], centerX, centerY);
}

function go() {
  for(i=0; i<4; i++) {
    temp = parseInt(document.getElementById("one"+i).value);
    xar.push(temp);
  }
  
  console.log(xar);
      
  var xnext = 0;
  
  for(var i=0; i<4; i++) {
    xnext = xnext + 100;

    context.beginPath();
    context.arc(xnext, 190, 50, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#003300';
    context.stroke();
    context.fillStyle="black";
    context.fillText(xar[i], xnext, 190);
    
    if(xar[i]==arr[i])
      context.arc(xnext, 190, 50, 0, 2 * Math.PI, false);
  }
}

<input id="one0" type="text" style="width:100px;height:30px;">
<input id="one1" type="text" style="width:100px;height:30px;">
<input id="one2" type="text" style="width:100px;height:30px;">
<input id="one3" type="text" style="width:100px;height:30px;">
<input id="result" value="click here" type="button" style="width:70px;" onclick="go()">
<canvas id="myCanvas" width="800" height="500"></canvas>

【问题讨论】：

请不时打个“break” :) 这样写的问题很难读。
对不起，我不知道该怎么做：/ 我希望你还能理解它.. 真的需要帮助
@Mihailo ^^^^^^
“break”(<br> || \r\n ) 我的意思是换行。帮助正在进行中。
@Mihailo 哦，是的，对 Javascript 的新手很抱歉，所以不太了解。感谢您帮助我完成此程序 :) 将等待您的回复

标签： javascript jquery html arrays canvas

【解决方案1】：

首先您需要计算这些值是否相同，如果相同，则需要将 Y 设置为一个值，否则将其设置为另一个。然后你可以使用这个 Y 值不仅设置弧线，还可以设置文本

var calcY = 0;
if( xar[i] === arr[i] )
{
   calcY = centerY;
}
else
{
   calcY = centerY + 100;
}

样本输出 - http://jsbin.com/hazozafuha

【讨论】：

嘿，我尝试了类似你建议的方法，但它不起作用：/它对你有用吗？如果是这样，你能不能和我分享你的代码，这样我就可以检查我哪里出错了PLZ：/
这里有另一个提示context.arc(xnext, calcY, 50, 0, 2 * Math.PI, false);

【解决方案2】：

JSBin Example

逻辑解释：

从输入中取出数字；
找出与旧号码相同的号码；
构造一个“骨架”（constructed）结合旧数组（arr）和新数组（filtered），将不匹配的键留空/未定义；
现在检查 constructed-skeleton 和 xar-new 之间的区别；
将它们合并在一起，以便 constructed 中的 empty 键从 dif 数组中获取值；
将完全构造的数组传递给你制作圆圈的部分代码，中提琴你已经把它们整理好了。

JS代码sn-p：

var filtered = xar.filter(function(number){
    return contains(arr, number);
  });

  arr.forEach(function(el, key) {
    filtered.forEach(function(cel,ckey){
      if (el === cel){
        constructed[key] = el;
      }
    })
  });
  
  var dif = difference(xar, constructed);
    
  for(var k=0; k<4; k++){
    var cval = constructed[k];
    if (cval === undefined){
      constructed[k] = dif[0];
      dif.shift();
    }
  }

我可能使某些部分过于复杂，但它确实有效。如果有人对如何改进这一点有一些建议，我很乐意去看看。

【讨论】：