Kinetic.js Get position of a shape while undergoing a .move()

Question

I was working on a little HTML5 game, a simple one using Kinetic.js, and I have never used it before. I am also pretty new to the HTML5 Canvas scene. My code runs so that as I press the right arrow key, a little spaceship I made moves across the screen. All the other buttons work the same way too, up moves it up, down moves it down, down and left pressed simultaneously move diagonally down and so forth. I have run into a problem where I want there to be obstacles to get around, but the way I have my code set up (using the .move() function, I'll include it below) I cannot get the coordinates of my ship as it moves, only right as the key is pressed, or right after it is released. Is there a way I can get my code to run so that I can cross reference it's coordinates with any obstacles that may exist in front of it.

var velocity = 200;
//Move Animations

//Move Right Animations
var animRight = new Kinetic.Animation(function(frame) {
      var dist = velocity * (frame.timeDiff / 1000);
      rect.move(dist, 0);
}, layer);

//Move Left Animations
var animLeft = new Kinetic.Animation(function(frame) {
      var dist = velocity * (frame.timeDiff / 1000);
      rect.move(-dist, 0);
}, layer);

//Move Up Animations
var animUp = new Kinetic.Animation(function(frame) {
      var dist = velocity * (frame.timeDiff / 1000);
      rect.move(0, -dist);
}, layer);

//Move Down Animations
var animDown = new Kinetic.Animation(function(frame) {
      var dist = velocity* (frame.timeDiff / 1000);
      rect.move(0,dist);
}, layer);


    //Key Listening Events

//Move Up Control
window.addEventListener('keypress', function(e) {
    e.preventDefault();
    if(e.keyCode==38) {
        animUp.start();
    }
});
window.addEventListener('keyup', function(e) {
    e.preventDefault();
    if(e.keyCode==38) {
        animUp.stop();
    }
});

//Move Right
window.addEventListener('keydown', function(e) {
    e.preventDefault();
    if(e.keyCode==39) {
        animRight.start();
        rect.setAnimation('accl');

    }
});
window.addEventListener('keyup', function(e) {
    e.preventDefault();
    if(e.keyCode==39) {
        animRight.stop();
        rect.setAnimation('idle');

    }
});

//Move Left
window.addEventListener('keydown', function(e) {
    e.preventDefault();
    if(e.keyCode==37) {
        animLeft.start();
    }
});
window.addEventListener('keyup', function(e) {
    e.preventDefault();
    if(e.keyCode==37) {
        animLeft.stop();
    }
});

//Move Up
window.addEventListener('keydown', function(e) {
    e.preventDefault();
    if(e.keyCode==38) {
        animUp.start();
    }
});
window.addEventListener('keyup', function(e) {
    if(e.keyCode==38) {
        e.preventDefault();
        animUp.stop();
    }
});

//Move Left
window.addEventListener('keydown', function(e) {
    e.preventDefault();
    if(e.keyCode==40) {
        animDown.start();
    }
});
window.addEventListener('keyup', function(e) {
    e.preventDefault();
    if(e.keyCode==40) {
        animDown.stop();
    }
});

Answer 1

Check for collisions inside the animation loops.

//Move Right Animations

var animRight = new Kinetic.Animation(function(frame) {
      rect.move(1, 0);
      if(rect.getX()+rect.getWidth()>stage.getWidth()){animRight.stop();}      
}, layer);

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/3CdBb/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var rect = new Kinetic.Rect({
        x:100,
        y:100,
        width: 100,
        height:100,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1,
        draggable: true
    });
    layer.add(rect);
    layer.draw();


    //Move Right Animations
    var animRight = new Kinetic.Animation(function(frame) {
          rect.move(1, 0);
          if(rect.getX()+rect.getWidth()>stage.getWidth()){animRight.stop();}      
    }, layer);


    animRight.start();


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

Kinetic.js Get position of a shape while undergoing a .move()

Question

1 answers

solution1
1 ACCPTED 2013-12-13 14:29:11

Kinetic.js Get position of a shape while undergoing a .move()

Question

1 answers

solution1 1 ACCPTED 2013-12-13 14:29:11

solution1
1 ACCPTED 2013-12-13 14:29:11