当我按下“S”时，我有一个代码显示一个圆圈和一个椭圆（这些位置是从18种可能的组合中选择的）。然后我有一个while循环：我希望在每次迭代时，如果触摸圆圈，则立即生成新位置，如果连续3次未触摸圆圈，则生成新位置。
我有两个问题：1）似乎我不能将增量（位置++）放在if / else语句中。 2）第二次迭代不更新圆和椭圆的位置（我应该使用jQuery $属性？）
我该如何解决这个问题？
<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>