Javascript和jQuery:onclick事件监听器在while循环中增加索引
我有一个代码，当我按下“S”键时显示一个圆和一个椭圆（位置在18种可能的组合中选择）。然后我有一个while循环：我希望，在每次迭代中，如果接触到圆，立即生成一个新位置，如果连续3次未接触圆，则生成一个新位置 我有两个问题：1）我似乎无法将增量（positions++）仅放在if/else语句中。2） 第二次迭代不会更新圆和椭圆的位置（我应该使用jQuery$属性？） 我怎样才能解决这个问题Javascript和jQuery:onclick事件监听器在while循环中增加索引,javascript,jquery,html,canvas,onclick,Javascript,Jquery,Html,Canvas,Onclick,我有一个代码，当我按下“S”键时显示一个圆和一个椭圆（位置在18种可能的组合中选择）。然后我有一个while循环：我希望，在每次迭代中，如果接触到圆，立即生成一个新位置，如果连续3次未接触圆，则生成一个新位置 我有两个问题：1）我似乎无法将增量（positions++）仅放在if/else语句中。2） 第二次迭代不会更新圆和椭圆的位置（我应该使用jQuery$属性？） 我怎样才能解决这个问题 <html> <head> </head> <l
<html>
<head>
</head>
<link rel="stylesheet" href="cssFiles/blackBackground.css">
<script src="jsFiles/drawEllipse.js"></script>
<script src="jsFiles/drawCircle.js"></script>
<script src="jsFiles/newPosition.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"></canvas>
<p id="1"></p>
<p id="2"></p>
<script>
var ellipse = [[-150,-300],[-150,0],[-150,300],[150,-300],[150,0],[150,300]];
var circle = [[-350,-300],[-350,0],[-350,300],[350,-300],[350,0],[350,300]];
var radius = 95;
var positions = 0;
var clicks = 0;
var canvas = document.getElementById('myCanvas');
$(document).ready(function() {
document.addEventListener("keydown", function (e) {
if (e.keyCode === 83) { // "Start" is pressed
while (positions<6){
// generate first position
var idx = newPosition(ellipse,circle,radius)
var idx_ellipse = idx[0];
var idx_circle = idx[1];
var xRight = circle[idx_circle][0] + radius + canvas.width/2 ;
var xLeft = circle[idx_circle][0] - radius+ canvas.width/2;
var yTop = circle[idx_circle][1] - radius + canvas.height/2;
var yBottom = circle[idx_circle][1] + radius + canvas.height/2;
document.addEventListener("click", function(e) {
clicks++;
if (e.clientX< xRight && e.clientX> xLeft && e.clientY< yBottom && e.clientY> yTop) { //circle is correctly touched
var idx = newPosition(ellipse,circle,radius) // new position generated
positions++
}
else if (clicks > 3) {
var idx = newPosition(ellipse,circle,radius) // new position generated
positions++
}
}, false); //end of touch listener
} // end of while loop
} // end of "Start" keycode listener
}); //end of keydown listener
}) //end of document function
function newPosition(ellipse,circle,radius){
var idx_ellipse = Math.floor( Math.random() *6);
drawEllipse(ellipse[idx_ellipse][0],ellipse[idx_ellipse][1],radius,2.5,1);
// Check position of ellipse and draw circle on the other side
if (ellipse[idx_ellipse][0] == -150){
var idx_circle = Math.floor(Math.random() * (5 - 3 +1)) + 3;
drawCircle(circle[idx_circle][0],circle[idx_circle][1],radius,2.5,1);
}
else if(ellipse[idx_ellipse][0] == 150) {
var idx_circle = Math.floor(Math.random() * (2 - 0 +1)) + 0;
drawCircle(circle[idx_circle][0],circle[idx_circle][1],radius,2.5,1);
}
return [idx_ellipse,idx_circle];
}
</script>
</body>
</html>
变量椭圆=[-150，-300]，-150,0]，-150300]，[150，-300]，[150,0]，[150300]；
变量圆=[-350，-300]，-350,0]，-350300]，[350，-300]，[350,0]，[350300]；
var半径=95；
var位置=0；
var=0；
var canvas=document.getElementById（'myCanvas'）；
$（文档）.ready（函数（）{
文件.添加的文件列表器（“键控”，功能（e）{
如果按下（e.keyCode==83）{//“开始”
而（位置xLeft&&e.clientYyTop）{//圆被正确触碰到
var idx=newPosition（椭圆、圆、半径）//生成的新位置
职位++
}
否则如果（单击>3）{
var idx=newPosition（椭圆、圆、半径）//生成的新位置
职位++
}
}，false）；//触摸结束侦听器
}//while循环结束
}//结束“开始”键码侦听器
}); //keydown侦听器的结束
})//文档结束函数
函数newPosition（椭圆、圆、半径）{
var idx_eliple=Math.floor（Math.random（）*6）；
抽屉椭圆（椭圆[idx_椭圆][0]，椭圆[idx_椭圆][1]，半径2.5,1）；
//检查椭圆的位置，并在另一侧画圆
if（椭圆[idx_椭圆][0]=-150）{
var idx_circle=Math.floor（Math.random（）*（5-3+1））+3；
绘图圆（圆[idx_圆][0]，圆[idx_圆][1]，半径2.5,1）；
}
else if（椭圆[idx_椭圆][0]==150）{
var idx_circle=Math.floor（Math.random（）*（2-0+1））+0；
绘图圆（圆[idx_圆][0]，圆[idx_圆][1]，半径2.5,1）；
}
返回[idx_椭圆，idx_圆]；
}
position++clicks++