Crafty.js 碰撞后返回上一个位置答案

【问题标题】：Crafty.js Go back to previous position after CollisionCrafty.js 碰撞后返回上一个位置
【发布时间】：2019-09-28 06:28:15
【问题描述】：

 player.bind('Move', function(from) {


                                    if(this.hit('Tree')){

                                        player.x = from._x
                                        player.y = from._y
             // Here player.x and player.y have right value but not renderered here.

                                    }
                }
                )

我调试了程序进入这里，from._x 和 from._y 有很好的值。但是玩家仍然在树的“后面”。

【问题讨论】：

Crafty.Js 中碰撞前的前一个位置可能是接触另一个实体之前最近的位置。与其尝试返回之前的位置，不如创建一个回调，让您的实体返回一些空间（您必须检查实体正在查看的方向）。

标签： craftyjs

【解决方案1】：

我还没有很多 CraftyJS 经验，所以不要把它当作最好的方法，但是......

我在 API 文档中找到的一些参考资料：

将Collision 组件应用于播放器和树
对播放器使用 onHit()。当被触发时，它会传递一个 hitDatas 的集合。在hit() 的描述中找到了 hitData 的定义

这里有一个例子——当标记为“玩家”组件的实体与任何标记为“树”的组件发生碰撞时，玩家对象的 x 位置将向后偏移它与树重叠的量。

<html>
<body>
    <div id="game"></div>
    <script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
    <script>
      Crafty.init(640,100, document.getElementById('game'));


      Crafty.e('2D, Canvas, Color, Twoway, Player, Collision')
      	.attr({x: 0, y: 50, w: 50, h: 50})
      	.color('#00F')
      	.twoway(400)
      	.onHit('Tree', function(hitDatas) {
      		hitData = hitDatas[0];

      		this.x -= hitData.overlap * hitData.nx;
      	});

      Crafty.e('2D, Canvas, Color, Tree, Collision')
      	.attr({x: 300, y:0, w: 40, h: 100})
      	.color('#873');

    </script>
  </body>
</html>

【讨论】：