Question

I created a program that:

generates 4 balls on the screen with a number inside them
then the user types in the values he wants to give to new circles to be generated.

On clicking on a button, the new 4 circles with a number inside them get generated under the already generated balls.

If the ball numbers in the 2nd line match the ones in the first, then the ball should be displayed under that particular ball.

Here is my code:

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
  <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>
    <script>
      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);
      }


      }

      }
    </script>
  </body>
</html>

The button will generate the balls but doesn't do the number matching.

NOTE jsfiddle isn't showing the result properly. It isn't showing any result on clicking the button. https://jsfiddle.net/59p5k15q/

Answer 1

我将if（）移动到函数go（）的开头，就在你开始在画布上绘图之前。（我保持xnext + = 100以确保x值正确。）

现在似乎工作正常。我的第二组球是红色的。

<html>
<head>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
</head>
<body>
<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>
<script>
  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;
      if(xar[i] == arr[i]) {
        continue;
      }
      context.beginPath();
      context.arc(xnext, 190, 50, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#330000';
      context.stroke();
      context.fillStyle="black";
      context.fillText(xar[i],xnext,190);
      context.arc(xnext, 190, 50, 0, 2 * Math.PI, false);

    }
  }
</script>

Match generated balls with the same number

1 个答案: