Match генерироваться шары с тем же номером

Я создал программу, которая:Match генерироваться шары с тем же номером

генерирует 4 шаров на экране с номером внутри них
то типы пользователей в значениях, которые он хочет, чтобы дать новые круги для генерации.

При нажатии на кнопку новые 4 круга с числом внутри них генерируются под уже сгенерированными шарами.

Если номера мячей во второй строке совпадают с первыми, тогда мяч должен отображаться под этим конкретным шаром.

Вот мой код:

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

Кнопка будет генерировать шары, но не делает соответствующее число.

ПРИМЕЧАНИЕ jsfiddle не показывает результат должным образом. Он не показывает никакого результата при нажатии кнопки. https://jsfiddle.net/59p5k15q/

источник

2016-11-15 Buffy Anne-summers

Я переместил 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>

источник

2016-11-16 09:59:00

Match генерироваться шары с тем же номером

ответ

Смежные вопросы