Kinetic.js 在进行 .move() 时获取形状的位置

Question

I was working on a little HTML5 game, a simple one using Kinetic.js, and I have never used it before.我正在开发一个小的 HTML5 游戏，一个使用 Kinetic.js 的简单游戏，我以前从未使用过它。 I am also pretty new to the HTML5 Canvas scene.我对 HTML5 Canvas 场景也很陌生。 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.我遇到了一个问题，我希望有障碍物可以绕过，但是我设置代码的方式（使用.move()函数，我将在下面包含它）我无法获得我的船的坐标当它移动时，只在按键被按下时，或在它被释放之后。 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.有没有办法让我的代码运行，以便我可以交叉引用它的坐标与它前面可能存在的任何障碍。

Here's what I have as functions to move the ship.这是我移动船的功能。 The 'rect' variable is the ship. 'rect' 变量是船。

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/这是代码和小提琴： 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 在进行 .move() 时获取形状的位置

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-12-13 14:29:11

Kinetic.js 在进行 .move() 时获取形状的位置

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-12-13 14:29:11

解决方案1
1 已采纳 2013-12-13 14:29:11