旋转实体以查看鼠标(Craftyjs）

Rotate entity to view mouse (Craftyjs)

本文关键字：Craftyjs 鼠标 实体 旋转      更新时间：2023-09-26

我一直试图让我的玩家实体旋转到鼠标上，但我无法触发MouseMove事件。

Crafty.e("2D, Mouse, Canvas, Color"
   .attr({ w:1000, h:1000, x:0, y:0 })
   .bind('MouseMove', function(e)
   {
         console.log("Mouse Pos:"+ e.x +","+e.y);
        //get hero
         var pos1 = {
           x: e.x,
           y: e.y
         }
         var pos2 = {
           x: player.x,
           y: player.y
         }
         player.rotation = 0;
         player.rotation = -Engine.degree(pos1, pos2);

     })

当我用点击或鼠标向下或任何其他鼠标事件替换MouseMove时，当该事件发生时，它会旋转到鼠标。然而，它从不调用mousemove函数。我做错了什么？

看看社区制作的CraftyMouseFace组件：

该组件执行以下操作：

  • 它会找到给定精灵和鼠标位置之间的角度，并触发一个Crafty事件，该事件包含有关当前鼠标位置以及以弧度和度数计算的角度的信息
  • 确定精灵朝向的方向
  • 当鼠标按钮在游戏屏幕上的任何位置按下或释放时，触发Crafty事件

第一个功能听起来像你需要的。

让我们在下面的代码段中测试MouseMoved事件及其事件数据
移动鼠标指针，注意绿色矩形如何旋转以面对指针

Crafty.init();
Crafty.e("2D, DOM, Color, MouseFace")
    .attr({x: 75, y: 75, w: 60, h: 60})
    .origin("center")
    .color('green')
    .bind("MouseMoved", function(data) {
        this.rotation = data.rad * 180 / Math.PI;
    });
<script src="https://github.com/craftyjs/Crafty/releases/download/0.7.1/crafty-min.js"></script>
<script src="https://cdn.rawgit.com/petarov/CraftyMouseFace/master/src/craftyMFace.js"></script>

相关文章：