Javascript Kinetic.js在执行.move（）时获取形状的位置_Javascript_Html_Canvas_Dom Events_Kineticjs

Javascript Kinetic.js在执行.move（）时获取形状的位置

javascript html canvas

Javascript Kinetic.js在执行.move（）时获取形状的位置,javascript,html,canvas,dom-events,kineticjs,Javascript,Html,Canvas,Dom Events,Kineticjs,我正在开发一个HTML5小游戏，一个使用Kinetic.js的简单游戏，我以前从未使用过它。我对HTML5画布场景也很陌生。我的代码运行时，当我按下向右箭头键时，一艘小宇宙飞船在屏幕上移动。所有其他按钮的工作方式也是一样的，向上移动它，向下移动它，向下和向左同时按下对角线向下移动等等。我遇到了一个问题，我希望有障碍物可以绕过，但是我设置代码的方式（使用.move（）函数，我将在下面包括它）我无法在船移动时获得船的坐标，只能在按下键时或松开键后获得。有没有一种方法可以让我的代码运行，这样我就可以交

我正在开发一个HTML5小游戏，一个使用Kinetic.js的简单游戏，我以前从未使用过它。我对HTML5画布场景也很陌生。我的代码运行时，当我按下向右箭头键时，一艘小宇宙飞船在屏幕上移动。所有其他按钮的工作方式也是一样的，向上移动它，向下移动它，向下和向左同时按下对角线向下移动等等。我遇到了一个问题，我希望有障碍物可以绕过，但是我设置代码的方式（使用

.move（）

函数，我将在下面包括它）我无法在船移动时获得船的坐标，只能在按下键时或松开键后获得。有没有一种方法可以让我的代码运行，这样我就可以交叉引用它的坐标和它前面可能存在的任何障碍物

这是我用来移动飞船的功能。“rect”变量是船

检查动画循环内的碰撞。

//Move Right Animations

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

下面是代码和小提琴：


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var rect=新的动能.rect({
x:100，
y:100，
宽度：100，
身高：100，
填充：“红色”，
笔画：“黑色”，
冲程宽度：1，
德拉格布尔：是的
});
层。添加（rect）；
layer.draw（）；
//右移动画
var animRight=新的动能动画（函数（帧）{
直线移动（1,0）；
if（rect.getX（）+rect.getWidth（）>stage.getWidth（））{animRight.stop（）；}
}，层）；
animRight.start（）；
}); // end$（函数（）{}）；

问题在于，该对象是可拖动的（我不希望这样），并且移动速度不够快。我可能可以修改它来工作，但它仍然不完全符合我的要求。有没有一种方法可以提高移动一个像素的速率，而不改变它的跳转速度。你可以使用draggable:false定义使对象不可拖动。动态动画的最大运行速度为60fps，因此加快移动速度的唯一方法是增加rect.move，使其每帧变化超过1个像素。如果对象稍微超出边界，则可以将对象重新定位到该边界。祝你的项目好运：）另外，你的答案也没有解决这样一个问题：当我按住键时，它不会在移动时逐步检查坐标，因为它不会多次运行函数。实际上，碰撞测试是在每次你的rect移动时运行的。动画的工作原理是每秒自动重新运行提供的函数60次。因此，即使您只运行animRight.start一次，它也会以60fps的速度重新运行，直到停止。

//Move Right Animations

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

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