JavaScript Canvas 问题理解对象移动答案

【问题标题】：JavaScript Canvas Problem Understanding Object MovementJavaScript Canvas 问题理解对象移动
【发布时间】：2021-06-19 15:17:18
【问题描述】：

在这个问题中这里有一些额外的代码而不是需要的代码。如果将画布的高度更改为 100，则可以。

我想了解这里发生了什么，为什么外星人没有使用底部功能转移方向并以另一种方式移动（而不是它只是停止）。为什么它不起作用？我不是要解决问题。我想了解为什么它在代码方面不起作用。这是我为什么应该运行的逻辑。这里有什么问题？

一开始……

drop();函数成立并运行。 speedX==5 为真，因为 speedX=5。对象从顶部开始时小于画布高度。并且 speedY==5 在 speedY=5 时成立。
底部();函数不执行，因为对象高度不等于画布高度。

当它到达底部时......

拖放函数 drop();无法工作，因为 obj.y
底部（）；函数作为 obj.y==can.height 成立。现在请注意 speedY=-5 这对于下一次迭代很重要，以允许对象继续向另一个方向移动。一旦对象向上移动一个像素，obj.y 就不等于执行 bottom() 的画布高度；功能。但是，底部（）；成立，因为 speedY=-5 在上一次迭代中。这应该导致底部（）；函数继续将对象向上移动到 drop();函数继续为假，因为 speedY 必须为 5 才能执行，现在设置为负 5。

<!DOCTYPE html>
<html>
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="alien"> ????︎</div>

<script>
//score does not have id score here 
</script>
  <canvas id="gameCanvas" width="100" height="150">Not supported</canvas>
<script type="text/javascript">
  var stage = new createjs.Stage("gameCanvas");
  var domElement = new createjs.DOMElement(document.getElementById("alien"));
  var object = new createjs.DOMElement(document.getElementById("alien"));
  can = document.getElementById("gameCanvas");
  object.x = can.width/2;
  object.y = 1;
  var speedY=5;
  var speedX=5;
        function startGame() {
            stage.addChild(object);
            createjs.Ticker.addEventListener("tick", handleTick);
              function handleTick(event) {
              drop();
              bottom();
              stage.update();
            }
        }
 function drop(){
  if ( speedX==5 && object.y<can.height  && speedY==5){
      object.x += 0;
      object.y +=3;
      speedY=5;
   }
 }
  function bottom(){
   if (object.y==can.height || speedY==-5 ){
     speedY=-5;
     object.y -=3;
     object.x +=1;
   }
 }
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>
</html>

【问题讨论】：

你在问什么？
为什么外星人到达画布底部后不向上移动？
我回来晚了，下面已经回答了。原因是因为每帧都在更新所有内容，因此在碰撞检测方面，让移动对象完全等于边界是很少见的。您的角色正在经过帧之间的== 点，因此不会发生碰撞。使用大于和小于如下所述。
@Justin 哦，有道理！它并没有完全触及边界。谢谢。

标签： javascript dom canvas

【解决方案1】：

这是if (object.y==can.height || speedY==-5 ){。当涉及速度和加速度时，== 几乎不会发生，检查>=（或<=）会更安全：

<!DOCTYPE html>
<html>
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="alien"> ?︎</div>

<script>
//score does not have id score here 
</script>
  <canvas id="gameCanvas" width="100" height="150">Not supported</canvas>
<script type="text/javascript">
  var stage = new createjs.Stage("gameCanvas");
  var domElement = new createjs.DOMElement(document.getElementById("alien"));
  var object = new createjs.DOMElement(document.getElementById("alien"));
  can = document.getElementById("gameCanvas");
  object.x = can.width/2;
  object.y = 1;
  var speedY=5;
  var speedX=5;
        function startGame() {
            stage.addChild(object);
            createjs.Ticker.addEventListener("tick", handleTick);
              function handleTick(event) {
              drop();
              bottom();
              stage.update();
            }
        }
 function drop(){
  if ( speedX==5 && object.y<can.height  && speedY==5){
      object.x += 0;
      object.y +=3;
      speedY=5;
   }
 }
  function bottom(){
   if (object.y>=can.height || speedY==-5 ){  // <----- here
     speedY=-5;
     object.y -=3;
     object.x +=1;
   }
 }
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>
</html>

【讨论】：