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），计算点击鼠标的角度（在下面完成，所以应该只是复制/粘贴）并将transform: rotate(Xdeg);调整为新角度。

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

在底部试试。

＆＃13;

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);
};

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

我不建议以这种方式构建游戏，Canvas和SVG是构建浏览器游戏的首选方法，并表示可以这样做。

试试这个

https://jsfiddle.net/b77x4rq4/

$(document).ready(function(){

    var middleOfElementTop = 250; // margin from top + half of height
    var middleOfElementLeft = 125; // margin from left + half of width

  $("#main").mousemove(function(e){
    var mouseX = e.offsetX;
    var mouseY = e.offsetY;

    var angle = Math.atan2(mouseY - middleOfElementTop, mouseX - middleOfElementLeft) * 180 / Math.PI;
    $(".box").css({"transform": "rotate(" + angle + "deg)"})


  })
});

图像角度根据鼠标的位置而变化

2 个答案: