JavaScript Canvas 理解物体运动的问题

Question

这个问题这里的代码比需要的多了一点。如果将 canvas 的高度更改为 100，它会起作用。

I want to understand what is going on here as to why the alien doesn't shift directions and move the other way with bottom function (instead it just stops). Why doesn't it work? I'm not asking to fix the problem. I'm wanting to understand why it doesn't work code wise. Here is my logic as to why it should run. What is the issue here?

开头...

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

当它到达底部时...

drop函数drop();无法工作，因为 obj.y
底部();函数在 obj.y==can.height 时成立。现在请注意 speedY=-5 这对于下一次迭代非常重要，它允许对象继续以其他方式移动。一旦对象向上移动一个像素，obj.y 不等于执行 bottom() 的 canvas 高度；功能。但是，底部（）；成立是因为 speedY=-5 在前一次迭代中。这应该导致 bottom();函数继续将对象向上移动，其中 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>

Answer 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>

JavaScript Canvas 理解物体运动的问题

JavaScript Canvas Problem Understanding Object Movement

javascript

dom

canvas