使用 JavaScript 和 Canvas 反复向下移动新对象

Question

单击此处的“新问题”按钮后，我很难平稳地向下移动对象（即另一个方程）。起初，我尝试创建一个 setTimeout() 函数，但它只是延迟了所有内容，并且要弄清楚对象移动了多少毫秒。 单击按钮后，通常如何以与前一个对象相同的方式向下移动新对象？

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->

<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="eqn1"> 3+3=<input type="text" id="q1j" />
    </div>
<button id="myBtn" onclick="response()">New Question</button>

<script>
var k=1;
// k = Number of Questions
function addInput(qnj) {
 var x = document.createElement("INPUT");
 var qn=qnj.slice(0,-1);
  x.setAttribute("id", qn);
  x.setAttribute("type", "hidden");
  x.setAttribute("value", document.getElementById(qnj).value);
  document.body.appendChild(x);
}
function response(){
alert("New Question");
addInput("q1j");
document.getElementById('eqn1').remove();
}
for(let i=1; i<=k; i++){
const quest=[];
quest[i]= document.getElementById(`q${i}j`);
quest[i].addEventListener("keyup", function(event) {
  if (event.keyCode === 13 ) {
   document.getElementById("myBtn").click();
   event.preventDefault();
  }
});
}
</script>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
  const values = [];
  values[1] = document.getElementById("q1j");
  var stage = new createjs.Stage("gameCanvas");
  var obj=[]
  for (let i = 1; i <= k; i++) {
  obj[i] = new createjs.DOMElement(document.getElementById(`eqn${i}`));
  }
  var gravity = 1;
  can = document.getElementById("gameCanvas");
  for (let i = 1; i <= k; i++) {
  obj[i].x = Math.random()* can.width;
  obj[i].y = 0.5;}
function startGame() {       

    stage.addChild(obj[1]);
    setTimeout(delay, 5000);
    function delay(){
    stage.addChild(obj[2]);
    }


    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick(event){
    drop();
    stage.update();
    }
}
 function drop(){
    for (let i = 1; i <= k; i++) {
      obj[i].x += 1;
      obj[i].y +=3;
    } 
 }
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>

</html>

代码简要说明：上面的代码中发生的事情是将方程 1（即 eq1，即 3+3=一些输入）添加到舞台/画布中。这个方程变成了 obj[1] 并通过 drop() 函数向下移动。通过单击“myBtn”激活的 response() 函数删除了方程。在等式被删除之前，从 q1j 分配的输入 id 被重新保存为 q1，这样我就可以稍后从 id 中获取值并将它们保存在数据库中。

Answer 1

我想我是从将每个对象声明为函数开始的。

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->

<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="eqn1"> 3+3=<input type="text" id="q1j" />
    </div>
  <div id="eqn2"> 3+2=<input type="text" id="q2j" />
    </div>
<button id="myBtn" onclick="response()">New Question</button>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var p=1;
var m=1;
function addInput(qnj) {
const questionArray=[];
 questionArray[p] = document.createElement("INPUT");
  questionArray[p].setAttribute("id", qnj.slice(0,-1));
  questionArray[p].setAttribute("type", "hidden");
  questionArray[p].setAttribute("value", document.getElementById(qnj).value);
  document.body.appendChild(questionArray[p]);
  p=p+1;
  stage.update();
}
function response(){
alert("New Question");
addInput(`q${m}j`);
document.getElementById(`eqn${m}`).remove();
m=m+1;
stage.update();
}
const quest=[];
quest[m]= document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", function(event) {
  if (event.keyCode === 13 ) {
   document.getElementById("myBtn").click();
   event.preventDefault();
  }
});
  const values = [];
  values[m] = document.getElementById(`q${m}j`);
  var stage = new createjs.Stage("gameCanvas");
  var obj=[];
  obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
  can = document.getElementById("gameCanvas");
  obj[m].x = Math.random()* can.width;
  obj[m].y = 0.5;
function startGame() {       

    stage.addChild(obj[m]);

    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick(event){
    drop(m);
    stage.update();
    }
}
 function drop(i){
      obj[i].x += 1;
      obj[i].y +=3;
  
 }
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>

</html>