gpt4 book ai didi

Javascript/HTML : Match two circles of same numbers?

转载 作者:可可西里 更新时间:2023-11-01 13:47:09 25 4
gpt4 key购买 nike

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

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

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

这是我的代码 JSFiddle .顺便说一句,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>

最佳答案

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

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

示例输出 - http://jsbin.com/hazozafuha

关于Javascript/HTML : Match two circles of same numbers?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40617675/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com