javascript - 图像 Angular 根据鼠标位置变化

Question

我正在尝试构建一个游戏，让敌人跳出水面，然后你向他们喷水...

当用户点击触发时，我希望 img src 指向点击的方向，以实现我目前拥有的功能，我有 css 和 js 脚本(下面的代码)，但它看起来是静态的，我觉得用户输入方向的水点会有很大帮助，但我不确定如何实现这一目标？

 //bind to gun events
        this.playfield.on('gun:out_of_ammo',_.bind(function(){this.outOfAmmo();},this));
        this.playfield.on('gun:fire',_.bind(function(){
            this.flashScreen();
        },this));

...

 flashScreen : function(){
        $(".theFlash").css("display","block");
        setTimeout(function(){
            $('.theFlash').css("display","none");
        },400);
    }

CSS

.theFlash{
    background-color : transparent;
    width:900px;
    height:500px;
    position:relative;
    margin:0 auto;  
    z-index:10;
    display:none;
}

Answer 1

我在下面整理了一个示例，希望对您有所帮助。

你只需要指定射击的来源(sourceX,sourceY)，计算鼠标点击的 Angular (在下面完成，所以应该只是复制/粘贴)并将 transform: rotate(Xdeg); 调整到新的 Angular 。

确保使用 transform-origin 在 css 中设置原点，以便火焰围绕源而不是火焰本身旋转。

在底部试试。

var game,
    flame,
    sourceX = 310,
    sourceY = 110;

window.onload = function() {
  game = document.getElementById('game');
  flame = document.getElementById('flame');
  game.addEventListener('click', function(e) {
      var targetX = e.pageX,
    	  targetY = e.pageY,
          deltaX = targetX - sourceX,
          deltaY = targetY - sourceY,
          rad = Math.atan2(deltaY, deltaX),
          deg = rad * (180 / Math.PI),
          length = Math.sqrt(deltaX*deltaX+deltaY*deltaY);   
 		
      fire(deg,length);
  }, false);
};

function fire(deg,length) {
    flame.style.opacity = 1;
    flame.style.transform = 'rotate(' + deg + 'deg)'
    flame.style.width = length + 'px';
    setTimeout(function() {
       flame.style.opacity = 0;
    },300);
};

#game {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: #666;
  overflow: hidden;
}

#source {
  border-radius: 50%;
  z-index: 101;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  position: absolute;
  left: 300px;
  top: 100px;
}

#flame {
  width: 300px;
  height: 3px;
  background-color: #00ff00;
  position: absolute;
  left: 310px;
  top: 110px;
  opacity: 0;
  transform-origin: 0px 0px;
  transform: rotate(180deg);
  transition: opacity .2s;
}

<div id="game">
  <div id="source">

  </div>
  <div id="flame">

  </div>
</div>