CODEWITHSUNDEEP
javascriptdomcanvas
William Garske
William Garske

Reputation: 317

JavaScript Canvas Problem Understanding Object Movement

There is a little extra code here in this question than what is needed. If you change the height of the canvas to be 100, it works.

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?

At the beginning...

When it reaches the bottom...

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

Upvotes: 0

Views: 46

Answers (1)

tevemadar
tevemadar

Reputation: 13195

It's the if (object.y==can.height || speedY==-5 ){. When speeds and acceleration are involved, == almost never happens, you are far safer with checking >= (or <=):

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

Upvotes: 1

Related Questions